CHAP 9. HTML 📦시맨틱 구조 & 레이아웃 태그

📌 1️⃣ 핵심 태그 다시 정리 + 실무 관점 추가

태그	역할	시맨틱 의미	특징	실무 Best Practice 🚩
`<div>`	의미 없는 구역 나눔, 스타일/레이아웃 용	❌	의미 無, 순수 박스	최소 사용. 레이아웃/유틸리티 클래스 적용시만
`<section>`	논리적 구획화, 제목 포함	✅	주제별 챕터 구분	`h1~h6` 제목 반드시 포함! SEO, 스크린리더 최적화
`<article>`	독립적 콘텐츠 블록 (글, 뉴스, 리뷰 등)	✅	외부로 퍼가도 의미 OK	RSS, 공유되는 콘텐츠는 반드시 article로 감싸기
`<header>`	머리말, 내비게이션 포함	✅	전체/구획 내 둘 다 사용 가능	nav, h1~h6 필수 포함, 로고 위치 고정
`<footer>`	꼬리말, 저작권/연락처	✅	전체/구획 내 둘 다 사용 가능	SNS 링크, 사이트맵 자주 포함
`<main>`	주요 콘텐츠 (1개)	✅	페이지 핵심	문서당 1번만! 중복 사용 금지 (SEO/스크린리더 혼란 방지)
`<aside>`	보조 콘텐츠 (광고, 링크, 사이드바)	✅	관련 있지만 독립적	광고/추천글은 aside로 → 스크린리더도 구분 가능

🧩 2️⃣ 더 쉬운 비유로 확장

태그	비유 🌟
`<div>`	📦 그냥 빈 박스 → 레이아웃용 포장 상자
`<section>`	📚 책의 챕터, 목차 → 제목과 내용 하나 세트
`<article>`	📰 신문기사, 블로그 글 → 복사해가도 혼자 의미 완성
`<header>`	🏷️ 책 표지 + 목차 or 웹사이트 로고 + 메뉴바
`<footer>`	📄 책 맨 뒤의 저자, 연락처, 부록
`<main>`	🏠 집의 거실, 핵심 공간
`<aside>`	📢 거실 옆 광고판, 관련 정보 박스 (사이드바)

🏗️ 3️⃣ 심화: 기업 사이트 패턴 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>🚀 기업 홈페이지</title>
</head>
<body>

<header>
  <h1>🔥 Brand Logo</h1>
  <nav>
    <ul>
      <li><a href="#about">회사소개</a></li>
      <li><a href="#products">제품</a></li>
      <li><a href="#contact">연락처</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="about">
    <h2>📖 회사소개</h2>
    <p>우리는 최고의 제품을 만듭니다...</p>
  </section>

  <section id="products">
    <h2>🛠️ 제품 목록</h2>

    <article>
      <h3>🚗 전기차</h3>
      <p>친환경 전기차...</p>
    </article>

    <article>
      <h3>🏍️ 전기 스쿠터</h3>
      <p>도심형 친환경 이동 수단...</p>
    </article>
  </section>

  <aside>
    <h3>📢 프로모션</h3>
    <p>3월 한정 이벤트!</p>
  </aside>
</main>

<footer>
  <p>© 2025 Brand. All rights reserved.</p>
  <nav>
    <a href="#">이용약관</a> | <a href="#">개인정보처리방침</a>
  </nav>
</footer>

</body>
</html>

✅ 포인트:

section 내부에 반드시 제목(h2/h3 포함) → 검색엔진 구조 파악
article은 독립적인 제품 소개, section은 논리적 묶음
aside로 이벤트 배너, 관련 정보 따로 표시

🎯 4️⃣ 실무 & SEO 최적화 핵심 정리

요소	Best Practice
제목 구조 (`h1~h6`)	header → h1, section → h2/h3 일관성 있게 계층적
main 태그	1개만 사용! SEO/접근성 혼란 방지
ARIA Role 연계	`<header role="banner">`, `<nav role="navigation">`, `<main role="main">` 등으로 스크린리더 지원 강화
불필요한 div 남발 금지	div는 정말 시맨틱 태그로 대체 불가할 때만
aside 사용 시 명확한 제목 제공	“추천 기사”, “광고” 같은 명확한 의미 제공

🔥 5️⃣ ARIA + 시맨틱 태그 심화

태그	추천 ARIA role	설명
`<header>`	`banner`	사이트/페이지 상단 주요 헤더임을 명시
`<nav>`	`navigation`	내비게이션 영역 명확히
`<main>`	`main`	핵심 콘텐츠 강조
`<aside>`	`complementary`	보조 콘텐츠임을 명확히
`<footer>`	`contentinfo`	저작권 등 부가정보 구역

💡 Why?

스크린리더, 접근성 도구가 구조 파악 + 탐색 용이성↑ → 웹 접근성 점수 향상 (WCAG 기준 충족)

💡 6️⃣ 기술 면접 고급 예상 질문 & 답변 포인트

질문	심화 포인트
`<div>` 대신 시맨틱 태그를 써야 하는 이유는?	SEO & 접근성 강화, 스크린리더 구조 탐색 용이, 유지보수성 증가
`<section>`과 `<article>` 언제 구분해서 써야 하나요?	section = 논리적 구획, 제목 필수 / article = 독립적 콘텐츠, 외부로 퍼가도 완성
`<main>` 태그 여러 번 써도 되나요?	No. 한 문서당 1번만 → SEO & 접근성 혼란 방지
`<header>`와 `<footer>`는 여러 번 써도 되나요?	Yes. 전체 문서뿐 아니라 section/article 내부에서도 가능 → 구획별 머리말/꼬리말
ARIA role과 시맨틱 태그 어떻게 같이 쓰나요?	role 속성으로 스크린리더 지원 강화 가능 (ex: `<nav role="navigation">`)
aside와 nav의 차이?	aside는 보조 콘텐츠, nav는 페이지 이동 내비게이션

💼 7️⃣ 실무 Best Practice 심화

포인트	이유 & 설명
시맨틱 태그로 구조 명확화 → SEO 최적화	구글/스크린리더가 페이지 의미 쉽게 파악
ARIA Role 활용 → 접근성 향상	WCAG 준수, 공공기관 필수
header → nav 포함, logo 위치 고정	사용성, 브랜드 아이덴티티 일관성
main 단 1개, 핵심 콘텐츠 집중	검색엔진 & 스크린리더 최적화
aside 활용해 광고, 관련 링크, 추천글 명확히 표시	사용자 혼란 방지
div는 유틸리티 클래스 적용 or 레이아웃 필수일 때만 사용	코드 간결성, 유지보수 편리