섹션 컴포넌트 & 레이아웃 패턴 요약

1. 내비게이션 컴포넌트

• 기본 메뉴 + 서브메뉴
  • 상단 바에 링크만 두거나, 링크에 호버/클릭 시 작은 박스 형태의 서브메뉴를 띄움
• 확장된 서브메뉴
  • 더 많은 링크나 설명을 담기 위해 큰 박스로 팝업
  • 전체 너비 패널로 펼쳐 페이지 전체에 메뉴·설명을 제공
• 사이드바 내비게이션 & 오버레이 메뉴
  • IBM·Apple처럼 아이콘·이미지를 곁들인 메뉴
  • 모바일·데스크톱 모두에서 페이지 위에 전체 네비게이션 오버레이
• 세컨더리 내비게이션
  • 현재 주 메뉴 항목 아래에 추가 메뉴 바 배치
  • 큰 사이트 구조에서 사용자 위치 파악 및 이동 편의 제공

2. 히어로 섹션 트렌드

1. 텍스트 ↔ 이미지 분할 레이아웃
2. 배경 이미지 위 텍스트 (5년 전 인기, 현재는 감소 추세)
3. 텍스트 상단 → 이미지 하단

• 이 세 가지를 혼합한 하이브리드도 가능

3. 푸터(Footer)

• 사이트맵: 전체 또는 일부 페이지 링크
• 회사 정보·정책·소셜 아이콘·뉴스레터 폼
• 미니멀 푸터: Tesla처럼 핵심 링크만 배치

4. 콜투액션(CTA) 섹션

• 페이지 말미에 배치
• 비주얼 강조: 색상·배경 이미지 차별화
• 소셜 프루프(고객 로고), 보증 문구(환불·특징 강조)
• 문의 유도: 이메일·전화·문의 폼 링크

5. 피처 로우(Feature Rows)

• 이미지 ↔ 텍스트 배열
• 작은 제목(uppercase) + 메인 헤딩 + 설명 + 버튼
• 테스트imonial 삽입 시 신뢰도 상승

---

레이아웃 패턴

1. Row of Cards
2. Grid of Cards
3. Nested Patterns: 컴포넌트 내부에 행/그리드 패턴 중첩
4. Z-Pattern: 이미지·텍스트 교차 배열로 시선 유도
5. F-Pattern(및 Inverted F)
6. Single Column: 모바일/블로그용
7. Sidebar Layout: 블로그 TOC, 웹앱 메뉴
8. Multi-Column (Magazine)
9. Experimental / Asymmetric: CSS Grid 활용한 독창적 섹션

---

HTML / CSS 예제

내비게이션 + 호버 서브메뉴

<nav class="navbar">
  <ul class="menu">
    <li class="menu-item">
      제품
      <ul class="submenu">
        <li><a href="#">서비스 A</a></li>
        <li><a href="#">서비스 B</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="#">가격</a></li>
    <li class="menu-item"><a href="#">블로그</a></li>
  </ul>
</nav>

.navbar {
  background: #fff;
  padding: 1rem;
}
.menu { display: flex; gap: 2rem; list-style: none; }
.menu-item { position: relative; cursor: pointer; }
.submenu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: #f9f9f9;
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.menu-item:hover .submenu {
  display: block;
}

히어로 섹션 (텍스트 ↔ 이미지)

 

<section class="hero">
  <div class="hero-text">
    <h1>Next‑gen Product</h1>
    <p>혁신적인 기능으로 더 나은 경험을 제공합니다.</p>
    <button>지금 시작하기</button>
  </div>
  <div class="hero-image">
    <img src="hero.jpg" alt="제품 이미지">
  </div>
</section>

.hero {
  display: flex;
  align-items: center;
  padding: 4rem;
}
.hero-text { flex: 1; }
.hero-image img { max-width: 100%; height: auto; }