웹 개발 기초집LESSON 03

콘텐츠에 구조와 계층 만들기

난이도입문

예상 시간25분

선수지식이전 강의

3강. 콘텐츠에 구조와 계층 만들기

이번 강의의 결과물은 제목, 문단, 목록만 읽어도 내용의 순서와 관계를 이해할 수 있는 포트폴리오 소개 문서입니다.

1. 이번 강의에서 해결할 문제

모든 글을 p 요소로 작성한 뒤 글자 크기만 바꾸면 사람 눈에는 제목처럼 보일 수 있습니다. 그러나 브라우저와 보조 기술은 그 글이 제목인지 일반 문장인지 알 수 없습니다.

이번 강의에서는 콘텐츠의 역할에 맞는 제목, 문단, 목록 요소를 사용해 문서의 정보 구조를 표현합니다.

학습 목표

이번 강의에서는 콘텐츠의 역할에 맞는 제목, 문단, 목록 요소를 사용해 문서의 정보 구조를 표현합니다.
핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

2. 핵심 개념

제목은 크기가 아니라 계층이다

HTML은 h1부터 h6까지 여섯 단계의 제목을 제공합니다.

h1: 페이지 또는 최상위 콘텐츠의 대표 제목
h2: h1 아래의 주요 주제
h3: 특정 h2 주제를 더 나눈 하위 주제

h1 개발 포트폴리오
├─ h2 소개
├─ h2 학습 중인 기술
└─ h2 관심 분야
   ├─ h3 게임 개발
   └─ h3 웹 개발

제목 번호는 글자 크기를 고르는 값이 아닙니다. 콘텐츠의 포함 관계를 표현하는 단계입니다. 따라서 h1 다음에 모양이 마음에 든다는 이유로 h3을 바로 사용하면 구조를 이해하기 어려워집니다. 시각적인 크기는 나중에 CSS로 조정합니다.

HTML 표준은 h1을 최상위 제목, h2를 하위 제목, h3을 그보다 한 단계 아래 제목으로 정의합니다. 자세한 내용은 WHATWG 제목 요소 표준에서 확인할 수 있습니다.

문단과 목록

p: 하나의 문단을 나타냅니다. 문단이 바뀌면 새로운 p를 사용합니다.
ul: 순서가 중요하지 않은 항목 묶음입니다. 기술 목록처럼 사용합니다.
ol: 순서나 단계가 중요한 항목 묶음입니다. 학습 계획처럼 사용합니다.
li: ul 또는 ol 안에 들어가는 각 목록 항목입니다.

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

목록 모양 때문에 ul과 ol을 고르는 것이 아니라 항목의 순서가 의미를 갖는지 판단해야 합니다. 문단과 목록의 정확한 구조는 WHATWG 그룹 콘텐츠 표준에서 정의합니다.

3. 코드 예시

파일 위치:

D:\WebProject\StartBook\dev-foundations\web-basics\portfolio\index.html

2강의 body 내용을 확장한 전체 파일입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 개발 포트폴리오</title>
  </head>
  <body>
    <h1>게임과 웹을 공부하는 개발자</h1>
    <p>Unreal C++과 웹 개발 학습 과정을 기록합니다.</p>

    <h2>소개</h2>
    <p>AI정보공학을 전공하며 게임과 웹에서 동작하는 서비스를 공부하고 있습니다.</p>

    <h2>학습 중인 기술</h2>
    <ul>
      <li>Unreal Engine과 C++</li>
      <li>HTML, CSS, JavaScript</li>
      <li>Git과 HTTP</li>
    </ul>

    <h2>학습 목표</h2>
    <ol>
      <li>웹페이지의 구조를 의미에 맞게 작성하기</li>
      <li>반응형 화면과 상호작용 구현하기</li>
      <li>완성한 프로젝트를 포트폴리오로 공개하기</li>
    </ol>

    <h2>관심 분야</h2>
    <h3>게임 개발</h3>
    <p>플레이어의 행동과 게임 상태가 연결되는 시스템에 관심이 있습니다.</p>

    <h3>웹 개발</h3>
    <p>사용자가 여러 기기에서 편리하게 이용할 수 있는 웹을 만들고 싶습니다.</p>
  </body>
