레슨4 : 레이아웃 기본(시멘틱 태그)

왜 시멘틱 태그를 쓸까?

    의미가 있는 구조는 SEO/접근성/협업에 모두 유리합니다.

 

 

핵심 태그 한눈에

• <header>: 상단 영역(로고/제목/보조 메뉴)
• <nav>: 내비게이션 링크 묶음
• <main>: 페이지의 핵심 콘텐츠(문서당 1개)
• <article>: 독립 배포 가능한 글/카드/포스트
• <section>: 관련 내용을 의미로 묶는 구획(제목 필요)
• <aside>: 보조 정보(프로필/광고/추천글)
• <footer>: 하단 정보(저작권/연락처)

 

미니 레이아웃 예시

<header>
  <h1>블로그 제목</h1>
</header>

<nav aria-label="주요 메뉴">
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">강좌</a></li>
    <li><a href="#">예제</a></li>
  </ul>
</nav>

<main>
  <article>
    <h2>포스트 제목</h2>
    <p>본문 내용...</p>
    <section>
      <h3>하위 섹션</h3>
      <p>관련 내용...</p>
    </section>
  </article>

  <aside aria-label="보조 정보">
    <h2>사이드바</h2>
    <p>프로필/인기글/광고 등</p>
  </aside>
</main>

<footer>
  <small>© 2025 Haon</small>
</footer>

 

 

접근성 팁(바로 적용)

• <main>은 페이지에 1개만 사용
• 메뉴는 <nav aria-label="주요 메뉴">처럼 라벨 달기
• 키보드 유저를 위해 “본문으로 건너뛰기” 링크 추가 권장

<a href="#content" style="position:absolute;left:-9999px">본문으로 건너뛰기</a>
<main id="content">...</main>

 

 

3분 실습

1. 현재 글의 상단을 header로 감싸고, 메뉴 묶음은 nav로 변경.
2. 본문 핵심 영역을 main으로 감싸기(문서당 1개).
3. 사이드 정보(프로필/링크 모음)는 aside로 분리.

체크리스트

• main이 1개만 있는가?
• 의미대로 article과 section을 구분했는가?
• 메뉴 묶음이 nav로 되어 있는가?
• 보조 정보가 aside에 들어갔는가?
• 푸터에 저작권/연락처 등 필수 정보가 있는가?

 

ⓒ Haon.ai. 무단 복제·배포·변형 금지. [저작권/이용 안내]