HTML 문서의 기본적인 구조는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>제목</title>
</head>
<body>
<h1>이것은 내용입니다.</h1>
<p>이것은 단락입니다.</p>
<img src="img/html.png">
</body>
</html>
<!DOCTYPE html>
현재 문서가 html5로 작성된 문서임을 의미합니다. 해당 태그는 웹 브라우저에게 html5에 맞게 해석하라고 알려줍니다.
html5에서는 현재 문서가 html 문서임을 표기하는 것만으로도 문서 유형 선언이 끝납니다.
<html> ~ </html>
웹 문서의 정보와 내용이 시작되고 끝남을 알리는 태그입니다. <html>태그는 웹 문서가 시작된다는 뜻이고, </html>태그는 웹 문서가 끝났다는 뜻입니다. 따라서 웹 문서의 모든 내용은 <html> ~ </html> 태그 안에 위치하게 됩니다.
<html> 태그 내부에서 lang 속성을 사용하여 언어를 지정할 수 있습니다.
한국어 웹페이지는 ko를, 영문 웹페이지는 en를 사용합니다.
<html lang="ko"><html> 태그는 웹 문서의 정보를 나타내는 <head>태그와 화면에 보여질 내용을 담고 있는 <body> 태그를 포함합니다.
<head> ~ </head>
head 태그는 브라우저에게 특정한 정보를 알려주는 태그입니다. 웹 브라우저가 html 문서를 해석하면서 알아야 할 정보와 문서에서 사용할 외부 파일들은 모두 head 태그 안에 위치합니다. head태그 내부에서 사용할 수 있는 주요 태그에는 <title>, <meta>가 있습니다.
<title>태그는 웹 브라우저의 제목 표시줄에 표시될 내용입니다. title에는 페이지의 내용을 쉽게 추측할 수 있는 주요 단어들을 넣는 것이 좋습니다.
<meta> 태그는 문자 인코딩 방식, 웹 문서 검색 키워드 등을 지정하는 태그입니다. 이중 문자 인코딩을 지정하는 것이 가장 중요합니다. 문자 인코딩이란 웹 문서에서 한글을 화면에 나타내기 위한 문자 세트를 지정하는 것을 말합니다. 주로 utf-8 방식을 사용합니다. 한글과 영어뿐만 아니라 수많은 언어를 표시할 수 있기 때문입니다. 문자 인코딩은 다음과 같이 지정합니다.
<head>
<meta charset="utf-8">
</head>
또한 meta 태그 내부에서 name과 content 속성을 이용하여 웹 문서에 대한 간단한 설명을 지정할 수 있습니다.
<meta name="description" content="웹 문서 설명">
head 태그 내에서 자주 볼 수 있는 style태그와 link 태그는 CSS를 html에 추가할 때 사용합니다. head태그 내부의 style태그 안에 직접 CSS 코드를 추가하는 내부 스타일 시트 방법과 link태그에 외부 링크(.css 파일)를 연결하는 방법이 있습니다. style, link 태그는 CSS를 공부할 때 다시 알아보겠습니다.
<body> ~ </body>
body 태그는 실제 브라우저 화면에 표시될 내용이 들어가는 부분입니다. body 안에 들어갈 태그에는 제목을 나타내는 h1 태그, 단락을 나타내는 p 태그, 이미지를 나타내는 img 태그 등 수많은 태그들이 존재합니다. 여러가지 태그에 대한 설명은 본격적인 html 태그 소개에서 다시 언급하겠습니다.
'개발 공부 > Html & CSS' 카테고리의 다른 글
| HTML과 CSS 그리고 웹 표준 (0) | 2022.07.11 |
|---|