w3schols.com의 Learn html 기반으로 작성
HTML의 정의
- HTML : Hyper Text Markup Language
- 하이퍼 텍스트 : 하이퍼링크를 포함해서 순차적으로 구성되지 않고 링크 연결 중심으로 구성된 문서
- 마크업 : 콘텐츠 영역을 표시함
HTML의 요소 (Element)
- HTML은 웹 페이지의 구조를 표현
- HTML은 Element로 구성 (Element는 콘텐츠 영역을 표시하는 도구(표식)
- Element 표식은 브라우저에서 콘텐츠 종류를 알려주는 역할 : "이것은 ~콘텐츠이다"
요소(HTML Element) : 콘텐츠를 시작 태그와 종료 태그로 그루핑 하는 구성
예) <h1> 제목 </h1>
여기서 종료 태그를 쓰지 않아도 일부 태그들은 정상출력이 되나 예기치 않은 오류를 방지하기 위해서는 종료태그를 꼭 작성해주어야 한다.
빈 요소(Empty Element) : 콘텐츠가 없는 요소(종료 태그 또한 없음)
예) <br> : 줄 바꿈 기능
<img src = "이미지 경로/파일 이름" > : 이미지 콘텐츠 표시
DOCTYPE
<! DOCTYPE html> : Document Type - 문서 유형(종류), html5 선언 형식
문서의 유형이 html임을 선언하며 페이지 상단에 한 번만 표시한다.
대소문자를 구분하지 않으나 관례적으로 대문자로 작성
예전에는 여러 가지 DOCTYPE의 버전과 종류가 있었고 각 유형별로 다른 정의를 해주어야 했다.
지금은 html5로 통일되어 선언문이 간소화되었다.
HTML의 구조
<!DOCTYPE html> : Document Type - 문서 유형(종류)
: html 문서의 유형을 정의 - html5 유형으로 선언
<html> : html 문서의 시작과 끝을 의미
<head> : html 문서의 메타 정보들이 포함됨 (현재 html 문서를 설명)
</head>
<body> : html 문서의 실제 콘텐츠들이 포함됨
<body>
</html> : html 문서의 끝**메타정보(metadata) : 데이터에 대한 데이터
HTML 요소의 중첩(Nested HTML Elements)
** Nested / 포함관계 / 중첩 관계
- 시작 태그-종료 태그 사이에 여러 태그나 콘텐츠가 포함될 수 있음
- 요소를 중첩시켜서 입력할 때 : 줄 바꿈-여러 줄
- 가독성 고려해서 들여쓰기를 활용해야 함 - Tab키 사용
<html><head></head><body></body></html>위와 같은 형식을 중첩/포함관계(Nested)라고 부르며 위 태그 사이에는 수많은 요소들이 들어가게 된다.
<html>
<head></head>
<body></body>
</html>그렇기 때문에 위와 같이 가독성을 고려하여 들여쓰기를 하여야 함
Attribute
HTML 속성(Attribute) : HTML 요소에 대한 추가 정보를 제공된다.
요소의 시작태그에 작성되며 더 구체적인 명령어를 입력할 수 있다.
- 모든 HTML 요소는 속성을 가질 수 있음
- 작성 : 시작 태그에 작성
- 속성은 일반적으로 name = "value" 형식(Syntax)을 가짐
예시
href 속성
<a href="http://www.naver.com">네이버</a>네이버 문자열에 http://www.naver.com 주소가 링크된다.
*<a> 태그는 하이퍼 링크를 정의함
src 속성
<img src="img.jpg" />
* <img와 같은 빈 요소의 경우 시작태그 끝에 /를 넣어 종료태그를 누락한것인지, 빈태그인지 명확하게 구분을 할 수 있다.
** img 태그는 HTML페이지에 이미지 표현 시 사용
<img src="img.png" alt="설명글"/>속성이 여러개 사용될 시에 속성간의 구분은 공백(띄어쓰기)으로 구분한다
(alt 속성은 <img>의 이미지를 표시할 수 없을 경우 대체 텍스트를 지정한다.)
*속성 값에는 항상 따옴표를 사용할 것을 권장하며 속성 값에 따옴표가 들어갈 경우에는 작은따옴표도 사용할 수 있다.
만약 따옴표를 사용하지 않을 시 예기치 못한 오류가 발생할 수도 있다.
**속성 값에는 소문자 사용을 권장함
'Front > HTML' 카테고리의 다른 글
| [HTML] HTML <video> 동영상올리기, video태그와 속성 (0) | 2021.01.07 |
|---|---|
| [HTM] HTML <img> 이미지올리기, img태그와 속성 (0) | 2021.01.07 |
| [HTML] HTML5 콘텐츠 모델 (0) | 2021.01.07 |
| [HTML] HTML 엔터티 (Entity, Escape) (0) | 2021.01.07 |
| [HTML] HTML 텍스트 익혀보기 (위키백과의 HTML5 문서 만들어보기) (0) | 2021.01.06 |
