안녕하세요~ 저번 시간에는 HTML 첫 번째 문서를 만들어보았는데요! 오늘은 HTML 코드의 기본 구조에 대해서 말씀드려보겠습니다.
[HTML/CSS] 첫 번째 HTML 문서 만들기(feat. VSCode)
오늘은 VSCode 에디터를 이용하여 HTML 문서를 만들어보는 시간을 가지겠습니다. 앞서 VSCode 설치 및 개발 환경 설정에 대해서 궁금하시다면 아래 글을 참고 해주시면 감사하겠습니다. VSCode 확장 프
hkdong0694.com
01. DTD (Document Type Definition) : 문서형 정의
문서형 정의는 웹 브라우저가 처리해야할 HTML 문서가 어떤 형식을 따라가야하는지 알려주는 것으로, 어떤 HTML 문서를 작성하든지 꼭 맨 처음에 작성을 해주어야 합니다.
<!DOCTYPE html>
다음처럼 코드를 작성해주면 웹 브라우저는 자동으로 HTML 문서를 HTML5 문서 형식으로 자동 해석합니다. HTML5가 등장하고 나서부터는 이전 버전의 문서 형식을 따로 정의를 할 필요가 없어졌습니다.
02. html 태그
<html>
</html>
해당 태그는 HTML 문서의 시작과 끝을 의미하게 됩니다. 모든 HTML 문서 안에 있는 태그는 위에 있는 html 태그 안에 작성을 해야 합니다.
03. head 태그
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
head 태그는 HTML 문서의 메타데이터를 정의하는 영역입니다. HTML 문서에 대한 정보로 실제 웹브라우저에서는 직접적으로 노출되지 않습니다. 위의 코드 처럼 보통 meta, title, link 태그로 이루어져 있고, style 및 script 태그도 사용하여 HTML 문서의 메타데이터를 정의합니다.
04. body 태그
<!-- 04. body : 웹 브라우저에 표시할 내용 -->
<body>
<!-- 웹 페이지에 표시할 내용을 적어주세요. -->
<p>내가 만든 첫번째 웹 페이지!</p>
</body>
실제 웹 브라우저에 노출되는 내용을 작성하는 영역입니다.
최종적으로 HTML 문서의 기본 틀은 첫 번째 문서에서 만들었던 구조로 이루어져 있고, 저희는 보통 <body></body> 영역 안에 다양한 태그들을 공부할 예정입니다.
이렇게 오늘은 HTML 기본 구조에 대해서 알아보았습니다. 다음 시간부터는 <body></body> 영역 안에 다양한 태그 들에 대해서 하나씩 포스팅 해보겠습니다.
'Language > HTML' 카테고리의 다른 글
| [HTML/CSS] 첫 번째 HTML 문서 만들기(feat. VSCode) (0) | 2024.02.18 |
|---|---|
| VSCode 확장 프로그램 설치 종류 (0) | 2024.02.15 |
댓글