웹페이지를 구역으로 나누기

긴 페이지도 구역을 나누면 쉬워집니다

지금까지 우리는 제목, 문단, 링크, 이미지, 목록, 표를 배웠습니다. 이제 이 조각들을 한 페이지 안에 차곡차곡 넣을 수 있습니다.

그런데 내용이 많아지면 문제가 생깁니다.

처음에는 이런 식으로 써도 괜찮아 보입니다.

<h1>김하늘의 소개 페이지</h1>
<p>안녕하세요. 작은 카페를 운영하며 글을 씁니다.</p>
<h2>하는 일</h2>
<p>동네 카페 운영, 글쓰기 모임 진행, 원두 판매를 합니다.</p>
<h2>연락처</h2>
<p>[email protected]</p>

짧을 때는 읽을 만합니다. 하지만 여기에 메뉴, 사진, 공지, 일정표, 연락처, 하단 안내가 더해지면 어디가 시작이고 어디가 끝인지 헷갈립니다.

이럴 때 HTML에서는 페이지를 의미 있는 구역으로 나눕니다. 집으로 비유하면 현관, 거실, 방, 부엌, 창고를 구분하는 일과 비슷합니다. 모든 물건을 한 방에 쌓아 두는 대신, 성격에 맞는 공간에 넣는 것입니다.

HTML도 마찬가지입니다. 머리말은 header, 메뉴는 nav, 주요 내용은 main, 작은 주제 묶음은 section, 독립된 글은 article, 덧붙이는 정보는 aside, 마지막 안내는 footer에 담을 수 있습니다.

AI 생성 이미지

대표 구역 태그 한눈에 보기

먼저 각 태그가 어떤 역할을 하는지 가볍게 살펴보겠습니다.

<header>페이지의 머리말</header>
<nav>주요 이동 메뉴</nav>
<main>페이지의 핵심 내용</main>
<section>하나의 주제로 묶은 구역</section>
<article>독립적으로 읽을 수 있는 글</article>
<aside>덧붙이는 정보</aside>
<footer>페이지의 꼬리말</footer>

각 태그는 화면을 자동으로 예쁘게 꾸미기 위한 태그가 아닙니다. 핵심은 이 안에 어떤 성격의 내용이 들어 있는지 알려 주는 것입니다.

header는 페이지나 구역의 시작 부분에 어울립니다. 보통 사이트 이름, 소개 문장, 대표 이미지, 간단한 안내가 들어갑니다.

nav는 navigation의 줄임말입니다. 페이지 안이나 사이트 안에서 이동할 수 있는 링크 묶음을 담습니다. 예를 들어 "소개", "하는 일", "연락처"로 이동하는 메뉴가 있다면 nav에 넣으면 좋습니다.

main은 페이지에서 가장 중요한 본문 영역입니다. 한 페이지에서 핵심 내용은 보통 하나이므로 main도 보통 한 번만 사용합니다. 쇼핑몰 상품 페이지라면 상품 설명이 main에 들어가고, 개인 소개 페이지라면 자기소개와 주요 활동이 main에 들어갑니다.

section은 하나의 주제로 묶을 수 있는 구역입니다. "소개", "서비스", "운영 시간", "자주 묻는 질문"처럼 제목을 붙일 수 있는 덩어리에 잘 어울립니다. section을 쓸 때는 보통 그 안에 h2나 h3 같은 제목이 함께 들어가면 읽기 좋습니다.

article은 그 부분만 따로 떼어 놓아도 하나의 글로 읽을 수 있을 때 사용합니다. 블로그 글, 뉴스 기사, 후기, 공지 글, 카드형 게시물 하나가 여기에 어울립니다.

aside는 본문 옆에 덧붙이는 정보입니다. 꼭 화면의 오른쪽에 보여야 한다는 뜻은 아닙니다. 관련 링크, 짧은 프로필, 광고, 참고 안내처럼 핵심 본문은 아니지만 함께 보면 좋은 내용을 담습니다.

footer는 페이지나 구역의 끝부분입니다. 저작권 문구, 연락처, 주소, 운영자 정보, 하단 링크가 자주 들어갑니다.

