버튼이란?

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

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

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

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

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

버튼 예시 코드 - 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);
}

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!