lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

webIntroPortfolioChapter2Title

webIntroPortfolioChapter1Title

webIntroPortfolioChapter3Title

# Dropdown 메뉴

**Dropdown 메뉴**는 클릭하거나 호버(마우스 오버) 할 때 추가적인 메뉴 옵션을 표시하는 UI 컴포넌트입니다. 주로 내비게이션 메뉴, 설정 메뉴 등에서 사용됩니다.

<br />

## 코드 분석

### HTML

```html
<div class="dropdown">
  <img
    class="dropdown-icon"
    src="https://assets.codefriends.net/templates/web/portfolio-2/assets/hamburger.png"
  />
  <ul class="dropdown-content">
    <li><a href="#intro">WORK</a></li>
    <li><a href="#career">PROJECT</a></li>
    <li><a href="#about">ABOUT</a></li>
  </ul>
</div>
```

- `.dropdown`: 전체 Dropdown 메뉴를 감싸는 부모 요소입니다.

- `.dropdown-icon`: Dropdown 메뉴를 클릭하거나 호버할 때 사용하는 아이콘입니다. 여기서는 햄버거 아이콘을 사용했습니다.

- `.dropdown-content`: Dropdown 메뉴의 내용을 포함하는 부모 요소입니다. `ul` 요소를 사용하여 리스트 형태로 메뉴 아이템들을 정의하였습니다.

<br />

### CSS

```css
.dropdown {
  position: relative;
  display: none;
  cursor: pointer;
  margin-right: 24px;
}

.dropdown-icon {
  width: 20px;
  height: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0px;
  margin-top: 22px;
  min-width: 200px;
  background-color: #fffcf9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 20;
}

.dropdown:hover {
  padding-left: 200px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content li {
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.dropdown-content li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.dropdown-content li:hover {
  color: #000;
  background-color: #ddd;
}
```

- **`.dropdown` 스타일**: Dropdown 메뉴의 부모 요소에 대한 기본 스타일을 정의합니다.

- **`.dropdown-icon` 스타일**: 아이콘의 크기를 지정합니다.

- **`.dropdown-content` 스타일**: 메뉴 내용에 대한 스타일을 정의합니다. 초기 상태에서는 `display: none;`으로 설정하여 보이지 않게 합니다.

- **`.dropdown:hover .dropdown-content` 스타일**: Dropdown 메뉴를 호버할 때 메뉴 내용을 보이게 합니다.

- **`.dropdown-content li` 및 `.dropdown-content li a` 스타일**: 메뉴 아이템과 해당 링크에 대한 스타일을 정의합니다.

- **`.dropdown-content li:hover` 스타일**: 메뉴 아이템을 호버할 때의 스타일을 정의합니다.