1. HTML 문서 소개
HTML 문서가 어떻게 구성되어 있는지 알아보자. 모든 HTML 문서는 어떻게 시작될까? 모든 HTML 문서에는 html, head, body 세 가지 태그로 구성된 구조가 있어. 이건 표준인데, 예제로 볼게:
<!DOCTYPE html>
<html>
<head>
메타 태그들
</head>
<body>
주요 문서
</body>
</html>
브라우저가 표시하는 모든 콘텐츠는 body (문서 본문) 태그 안에 있어. 반면에 head 태그 안에는 브라우저를 위한 메타/부가 정보들이 들어 있어.
또한 문서의 맨 앞부분에 문서 타입인 DOCTYPE을 작성하는 것이 일반적이야 (필수는 아니야). 브라우저가 오류를 해석하는 데 더 잘 이해할 수 있도록 도와줘. 물론 많은 브라우저들이 깨진 레이아웃 문서를 올바르게 표시할 수 있어.
2. HTML 문서 예제
HTML 문서는 모든 웹 페이지의 기본이야. 브라우저에게 페이지가 어떻게 보여야 하는지 알려주지. 여기 간단한 HTML 문서 예제가 있어:
<!DOCTYPE html>
<html>
<head> <title>페이지 제목</title> </head>
<body> <h1>안녕, 세상!</h1> <p>이것은 나의 첫 번째 웹 페이지야.</p> </body>
</html>
HTML 문서의 주요 부분
이 줄은 문서 타입 선언(doctype)이라고 불려. 브라우저에게 이 문서가 HTML5, HTML의 최신 버전으로 작성되었음을 알려주는 역할을 해. 페이지를 제대로 표시하기 위해 중요해.
<html>
태그 <html>는 HTML 문서를 시작해. 웹 페이지의 모든 내용은 이 태그 안에 있어야 해. HTML 문서의 시작과 끝을 나타내지.
<head>
태그 <head>는 페이지에 대한 메타 정보를 포함해. 이 정보는 웹 페이지에 직접 표시되지 않지만 브라우저와 검색 엔진에 중요해.
태그 <title>는 페이지 제목을 설정해. 이 제목은 브라우저 탭에 표시되고, 사용자가 페이지를 열 때 가장 먼저 보게 돼.
<body>
태그 <body>는 웹 페이지의 모든 가시적 콘텐츠를 포함해: 텍스트, 이미지, 링크, 테이블 등등. 사용자가 화면에서 보는 모든 것이 이 태그 안에 들어 있어.
<h1>안녕, 세상!</h1>
태그 <h1>는 첫 번째 레벨 헤더야. 페이지에서 가장 중요한 헤더에 사용돼. 이 태그 안에 있는 텍스트는 큼직하고 굵은 글씨로 표시돼.
<p>이것은 나의 첫 번째 웹 페이지야.</p>
태그 <p>는 텍스트 단락을 나타내. 텍스트를 논리적인 블록으로 나눌 때 사용하지. 이 태그 안의 텍스트는 일반 단락 형식으로 표시돼.
GO TO FULL VERSION