til 32.

오늘은 HTML5의 시맨틱 태그와 Flexbox 레이아웃, 그리고 기본적인 반응형 웹 구현을 위한 미디어 쿼리 학습을 진행했다.

---

✅ 학습 목표

• HTML5 시맨틱 태그를 활용한 웹 구조 설계
• Flexbox를 통해 시맨틱 태그 기반 레이아웃 구성
• 반응형 웹을 위한 기본적인 미디어 쿼리 활용 이해

---

🔤 1. 시맨틱 태그란?

시맨틱 태그(Semantic Tag)는 태그 자체에 의미를 담고 있는 HTML5 태그로, 웹 문서의 구조를 더 명확하고 직관적으로 표현할 수 있다. 검색 엔진 최적화(SEO) 및 웹 접근성 향상에도 유리하다.

태그	의미
<header>	머리말 영역 (로고, 검색창 등)
<nav>	내비게이션 메뉴 영역
<main>	주요 콘텐츠 영역
<section>	의미 있는 구역으로 나누는 용도
<footer>	하단 정보 영역 (저작권, 회사 정보 등)
<article>	독립적인 콘텐츠 (뉴스 기사 등)
<aside>	사이드바 영역, 광고, 추천 링크 등

🧠 이번 코드에서는 article, aside는 사용하지 않았지만, 향후 뉴스, 블로그 형태로 확장할 땐 유용할 것 같다.

---

🎨 2. Flexbox와 결합한 시맨틱 레이아웃

시맨틱 태그에 Flexbox를 활용하여 가독성 좋고 유지보수에 용이한 레이아웃을 구성했다.

✅ 주요 레이아웃 설명

• header: display: flex + flex-basis로 로고와 검색창을 영역별 분할, 중앙 정렬
• nav: position: sticky로 설정해 스크롤 시 상단 고정되는 내비게이션 메뉴
• .content: display: flex로 좌우 배치
  • .content-1: 게시판, 컨텐츠 영역 (flex-direction: column)
  • .content-2: 로그인 영역
• footer: flex-direction: column, align-items: center로 하단 요소를 세로 정렬

---

📱 3. 반응형 웹을 위한 미디어 쿼리

@media all and (max-width: 767px) {
  header { display: none; }
  nav ul { flex-direction: column; }
  .content { flex-direction: column; }
  footer p, footer section * { font-size: 12px; }
}

• 화면 너비가 767px 이하일 경우:
  • header를 숨기고,
  • 내비게이션 메뉴를 세로 배치로 전환
  • 본문 콘텐츠(.content)도 세로 배치로 변경
  • 푸터 글씨 크기 축소

🧩 모바일 기준으로 테스트해보며 레이아웃이 자연스럽게 변하는지 직접 확인했다.

---

📘 느낀점

• 시맨틱 태그 덕분에 HTML 구조가 명확해지고, 유지보수가 쉬워졌다는 점이 인상 깊었다.
• Flexbox는 구조적 시맨틱 마크업을 시각적으로 배치하는 데 매우 효과적이었다.
• 간단한 미디어 쿼리만으로도 충분히 유연한 반응형 레이아웃을 구현할 수 있음을 깨달았다.
• 특히 Flexbox + 시맨틱 태그 + 미디어 쿼리의 조합은 향후 프로젝트에서도 기본 뼈대로 쓸 수 있을 만큼 강력하고 효율적인 조합이다.