소개
이 랩에서는 학생들이 HTML 제목 태그를 탐구하고 다양한 제목 레벨을 사용하여 구조화된 웹 페이지 콘텐츠를 만드는 방법을 배웁니다. 이 랩은 참가자들이 기본 HTML 문서를 만들고 <h1>부터 <h6>까지의 제목 태그 계층 구조를 이해하도록 안내하며, 이러한 태그가 다양한 중요도 수준으로 텍스트를 구성하고 표시하는 방법을 보여줍니다.
참가자들은 기본적인 HTML 구조를 설정하는 것으로 시작하여 제목 태그를 점진적으로 추가하여 시각적 및 의미적 차이점을 이해하게 됩니다. 랩이 끝나면 학생들은 제목 태그를 효과적으로 사용하는 실질적인 기술을 습득하고, 웹 페이지 디자인에서 제목 태그의 역할을 이해하며, 브라우저가 명확하고 조직적인 콘텐츠 프레젠테이션을 만들기 위해 다양한 제목 크기를 렌더링하는 방법을 배우게 됩니다.
기본 HTML 문서 생성
이 단계에서는 제목 태그를 이해하기 위한 기반 역할을 하는 기본 HTML 문서를 만드는 방법을 배웁니다.
먼저 WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 index.html이라는 새 파일을 만듭니다.
다음은 여러분이 만들 기본 HTML 문서 구조입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First HTML Page</title>
</head>
<body>
<!-- Your content will go here -->
</body>
</html>
주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 이것이 HTML5 문서임을 선언합니다.<html>은 HTML 페이지의 루트 요소입니다.<head>는 문서에 대한 메타 정보를 포함합니다.<body>는 보이는 페이지 콘텐츠를 포함합니다.
브라우저에서 이 파일을 볼 때의 예시 출력:
[An empty white page with no visible content]
이제 WebIDE 에서 파일을 저장합니다. 파일 탐색기를 확인하거나 터미널을 사용하여 파일이 생성되었는지 확인할 수 있습니다.
H1 부터 H6 까지 제목 태그 탐색
이 단계에서는 웹 페이지의 콘텐츠 구조와 계층 구조를 정의하는 데 사용되는 HTML 제목 태그에 대해 배웁니다. HTML 은 <h1>부터 <h6>까지 6 개의 제목 레벨을 제공하며, <h1>이 가장 중요하고 <h6>가 가장 중요하지 않습니다.
이전 단계에서 만든 index.html 파일을 엽니다. <body> 섹션을 업데이트하여 다양한 제목 태그를 포함합니다.
<body>
<h1>Main Heading (Largest)</h1>
<h2>Subheading Level 2</h2>
<h3>Subheading Level 3</h3>
<h4>Subheading Level 4</h4>
<h5>Subheading Level 5</h5>
<h6>Subheading Level 6 (Smallest)</h6>
</body>
제목 태그에 대한 주요 사항:
<h1>은 일반적으로 메인 페이지 제목 또는 가장 중요한 제목에 사용됩니다.- 제목은 계층적 순서로 사용해야 합니다.
- 각 제목 레벨은 문서 구조에서 서로 다른 중요도 레벨을 나타냅니다.
브라우저에서 볼 때의 예시 출력:
WebIDE 에서 파일을 저장합니다. 웹 브라우저에서 파일을 열어 다양한 제목 태그가 어떻게 보이는지 확인할 수 있습니다.
다양한 제목 크기 비교
이 단계에서는 다양한 제목 태그가 시각적으로 크기에서 어떻게 다른지, 그리고 문서의 시각적 계층 구조에 어떤 영향을 미치는지 살펴봅니다. index.html 파일을 열고 내용을 수정하여 크기 차이를 더 명확하게 보여줍니다.
<body> 섹션을 더 자세한 예시로 업데이트합니다.
<body>
<h1>Welcome to HTML Heading Exploration</h1>
<p>Notice how heading sizes change from h1 to h6:</p>
<h1>Heading 1 - Largest and Most Important</h1>
<p>This is an h1 heading, typically used for main titles.</p>
<h2>Heading 2 - Section Title</h2>
<p>H2 is used for major sections within the document.</p>
<h3>Heading 3 - Subsection Title</h3>
<p>H3 represents subsections or smaller divisions.</p>
<h4>Heading 4 - Minor Heading</h4>
<p>H4 is used for less significant headings.</p>
<h5>Heading 5 - Very Small Heading</h5>
<p>H5 is rarely used but available for additional hierarchy.</p>
<h6>Heading 6 - Smallest Heading</h6>
<p>H6 is the least prominent heading tag.</p>
</body>
주요 관찰 사항:
- 각 제목 태그 (
<h1>부터<h6>) 는 점진적으로 더 작은 기본 크기를 갖습니다. - 시각적 계층 구조는 독자가 콘텐츠 구조를 이해하는 데 도움이 됩니다.
- 브라우저 기본 스타일은 자동으로 제목 크기를 조정합니다.
브라우저에서 볼 때의 예시 출력:
WebIDE 에서 파일을 저장하고 웹 브라우저에서 열어 크기 차이를 확인합니다.
제목 태그 제한 테스트
이 단계에서는 HTML 제목 태그를 사용할 때 몇 가지 중요한 제한 사항과 모범 사례를 살펴봅니다. 이러한 제약 조건을 이해하면 더 의미론적으로 정확하고 접근 가능한 웹 페이지를 만들 수 있습니다.
제목 태그 제한 사항을 보여주기 위해 index.html 파일을 다음 내용으로 업데이트합니다.
<body>
<h1>Main Page Title</h1>
<h2>Incorrect Heading Hierarchy Example</h2>
<!-- Demonstrating improper heading nesting -->
<h3>Subsection</h3>
<h5>This is not recommended!</h5>
<!-- Excessive heading usage -->
<h1>Another Main Heading</h1>
<!-- Mixing headings without logical structure -->
<h6>Very Small Heading</h6>
<h2>Back to a Larger Heading</h2>
<p>Key Limitations to Remember:</p>
<ul>
<li>Avoid skipping heading levels</li>
<li>Use only one <h1> per page</li>
<li>Maintain a logical heading hierarchy</li>
</ul>
</body>
중요한 제목 태그 제한 사항:
- 제목 레벨을 건너뛰지 마십시오 (예: h1 에서 h4 로 바로 이동).
- 메인 제목에 대해 페이지당 하나의
<h1>태그만 사용하십시오. - 논리적이고 일관된 제목 구조를 유지하십시오.
- 제목은 콘텐츠의 중요성을 반영해야 합니다.
- 부적절한 사용은 SEO 및 접근성에 부정적인 영향을 미칠 수 있습니다.
브라우저에서 볼 때의 예시 출력:
WebIDE 에서 파일을 저장하고 일관성 없는 제목 사용이 어떻게 혼란스러워 보이는지 확인하십시오.
요약
이 랩에서는 참가자들이 기본적인 HTML 문서를 만들고 <h1>부터 <h6>까지 6 가지 서로 다른 제목 레벨을 탐색하여 HTML 제목 태그의 기본 사항을 배웠습니다. 이 랩은 학습자가 표준 HTML 구조를 구성하고, 제목 태그의 목적과 계층 구조를 이해하며, 이러한 태그가 웹 페이지 콘텐츠를 구성하고 구조화하는 데 어떻게 사용되는지 보여주는 과정을 안내했습니다.
실습에서는 완전한 HTML 템플릿을 사용하여 index.html 파일을 만들고, 다양한 제목 태그를 삽입하여 시각적 및 의미적 차이점을 보여주고, 제목이 전반적인 문서 구조와 가독성에 어떻게 기여하는지 이해하는 과정이 포함되었습니다. 참가자들은 <h1>이 가장 중요한 제목을 나타내고 <h6>가 가장 덜 중요한 제목을 나타내는 방식으로 제목 태그를 사용하여 콘텐츠 계층 구조를 설정하는 실질적인 경험을 얻었습니다.
