lesson1Title

lesson2Title

lesson3Title

lesson4Title

webIntroGalleryChapter1Title

lesson5Title

lesson6Title

webIntroGalleryChapter2Title

webIntroGalleryChapter3Title

# 웹 갤러리 템플릿

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

<br />

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

```html
<nav>...</nav>
```

<br />

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

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

<br />

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

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

<br />

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

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

<br />

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

```html
<details>...</details>
```

<br />

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

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

<br />

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

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

<br />

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

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

<br />

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

```html
<footer>...</footer>
```

<br />

- Copyright Information: 웹사이트 제작자 정보 및 로고 링크입니다.

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