소개
HTML 제목은 잘 구조화된 웹 페이지를 만드는 데 필수적입니다. 제목은 계층 구조를 제공하고 독자가 웹사이트를 빠르게 탐색하는 데 도움을 줍니다. 이 랩에서는 <h1>부터 <h6> 태그를 사용하여 다양한 수준의 HTML 제목을 만드는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 기본 구조 추가하기
첫 번째 단계는 index.html이라는 HTML 파일을 만드는 것입니다. 메모장 (Notepad), TextEdit 또는 Sublime Text 와 같은 모든 텍스트 편집기를 사용할 수 있습니다.
첫 번째 줄에 <!DOCTYPE html>을 입력하고 두 번째 줄과 마지막 줄에 각각 <html></html> 태그를 입력하여 index.html 파일에 기본 HTML 구조를 추가합니다.
<!doctype html>
<html>
<head></head>
<body></body>
</html>
Head 섹션 추가하기
<html> 태그 내에서 <head> 태그를 사용하여 head 섹션을 만듭니다. head 섹션 내에서 <title> 태그를 사용하여 웹 페이지의 제목을 추가합니다.
<!doctype html>
<html>
<head>
<title>My Web Page</title>
</head>
</html>
Body 섹션 생성하기
<body></body> 태그를 사용하여 body 섹션을 만듭니다. body 섹션 내에서 <h1>부터 <h6> 태그를 사용하여 다양한 수준의 제목을 추가합니다.
<!doctype html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>First Sub-Heading</h2>
<h3>Second Sub-Heading</h3>
<h4>Third Sub-Heading</h4>
<h5>Fourth Sub-Heading</h5>
<h6>Fifth Sub-Heading</h6>
</body>
</html>
"Main Heading" 및 하위 제목을 관련 제목으로 바꾸십시오.
태그를 사용하여 Heading 그룹화하기
<hgroup> 태그를 사용하여 여러 제목을 함께 그룹화할 수 있습니다. 아래 예제에서는 <hgroup>을 사용하여 마지막 세 개의 제목을 그룹화합니다.
<!doctype html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>First Sub-Heading</h2>
<h3>Second Sub-Heading</h3>
<h4>Third Sub-Heading</h4>
<hgroup>
<h4>Fourth Sub-Heading Part 1</h4>
<h5>Fourth Sub-Heading Part 2</h5>
<h6>Fourth Sub-Heading Part 3</h6>
</hgroup>
</body>
</html>
index.html 파일을 저장하고 웹 브라우저에서 열어 생성한 제목을 확인하십시오.
요약
이 랩에서는 <h1>부터 <h6> 태그를 사용하여 HTML 제목을 만드는 방법을 배웠습니다. 제목은 잘 구조화된 웹 페이지를 만드는 데 필수적이며, 검색 엔진 최적화 (SEO) 에도 도움이 됩니다. 각 HTML 파일에는 페이지의 주요 제목을 나타내는 <h1> 태그가 하나만 포함되어야 함을 기억하십시오.