div는 아무 의미 없는 상자입니다

구역을 나눌 때 자주 보게 되는 태그가 있습니다. 바로 div입니다.

<div>
  <h2>소개</h2>
  <p>저는 동네 카페를 운영합니다.</p>
</div>

div는 division의 줄임말입니다. 나누어진 덩어리라는 뜻입니다. 하지만 div 자체에는 특별한 의미가 없습니다.

비유하면 div는 이름이 적히지 않은 빈 상자입니다. 물건을 담을 수는 있지만, 상자 겉면만 보고는 안에 옷이 들었는지 책이 들었는지 알기 어렵습니다.

반면 header, main, section, footer 같은 태그는 이름이 붙은 상자입니다.

<section>
  <h2>소개</h2>
  <p>저는 동네 카페를 운영합니다.</p>
</section>

이 코드는 "아, 소개라는 하나의 구역이구나" 하고 읽기 쉽습니다.

그렇다고 div를 쓰면 안 된다는 뜻은 아닙니다. 나중에 CSS로 모양을 잡기 위해 특별한 의미 없이 묶어야 할 때 div는 유용합니다. 다만 처음부터 모든 것을 div로 감싸기보다, 먼저 이렇게 물어보면 좋습니다.

• 이 부분이 페이지의 머리말인가? → header

• 이동 메뉴인가? → nav

• 페이지의 핵심 본문인가? → main

• 제목이 있는 하나의 주제 묶음인가? → section

• 따로 떼어도 읽을 수 있는 글인가? → article

• 본문에 덧붙이는 정보인가? → aside

• 마지막 안내인가? → footer

• 그래도 딱 맞는 의미가 없는가? → div

이 순서로 생각하면 HTML이 훨씬 읽기 좋아집니다.

개인 소개 페이지를 구역으로 나누기

이제 간단한 개인 소개 페이지를 만들어 보겠습니다. 화면을 먼저 상상해 봅시다.

맨 위에는 이름과 짧은 소개가 있습니다. 그 아래에는 페이지 안에서 이동할 수 있는 메뉴가 있습니다. 가운데에는 자기소개와 하는 일이 들어갑니다. 옆이나 아래에는 연락 안내가 붙습니다. 맨 아래에는 이메일과 저작권 문구가 있습니다.

이 구조를 HTML로 쓰면 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>김하늘 소개 페이지</title>
</head>
<body>
  <header>
    <h1>김하늘</h1>
    <p>동네 카페를 운영하며 사람과 공간에 관한 글을 씁니다.</p>
  </header>

  <nav>
    <ul>
      <li><a href="#about">소개</a></li>
      <li><a href="#work">하는 일</a></li>
      <li><a href="#contact">연락처</a></li>
    </ul>
  </nav>

  <main>
    <section id="about">
      <h2>소개</h2>
      <p>안녕하세요. 저는 작은 카페를 운영하는 김하늘입니다.</p>
      <p>커피를 만들고, 동네 사람들과 읽고 쓰는 모임을 엽니다.</p>
    </section>

    <section id="work">
      <h2>하는 일</h2>
      <ul>
        <li>동네 카페 운영</li>
        <li>글쓰기 모임 진행</li>
        <li>원두와 드립백 판매</li>
      </ul>
    </section>

    <article>
      <h2>최근 소식</h2>
      <p>이번 달부터 매주 토요일 오전에 짧은 글쓰기 모임을 엽니다.</p>
      <p>처음 오시는 분도 편하게 참여할 수 있습니다.</p>
    </article>
  </main>

  <aside>
    <h2>작은 안내</h2>
    <p>카페 좌석이 많지 않아 모임은 미리 신청해 주세요.</p>
  </aside>

  <footer id="contact">
    <h2>연락처</h2>
    <p>이메일: [email protected]</p>
    <p>© 2026 김하늘</p>
  </footer>
</body>
</html>

코드가 조금 길어졌지만, 겁먹을 필요는 없습니다. 큰 덩어리만 보면 단순합니다.

<body>
  <header>맨 위 소개</header>
  <nav>이동 메뉴</nav>
  <main>핵심 내용</main>
  <aside>덧붙이는 안내</aside>
  <footer>마지막 연락처</footer>
