lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

# 메뉴 내 버튼 구성

```html title="메뉴 내 버튼 구성"
<li>
  <a class="nav-link btn btn-primary" href="#footer"
    >연락하기 <i class="fas fa-arrow-right"></i
  ></a>
</li>
```

메뉴 항목 안에 버튼을 구성할 수 있습니다.

버튼은 `<a>` 태그를 이용하여 구성되었으며, 클릭 시 `#footer`로 이동하도록 설정되었습니다.

버튼을 위한 태그로 `<button>` 태그도 존재하지만, 여기서는 `<a>` 태그를 이용해 버튼을 구성하는 경우를 보여줍니다.

클릭 시 화면 최하단에 있는 `#footer`로 이동하도록 설정되었습니다. 연락하기 버튼을 누르면 해당 섹션으로 이동합니다.

<br />

## 버튼 스타일

```css title="버튼 스타일"
/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 30px;
  text-transform: uppercase;
  font-size: 14px;
  transition: 0.3s;
}

.btn-primary {
  background: var(--primary-color);
  color: #000000;
}

.btn-secondary {
  margin: 5px 0;
  background-color: var(--bg-secondary);
  color: var(--bg-primary);
}
```

웹페이지 제작 시 다양한 버튼을 사용할 것입니다.

버튼마다 스타일을 일일이 설정하는 것보다, 버튼을 위한 공통 스타일을 미리 설정해두었습니다.