HTML의 기본 구조
- HTML 문서는 일정한 구조 안에서 작성이 된다. 이것을 기본 구조라고 한다.
<!DOCTYPE html> <!-- DTD: 문서형 정의 -->
<html lang="en"> <!-- html: html 문서의 시작과 끝 -->
<head> <!-- head: 문서 정보 정의 -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>나의 첫 웹페이지</title>
</head>
<body> <!-- body: 웹에서 표시될 내용 작성 -->
<!-- 웹에서 보여질 내용을 작성 한다 -->
<p>첫 웹페이지 문구 작성</p>
</body>
</html>
1. 문서형 정의 (DTD, Document type Definition)
<!DOCTYPE: HTML> <!--DTD 문서형 정의-->- 웹 브라우저가 처리할 HTML 문서가 어떤 문서인지 알려주는 것이다. HTML 문서는 최신 형식인 HTML5 문서 형식으로 해석한다. HTML5 등장 이후로 이전 버전 문서(html4) 형식을 정의할 필요가 없어졌으므로 <! DOCTYPE: HTML>로 DTD를 작성해 주면 된다.
2. html 태그
<html> </html> html태그는 문서의 시작과 끝을 의미한다. 따라서 html 태그 안에 작성을 해야 한다.
3. head태그
<head> </head> 태그는 문서의 메타데이터(metadata)를 정의하는 영역이다.
- 메타데이터란? HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접 노출되지 않는다. meta, title, link, style, script 등의 태그를 사용하여
html 문서의 여러 정보를 정의한다.
3-1. meta 태그
<meta /> 태그는 메타데이터를 정의하는 데 사용한다.
<meta charset="UTF-8">과거에는 EUC-KR을 주로 사용했지만, 최근에는 더 많은 언어를 허용하기 위해서 UTF-8만 사용한다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">위의 메타(meta) 태그는 인터넷 익스플로러의 렌더링 엔진을 강제로 최신 렌더링 엔지로 지정하는 메타데이터를 나타낸다. 현재 (Microsoft Edge)로 설정되어 있는 모습이다.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />마지막으로 뷰포트(viewport)는 사용자가 웹페이지에 접속했을 때 보이는 화면 영역을 의미한다.
기기 화면 너비에 맞추기 위해 사용하는 메타데이터 태그이다.
4. title 태그
-title 태그는 HTML 문서의 제목을 지정하는 데 사용한다.
<title>나의 첫 웹페이지</title>
모든 HTML 문서는 반드시 1개의 title 태그를 사용하여 HTML 문서의 제목을 지정해야 한다.
주의할 점은 HTML 문서마다 중복되지 않도록 주의해야 한다.
긴 글 읽어주셔서 감사합니다.
부족한 설명은 댓글로 달아주시면 추가하도록 하겠습니다.
감사합니다. :)
'Front-end Developer > HTML' 카테고리의 다른 글
| 6.HTML의 부모, 자식, 형제 관계 / 줄 바꿈과 들여쓰기 (0) | 2022.10.23 |
|---|---|
| 4.HTML 태그를 사용하여 텍스트 만들기 <h>,<p>,<br>,<span> (0) | 2022.10.22 |
| 5. Html의 <div> 태그 (0) | 2022.10.22 |
| 2. HTML의 특징 블록(block) 요소 vs 인라인(inline) 요소 (0) | 2022.10.22 |
| 1.HTML의 기본 구성 요소 (0) | 2022.10.21 |
