HTML Reference

Layout 태그 완전 정리

HTML의 레이아웃 관련 태그들을 코드 예시와 시각적 프리뷰로 한눈에 정리

① 시맨틱 구조 태그 — 의미 있는 레이아웃
<header> 시맨틱 블록

페이지 또는 섹션의 머리말 영역. 로고, 제목, 내비게이션을 담습니다.

💡 SEO: 검색엔진이 페이지 상단 핵심 정보로 인식합니다.
<header>
  <h1>사이트 제목</h1>
  <nav>...</nav>
</header>
Preview
📌 <header> — 로고 / 제목 / 내비게이션
<nav> 시맨틱 블록

사이트 내비게이션 링크 묶음. 주요 메뉴, 페이지 이동 링크를 담습니다.

💡 접근성: 스크린리더가 "탐색" 영역으로 인식합니다.
<nav>
  <a href="/">홈</a>
  <a href="/about">소개</a>
</nav>
Preview
🔗 <nav> — 홈   소개   연락처
<main> 시맨틱 블록

페이지의 핵심 본문 영역. 페이지 전체에서 딱 한 번만 사용합니다.

💡 규칙: <main>은 페이지당 1개만! header·footer·nav 안에 넣으면 안 됩니다.
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<section> 시맨틱 블록

주제별로 묶인 독립적인 구역. 보통 제목(h2~h6)과 함께 사용합니다.

💡 차이: <div>는 의미 없는 묶음 / <section>은 주제가 있는 묶음
<section>
  <h2>수업 정보</h2>
  <p>내용...</p>
</section>
<article> 시맨틱 블록

그것만 따로 떼어내도 독립적으로 의미가 통하는 콘텐츠. 블로그 글, 뉴스 기사, 카드 등에 사용합니다.

💡 기준: "이 내용만 RSS로 발행해도 말이 되나?" → Yes면 <article>
<article>
  <h2>블로그 제목</h2>
  <p>본문 내용...</p>
</article>
<aside> 시맨틱 블록

본문과 간접적으로 관련된 부가 내용. 사이드바, 광고, 관련 링크 등에 사용합니다.

<aside>
  <h3>관련 글</h3>
  <ul>...</ul>
</aside>
<footer> 시맨틱 블록

페이지 또는 섹션의 꼬리말 영역. 저작권, 연락처, 하단 링크를 담습니다.

<footer>
  <p>© 2026 이상경의 웹프로그래밍</p>
</footer>
② 블록 레이아웃 태그 — 줄 전체를 차지
<div> 블록

의미 없는 범용 컨테이너. CSS 적용, 레이아웃 묶음용으로 가장 많이 씁니다.

💡 팁: 시맨틱 태그로 대체 가능하면 <div> 대신 시맨틱 태그를 쓰는 게 좋습니다.
<div class="container">
  <div class="card">카드 내용</div>
</div>
Preview — 블록은 줄 전체 차지
div.container
div.card — 카드 1
div.card — 카드 2
<p> 블록 시맨틱

문단(paragraph). 텍스트 한 덩어리를 표현할 때 씁니다. 위아래 여백이 자동으로 생깁니다.

<p>첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.</p>
<h1> ~ <h6> 블록 시맨틱

제목 태그. h1이 가장 크고 중요, h6이 가장 작습니다. SEO에서 h1은 페이지당 1개 권장.

💡 SEO: h1 → h2 → h3 순서를 건너뛰지 말고 계층적으로 사용하세요.
<h1>페이지 대제목 (1개만)</h1>
<h2>섹션 제목</h2>
<h3>소제목</h3>
Preview
h1 — 페이지 대제목
h2 — 섹션 제목
h3 — 소제목
h4 ~ h6 — 더 작은 제목
<ul> <ol> <li> 블록 시맨틱

목록 태그. ul = 순서 없는 목록(●), ol = 순서 있는 목록(1,2,3), li = 각 항목.

<ul>  <!-- 순서 없음 -->
  <li>HTML</li>
  <li>CSS</li>
</ul>

<ol>  <!-- 순서 있음 -->
  <li>1단계</li>
  <li>2단계</li>
</ol>
③ Flexbox 레이아웃
display: flex 레이아웃

1차원 레이아웃. 가로 또는 세로 한 방향으로 아이템을 정렬합니다. 내비게이션, 카드 행, 중앙 정렬에 최적.

<div style="display:flex; gap:12px; align-items:center;">
  <div>아이템 1</div>
  <div>아이템 2</div>
  <div>아이템 3</div>
</div>
Preview — 가로 한 줄 정렬
아이템 1
아이템 2
아이템 3
주요 속성
flex-direction: row(가로) | column(세로)
justify-content: center | space-between | flex-start
align-items: center | stretch | flex-start
flex-wrap: wrap (줄바꿈 허용)
④ Grid 레이아웃
display: grid 레이아웃