</html>

실행 위치:

D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

PowerShell 실행 명령:

cd D:\WebProject\StartBook\dev-foundations\web-basics\portfolio
python -m http.server 5500

브라우저 주소:

http://localhost:5500/

4. 코드가 동작하는 이유

h1이 이 페이지 전체의 대표 주제를 설명합니다.
각 h2는 소개, 기술, 목표, 관심 분야라는 같은 단계의 주요 주제를 시작합니다.
게임 개발과 웹 개발은 관심 분야 안에 포함되므로 h3을 사용합니다.
소개와 설명은 독립된 문장이므로 각각 p 문단으로 작성합니다.
학습 기술은 순서를 바꿔도 의미가 유지되므로 ul을 사용합니다.
학습 목표는 진행 순서가 있으므로 ol을 사용합니다.

이 구조는 화면의 기본 모양뿐 아니라 문서의 의미도 전달합니다. 브라우저와 보조 기술은 제목을 이용해 콘텐츠 위치를 탐색할 수 있습니다. W3C WAI도 제목 단계를 중첩 관계에 맞게 사용하고 가능한 한 단계를 건너뛰지 않도록 안내합니다. 자세한 내용은 W3C WAI 제목 구조 안내에서 확인할 수 있습니다.

HTML 표준은 한 문서에 여러 최상위 제목이 존재하는 구조도 허용합니다. 다만 이번 단일 페이지 포트폴리오에는 방문자가 대표 주제를 바로 파악할 수 있도록 하나의 명확한 h1을 사용합니다.

5. 자주 하는 실수

글자 크기를 고르기 위해 제목 단계를 선택함: 의미에 맞는 제목을 선택하고 크기는 CSS에서 바꿉니다.
h1 다음에 바로 h3을 사용함: 중간 단계인 h2에 해당하는 주제가 빠진 것은 아닌지 확인합니다.
줄을 바꾸려고 문단 안에 br을 계속 추가함: 내용상 문단이 달라지면 별도의 p를 사용합니다.
li를 목록 밖에 작성함: li는 ul 또는 ol의 자식으로 작성합니다.
목록 전체를 p로 감쌈: p 안에는 ul이나 ol 같은 목록 요소를 넣을 수 없습니다.

6. 짧은 실습 과제

코드 예시를 참고해 자신의 실제 정보로 body 내용을 작성합니다.
페이지를 대표하는 h1을 하나 정합니다.
서로 같은 단계인 주요 주제를 h2로 세 개 이상 작성합니다.
h2 중 하나를 두 개 이상의 h3 하위 주제로 나눕니다.
순서가 중요하지 않은 기술 목록은 ul, 순서가 중요한 학습 계획은 ol로 작성합니다.
제목만 위에서 아래로 읽어도 다음과 같은 계층이 보이는지 직접 적어 확인합니다.

h1: 
├─ h2: 
├─ h2: 
└─ h2: 
   ├─ h3: 
   └─ h3: 

완료 기준은 콘텐츠의 종류가 바뀔 때 적절한 요소를 사용하고, 제목 번호만 읽어도 각 내용의 상하 관계를 설명할 수 있는 것입니다.

7. 이해 점검 질문 3개

제목의 글자 크기를 작게 만들고 싶을 때 h2 대신 h4를 사용하면 안 되는 이유는 무엇인가요?
기술 목록에는 ul, 설치 순서에는 ol이 더 적합한 이유는 무엇인가요?
h2인 “관심 분야” 아래의 “게임 개발”과 “웹 개발”에 h3을 사용하는 이유는 무엇인가요?

핵심 요약

이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.

MINI QUIZ