lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

webIntroPortfolioChapter1Title

lesson6Title

webIntroPortfolioChapter2Title

webIntroPortfolioChapter3Title

# 포트폴리오 템플릿 3

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

<br />

**1. Header (`<header>`)**: 웹사이트의 상단 헤더 부분입니다.

```html
<header>...</header>
```

<br />

- Logo: 로고 이미지가 위치한 부분입니다.

  ```html
  <div class="header-icon">
    <img
      class="logo-icon"
      src="https://assets.codefriends.net/templates/web/portfolio-1/assets/logo-icon.svg"
    />
  </div>
  ```

<br />

- Navigation (`<nav>`): 웹사이트의 주요 내비게이션 메뉴입니다.

  ```html
  <nav>
    <ul class="navigation">
      <li><a href="#intro">WORK</a></li>
      ...
    </ul>
  </nav>
  ```

<br />

- Dropdown Menu: 작은 화면에서 사용되는 드롭다운 메뉴입니다.
  ```html
  <div class="dropdown">...</div>
  ```

<br />
<br />

**2. Main Content (`<main>`)**: 웹사이트의 주요 컨텐츠가 위치하는 영역입니다.

```html
<main>...</main>
```

<br />

- Intro Section (`#intro`): 소개 섹션으로, 디자이너의 주요 타이틀과 간략한 소개가 담겨 있습니다.

  ```html
  <section id="intro">...</section>
  ```

<br />

- Skills Section (`#skills`): 디자이너의 보유 기술을 나타내는 섹션입니다.

  ```html
  <section id="skills">...</section>
  ```

<br />

- Projects Section (`#project`): 디자이너의 프로젝트 포트폴리오를 보여주는 섹션입니다.
  ```html
  <section id="project">...</section>
  ```

<br />
<br />

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

    ```html
    <footer id="contact">...</footer>
    ```

<br />

- Contact Information: 디자이너의 연락처 및 메시지 전송 폼이 위치한 부분입니다.

  ```html
  <div class="footer-top">...</div>
  ```

<br />

- Social Media Icons: 소셜 미디어 아이콘들이 위치한 부분입니다.

  ```html
  <a href="#">
    <img
      class="social-icon"
      src="https://assets.codefriends.net/templates/web/portfolio-1/assets/instagram.png"
    />
  </a>
  ```

<br />

- Copyright Information: 저작권 정보입니다.

```html
<div class="footer-bottom-text">...</div>
```

<br />
<br />

**4. Modal (`#modal`)**: 이미지를 클릭했을 때 큰 화면으로 보여주는 모달창입니다.

```html
<div id="modal">...</div>
```