2차원 레이아웃. 가로·세로를 동시에 제어합니다. 카드 그리드, 대시보드, 복잡한 페이지 구조에 최적.

<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:12px;">
  <div>카드 1</div>
  <div>카드 2</div>
  <div>카드 3</div>
</div>
Preview — 3열 그리드
카드 1
카드 2
카드 3
카드 4
카드 5
카드 6
주요 속성
grid-template-columns: repeat(3, 1fr) — 3등분
grid-template-columns: repeat(auto-fit, minmax(200px,1fr)) — 반응형
grid-column: 1 / 3 — 셀 병합(가로)
grid-row: 1 / 3 — 셀 병합(세로)
⑤ Table 태그 — 표 형태 데이터
<table> 블록 시맨틱

표 형태의 데이터를 표시합니다. thead(머리행), tbody(본문), tr(행), th(제목셀), td(데이터셀)로 구성.

⚠️ 주의: 레이아웃용으로 table을 쓰는 건 구식입니다. 데이터 표시에만 사용하세요.
<table>
  <thead>
    <tr>
      <th>이름</th>  <th>과목</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>이상경</td>  <td>웹 3D</td>
    </tr>
  </tbody>
</table>
Preview
이름과목강의실
이상경웹 3D405호
이상경AI 웹호스팅407호
⑥ 인라인 태그 — 줄 안에서 차지
<span> 인라인

의미 없는 범용 인라인 컨테이너. 텍스트 일부에 색상·폰트 등 CSS를 적용할 때 씁니다.

<p>안녕하세요, 
  <span style="color:hotpink">이상경</span>
입니다.</p>
Preview — 인라인은 줄 안에 위치
안녕하세요, 이상경 입니다. — span은 줄을 바꾸지 않습니다.
<a> 인라인 시맨틱

하이퍼링크. href로 이동 주소, target으로 탭 설정.

<a href="https://lskvr.github.io"
   target="_blank"
   rel="noopener noreferrer">
  내 홈페이지
</a>
<img> 인라인

이미지 삽입. alt는 접근성+SEO 필수. loading="lazy"로 성능 최적화.

<img
  src="img/여주대.png"
  alt="여주대학교 캠퍼스 전경"
  width="900"
  height="500"
  loading="lazy"
>
⑦ Form 태그 — 입력 레이아웃
<form> <input> <label> 블록/인라인 시맨틱

입력 양식. form은 입력 묶음, label은 설명, input은 실제 입력창.

<form action="/submit" method="post">

  <label for="name">이름</label>
  <input type="text" id="name" name="name">

  <label for="email">이메일</label>
  <input type="email" id="email">

  <button type="submit">제출</button>

</form>
⑧ 미디어 & 기타 태그
<video> <audio> 블록

영상/음성 삽입. controls 속성으로 재생 컨트롤 표시.

<video src="movie.mp4" controls width="640"></video>

<audio src="music.mp3" controls></audio>
<iframe> 블록

외부 페이지/지도/유튜브 삽입. 페이지 안에 다른 HTML 문서를 넣습니다.

<iframe
  src="https://www.youtube.com/embed/영상ID"
  width="560"
  height="315"
  allowfullscreen
></iframe>
<canvas> 블록

그래픽 드로잉 영역. JavaScript로 2D/3D 그래픽을 그립니다. Three.js도 canvas를 사용합니다.

<canvas id="three-canvas"
        width="800"
        height="600">
</canvas>
<br> <hr> 인라인/블록

줄바꿈/수평선. br = 텍스트 강제 줄바꿈, hr = 주제 구분선(수평선).

<p>첫 줄<br>두 번째 줄</p>

<hr>  <!-- 구분선 -->
⑨ 한눈에 보는 비교표
태그 타입 주요 용도 SEO/접근성
<header>블록·시맨틱페이지 상단 머리말⭐⭐⭐
<nav>블록·시맨틱내비게이션 메뉴⭐⭐⭐
<main>블록·시맨틱핵심 본문 (1개만)⭐⭐⭐
<section>블록·시맨틱주제별 구역⭐⭐⭐
<article>블록·시맨틱독립 콘텐츠 단위⭐⭐⭐
<aside>블록·시맨틱사이드바/부가정보⭐⭐
<footer>블록·시맨틱페이지 하단 꼬리말⭐⭐
<div>블록범용 컨테이너—
<span>인라인텍스트 부분 스타일—
<h1>~<h6>블록·시맨틱제목 계층⭐⭐⭐
<p>블록·시맨틱문단 텍스트⭐⭐
display:flexCSS 레이아웃1차원 정렬—
display:gridCSS 레이아웃2차원 격자—
<table>블록·시맨틱표 형태 데이터⭐⭐