</body>

이렇게 보면 페이지 전체가 차분하게 정리됩니다. 세부 내용은 각 구역 안에 들어 있을 뿐입니다.

section과 article은 어떻게 구분할까요?

section과 article은 처음에 조금 헷갈릴 수 있습니다. 둘 다 내용을 묶는 태그이기 때문입니다.

쉽게 구분해 보겠습니다.

section은 페이지 안에서 하나의 주제를 나누는 구역입니다.

<section id="about">
  <h2>소개</h2>
  <p>제가 어떤 사람인지 소개합니다.</p>
</section>

이 구역은 개인 소개 페이지 안에 있을 때 자연스럽습니다. 페이지의 일부로 읽힙니다.

article은 그 부분만 따로 떼어도 하나의 글처럼 읽을 수 있을 때 어울립니다.

<article>
  <h2>6월 글쓰기 모임 후기</h2>
  <p>지난 토요일, 다섯 명이 모여 각자의 일주일을 짧게 적었습니다.</p>
</article>

이 글은 블로그 목록에 따로 올라가도 이상하지 않습니다. 그래서 article에 잘 맞습니다.

간단히 말하면 이렇습니다.

• 페이지 안의 주제 구역이면 section

• 독립된 글 하나라면 article

완벽하게 구분하려고 오래 고민할 필요는 없습니다. 처음에는 "제목을 붙인 한 구역인가?", "이 부분만 따로 공유해도 자연스러운가?" 정도로 판단하면 충분합니다.

구역 이름이 좋으면 나중에 고치기 쉽습니다

HTML을 의미 있게 나누면 지금 읽기 쉬울 뿐 아니라 나중에도 편합니다.

예를 들어 누군가에게 이런 요청을 받았다고 해 봅시다.

"맨 아래 연락처 부분의 배경색만 바꿔 주세요."

HTML이 이렇게 되어 있다면 찾기 어렵습니다.

<div>
  <h2>연락처</h2>
  <p>[email protected]</p>
</div>

페이지 안에 div가 여러 개라면 어떤 div가 연락처인지 하나씩 확인해야 합니다.

하지만 이렇게 되어 있으면 훨씬 쉽습니다.

<footer id="contact">
  <h2>연락처</h2>
  <p>[email protected]</p>
</footer>

footer를 보면 페이지의 마지막 안내라는 것을 알 수 있습니다. id="contact"를 보면 연락처 구역이라는 것도 알 수 있습니다.

id는 구역에 붙이는 이름표입니다. 앞 장에서 페이지 안 이동 링크를 만들 때 사용했습니다. 여기서는 연락처 구역을 찾기 쉽게 만드는 역할도 합니다.

나중에 CSS를 배우면 이 이름표를 이용해 특정 구역만 꾸밀 수 있습니다. 예를 들어 연락처 구역의 배경색만 바꾸거나, 소개 구역의 글자 크기만 조정할 수 있습니다.

지금 당장 CSS를 몰라도 괜찮습니다. 중요한 것은 HTML을 쓸 때부터 구역을 분명히 나누어 두면, 나중에 꾸미고 고치는 일이 쉬워진다는 점입니다.

이번 장에서 기억할 것

웹페이지는 한 줄씩 길게 이어 붙이는 문서가 아닙니다. 내용의 성격에 따라 구역을 나누어 담는 문서입니다.

header에는 시작 안내를, nav에는 이동 메뉴를, main에는 핵심 내용을 담습니다. section은 하나의 주제 구역에, article은 독립된 글에, aside는 덧붙이는 정보에, footer는 마지막 안내에 어울립니다.

div는 의미 없는 상자입니다. 필요할 때 쓸 수 있지만, 먼저 더 의미 있는 태그가 있는지 살펴보는 습관이 좋습니다.

구역을 잘 나누면 긴 페이지도 복잡하지 않습니다. 코드를 처음 보는 사람도 "여기는 메뉴구나", "여기는 본문이구나", "여기는 연락처구나" 하고 따라올 수 있습니다. 이것이 좋은 HTML의 힘입니다.