lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

# 버튼이란?

웹페이지의 `버튼`은 사용자가 웹페이지에서 클릭을 유도하고, 기능을 수행할 수 있도록 돕는 요소입니다.

버튼은 다양한 기능을 수행할 수 있습니다.

예를 들어, 로그인 버튼을 누르면 로그인이 되고, 회원가입 버튼을 누르면 회원가입 페이지로 이동하고, 게시글 작성 버튼을 누르면 게시글 작성 페이지로 이동하는 등의 기능을 합니다.

버튼은 웹페이지의 어디에나 위치할 수 있습니다. 그만큼 자주 사용되는 요소이기 때문에, 버튼은 미리 만들어두는 경우가 많습니다.

<br />

```html title="버튼 예시 코드 - html"
<li>
  <a class="nav-link btn btn-primary" href="#footer"
    >연락하기 <i class="fas fa-arrow-right"></i
  ></a>
</li>
```

```css title="버튼 예시 코드 - css"
.navbar .btn {
  margin-right: 24px;
}

.fas.fa-arrow-right {
  margin-left: 8px;
  font-size: 14px;
}

/* 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);
}
```

이 코드를 한개씩 살펴보면서 구성을 이해해 보겠습니다.