웹 갤러리 템플릿

첫 번째 템플릿의 구조를 살펴보겠습니다.

1. Navigation Bar (<nav>): 웹사이트의 주요 링크를 포함한 내비게이션 바입니다.

<nav>...</nav>

Logo: 웹사이트 로고(symbol) 및 메인 링크입니다.

<a href="/" class="symbol">
  <img
    src="https://assets.codefriends.net/assets/etc/codefriends-symbol.png"
    width="40px"
    height="40px"
    alt="symbol"
  />
</a>

Main Menu: 메인 메뉴 항목과 아이콘을 포함한 하위 메뉴입니다.

<ul class="menu menu-large">
  ...
</ul>

Theme Toggle Buttons: 테마 전환 버튼입니다.

<a id="dark" class="btn">...</a> <a id="light" class="btn">...</a>

Responsive Menu: 반응형 메뉴입니다.

<details>...</details>

2. Content Area (<div class="content">): 웹사이트의 주요 콘텐츠 영역입니다.

<div class="content">...</div>

Gallery Title: 갤러리 제목 및 간단한 설명입니다.

<h1>My Gallery</h1>
<p class="desc">사진 앨범</p>

Photo Grids: 그리드 형식의 사진 앨범입니다.

<div class="grid-box">...</div>

3. Footer (<footer>): 웹사이트의 하단 푸터 부분입니다.

<footer>...</footer>

<a class="logo mini" href="https://www.codefriends.net/">CodeFriends</a>