본문으로 건너뛰기
실습하기

웹 갤러리 템플릿

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


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>

  • Copyright Information: 웹사이트 제작자 정보 및 로고 링크입니다.
<a class="logo mini" href="https://www.codefriends.net/">CodeFriends</a>