Guidelines
Practice
웹 갤러리 템플릿
첫 번째 템플릿의 구조를 살펴보겠습니다.
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>
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help