HTML 개념노트 19편

HTML 실전 레이아웃 구조 만들기

지금까지 배운 HTML 태그들을 조합하면 실제 웹페이지의 기본 구조를 만들 수 있습니다. 이번 글에서는 header, nav, main, section, article, aside, footer를 활용해서 실전형 웹페이지 뼈대를 구성해 보겠습니다.

1. 레이아웃이란?

레이아웃은 웹페이지의 요소들이 화면에 배치되는 구조를 의미합니다. 쉽게 말해 상단에는 무엇을 둘지, 본문은 어떻게 나눌지, 하단에는 어떤 정보를 넣을지 정하는 것입니다.

쉽게 말하면?

HTML 레이아웃은 웹페이지의 방 배치도입니다. header는 현관, nav는 길 안내판, main은 거실, aside는 보조 공간, footer는 하단 안내판처럼 생각하면 됩니다.

2. 기본 웹페이지 구조

가장 기본적인 웹페이지는 보통 아래와 같은 흐름으로 구성됩니다.

header - 사이트 로고, 제목, 상단 영역

nav - 메뉴, 카테고리, 이동 링크

main - 핵심 본문 영역

section - 주제별 구역

article - 독립적인 콘텐츠

aside - 관련 글, 보조 정보

footer - 저작권, 연락처, 하단 정보

3. 전체 HTML 문서 뼈대

실전 레이아웃을 만들 때도 HTML 문서의 기본 구조는 동일합니다. 먼저 <!DOCTYPE html>, <html>, <head>, <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>

  </body>
</html>

실제 화면에 보이는 내용은 대부분 <body> 안에 작성합니다.

4. header 만들기

<header>는 페이지 상단 영역입니다. 사이트 이름, 로고, 간단한 소개 문구, 로그인 버튼 등이 들어갈 수 있습니다.

<header>
  <h1>GWDEVELBlog</h1>
  <p>웹 개발 개념을 차근차근 정리하는 블로그입니다.</p>
</header>

header에 자주 들어가는 것

사이트 이름
로고
검색창
로그인, 회원가입 버튼
간단한 소개 문구

5. nav 만들기

<nav>는 사용자가 다른 페이지나 카테고리로 이동할 수 있게 해주는 메뉴 영역입니다. 보통 <ul>, <li>, <a> 태그를 함께 사용합니다.

<nav>
  <ul>
    <li><a href="index.html">홈</a></li>
    <li><a href="html.html">HTML</a></li>
    <li><a href="css.html">CSS</a></li>
    <li><a href="javascript.html">JavaScript</a></li>
  </ul>
</nav>

메뉴는 단순한 링크 모음처럼 보여도, 사이트 구조를 보여주는 중요한 영역입니다.

6. main 만들기

<main>은 페이지의 핵심 콘텐츠가 들어가는 영역입니다. 한 페이지에서 가장 중요한 본문 내용은 <main> 안에 배치합니다.

<main>
  <section>
    <h2>HTML 개념노트</h2>
    <p>HTML의 기본 태그와 문서 구조를 정리합니다.</p>
  </section>
</main>

주의하세요

<main>은 페이지의 핵심 본문 영역입니다. 일반적인 페이지에서는 핵심 main 영역을 하나로 생각하고 작성하는 것이 좋습니다.

7. section과 article 배치하기

<section>은 주제별 구역이고, <article>은 독립적으로 의미가 있는 콘텐츠입니다.

<main>
  <section>
    <h2>최신 글</h2>

    <article>
      <h3>HTML 기본 구조</h3>
      <p>HTML 문서의 기본 뼈대를 배워 봅니다.</p>
      <a href="post1.html">글 읽기</a>
    </article>

    <article>
      <h3>링크 태그 이해하기</h3>
      <p>a 태그로 페이지를 이동하는 방법을 배워 봅니다.</p>
      <a href="post2.html">글 읽기</a>
    </article>
  </section>
</main>

여기서 <section>은 “최신 글”이라는 구역이고, 각각의 <article>은 독립적인 글 카드입니다.

8. aside 만들기

<aside>는 본문 옆의 보조 정보 영역입니다. 관련 글, 인기 글, 프로필, 목차, 참고 링크 등을 넣을 수 있습니다.

<aside>
  <h2>관련 글</h2>
  <ul>
    <li><a href="html-basic.html">HTML 기본 구조</a></li>
    <li><a href="semantic.html">시맨틱 태그 정리</a></li>
    <li><a href="accessibility.html">접근성 기초</a></li>
  </ul>
</aside>

핵심 본문은 <main> 안에 두고, 보조 정보는 <aside>에 넣으면 구조가 더 명확해집니다.

9. footer 만들기

<footer>는 페이지 하단 영역입니다. 저작권 문구, 연락처, 관련 링크, 운영자 정보 등을 넣을 수 있습니다.

<footer>
  <p>© 2026 GWDEVELBlog. All rights reserved.</p>
  <p>문의: contact@example.com</p>
</footer>

footer에 자주 들어가는 것

저작권 문구
연락처
블로그 소개
이용약관, 개인정보처리방침
관련 링크

10. 실전 레이아웃 전체 코드

