크롤링을 위한 HTML 기초
웹 페이지의 골격을 정의하는HTML(HyperText Markup Language)
은 웹 페이지를 구성하기 위한 마크업 언어입니다.
마크업 언어는 문서의 구조와 콘텐츠를 정의하는 언어를 뜻합니다.
HTML 기본 구조
HTML 문서는 꺾쇠 괄호(< >
)로 둘러싸인 태그(Tag)들로 이루어져 있습니다.
태그는 시작 태그(<tag>
)와 종료 태그(</tag>
)로 이루어져 있으며, 시작 태그와 종료 태그 사이에 컨텐츠가 위치합니다.
예를 들어 <h1>
태그는 제목을 나타내며, </h1>
와 같이 /
를 사용하여 태그를 닫습니다.
태그와 컨텐츠로 구성된 HTML 문서의 단위를 요소(Element)라고 합니다.
예를 들어 <h1>제목</h1>
는 <h1>
태그로 감싸인 "제목"이라는 컨텐츠를 포함하는 요소입니다.
기본적인 HTML 문서 구조는 다음과 같습니다.
<!DOCTYPE html>
<html>
<!-- 문서의 메타데이터를 포함하는 영역 -->
<head>
<title>페이지 제목</title>
</head>
<!-- 웹 페이지의 본문 내용을 포함하는 영역 -->
<body>
<h1>제목 요소</h1>
<p>단락 요소</p>
</body>
</html>
-
<!DOCTYPE html>
: HTML 문서의 버전을 정의합니다. HTML5 문서임을 나타냅니다 -
<html>
: HTML 문서의 최상위(root) 요소로, 모든 HTML 요소를 포함합니다. -
<head>
: 문서의 메타데이터(제목, 설명, 스타일 등)를 포함합니다. -
<title>
: 브라우저 탭에 표시되는 페이지 제목을 정의합니다. -
<body>
: 웹 페이지의 본문 내용을 포함합니다. -
<h1>
,<p>
등: 다양한 HTML 요소들로, 제목, 단락 등의 컨텐츠를 나타냅 니다.
주요 HTML 태그
HTML에는 다양한 종류의 태그가 있으며, 각 태그는 특정한 종류의 컨텐츠를 나타냅니다:
-
<h1>
에서<h6>
: 제목을 나타내는 태그들로,<h1>
이 가장 큰 제목을 나타냅니다. -
<p>
: 단락(Paragraph)을 나타내는 태그입니다. -
<a>
: 하이퍼링크(다른 웹 페이지로 이동하는 링크)를 만드는 태그입니다. -
<img>
: 이미지를 삽입하는 태그입니다. -
<ul>
,<ol>
,<li>
: 순서가 없는 또는 순서가 있는 목록을 만드는 태그들입니다.
HTML에 대한 더 자세한 내용은 HTML 입문 강의에서 확인할 수 있습니다.
실습
코드의 별표로 강조된 부분을 따라 입력해 보세요.