지금까지 배운 구조를 합치면 아래와 같은 기본 웹페이지 레이아웃을 만들 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GWDEVELBlog</title>
  </head>
  <body>

    <header>
      <h1>GWDEVELBlog</h1>
      <p>웹 개발 개념을 정리하는 블로그입니다.</p>
    </header>

    <nav>
      <ul>
        <li><a href="index.html">홈</a></li>
        <li><a href="html.html">HTML</a></li>
        <li><a href="css.html">CSS</a></li>
        <li><a href="javascript.html">JavaScript</a></li>
      </ul>
    </nav>

    <main>
      <section>
        <h2>최신 HTML 글</h2>

        <article>
          <h3>HTML 기본 구조</h3>
          <p>HTML 문서의 기본 뼈대를 정리합니다.</p>
          <a href="post1.html">글 읽기</a>
        </article>

        <article>
          <h3>시맨틱 태그</h3>
          <p>의미 있는 HTML 구조를 만드는 방법을 배웁니다.</p>
          <a href="post2.html">글 읽기</a>
        </article>
      </section>

      <aside>
        <h2>관련 글</h2>
        <ul>
          <li><a href="accessibility.html">접근성 기초</a></li>
          <li><a href="meta.html">meta 태그와 SEO</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>© 2026 GWDEVELBlog</p>
    </footer>

  </body>
</html>

11. 레이아웃 구조를 잡을 때 생각할 순서

HTML 레이아웃을 만들 때는 태그를 무작정 작성하기보다, 페이지를 어떤 영역으로 나눌지 먼저 생각하는 것이 좋습니다.

페이지의 상단 영역이 필요한지 확인합니다.
메뉴나 카테고리 이동이 필요한지 확인합니다.
본문의 핵심 콘텐츠가 무엇인지 정합니다.
본문을 주제별 section으로 나눌 수 있는지 확인합니다.
독립적인 글이나 카드가 있다면 article을 고려합니다.
관련 글이나 보조 정보가 있다면 aside를 고려합니다.
마지막으로 footer에 하단 정보를 넣습니다.

12. 초보자가 자주 하는 실수

실수 1. 모든 영역을 div로만 작성함

단순 배치용 박스는 <div>가 맞지만, 상단, 메뉴, 본문, 하단처럼 의미가 분명한 영역은 시맨틱 태그를 사용하는 것이 좋습니다.

실수 2. main 밖에 핵심 본문을 둠

페이지의 핵심 콘텐츠는 가능한 한 <main> 안에 배치하는 것이 좋습니다.

실수 3. section에 제목이 없음

<section>은 하나의 주제 구역이므로 <h2>, <h3> 같은 제목 태그와 함께 사용하는 것이 좋습니다.

실수 4. aside에 핵심 내용을 넣음

<aside>는 보조 정보 영역입니다. 본문의 핵심 내용은 <main> 안의 <section>이나 <article>에 두는 것이 자연스럽습니다.

13. 오늘의 핵심 정리

HTML 레이아웃은 웹페이지의 구조를 잡는 작업입니다.
<header>는 상단 영역입니다.
<nav>는 주요 메뉴 영역입니다.
<main>은 페이지의 핵심 본문 영역입니다.
<section>은 주제별 구역입니다.
<article>은 독립적인 콘텐츠입니다.
<aside>는 보조 정보 영역입니다.
<footer>는 하단 정보 영역입니다.
의미 있는 태그를 사용하면 코드 가독성, 접근성, 유지보수성이 좋아집니다.

14. 간단한 연습 문제

아래 조건에 맞게 블로그 메인 페이지 구조를 작성해 보세요.

문제

header에 블로그 이름 작성하기
nav에 홈, HTML, CSS 메뉴 작성하기
main 안에 최신 글 영역 만들기
최신 글 2개를 article로 작성하기
aside에 관련 글 목록 작성하기

정답 보기

<header>
  <h1>GWDEVELBlog</h1>
</header>

<nav>
  <ul>
    <li><a href="index.html">홈</a></li>
    <li><a href="html.html">HTML</a></li>
    <li><a href="css.html">CSS</a></li>
  </ul>
</nav>

<main>
  <section>
    <h2>최신 글</h2>

    <article>
      <h3>HTML 기본 구조</h3>
      <p>HTML 문서의 기본 구조를 정리합니다.</p>
    </article>

    <article>
      <h3>시맨틱 태그</h3>
      <p>의미 있는 HTML 태그를 정리합니다.</p>
    </article>
  </section>

  <aside>
    <h2>관련 글</h2>
    <ul>
      <li>meta 태그와 SEO</li>
      <li>접근성 기초</li>
    </ul>
  </aside>
</main>

<footer>
  <p>© 2026 GWDEVELBlog</p>
</footer>

다음 편 예고

다음 글에서는 HTML 시리즈의 마지막 편으로, 지금까지 배운 내용을 복습하고 간단한 미니 프로젝트를 만들어 보겠습니다.

GWDEVELBlog HTML 개념노트

'Computer Science > HTML' 카테고리의 다른 글

[HTML] 개념노트20편 전체 복습 + 미니 프로젝트 만들기 (0)	2026.06.12
[HTML] 개념노트 18편 접근성 기초 이해하기 (0)	2026.06.12
[HTML] 개념노트 17편 meta 태그와 SEO 기본 이해하기 (0)	2026.06.11
[HTML] 개념노트 16편 iframe, video, audio 태그 이해하기 (0)	2026.06.11
[HTML] 개념노트15편 HTML 엔티티 문자 이해하기 (0)	2026.06.11

[HTML] 개념노트 19편 HTML 실전 레이아웃 구조 만들기