본문으로 건너뛰기
실습하기

버튼 공통 스타일

이번 수업에서는 버튼에 공통적으로 적용할 .btn 클래스를 정의해 보겠습니다.

버튼 공통 스타일
.btn {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 30px;
  text-transform: uppercase;
  font-size: 14px;
  transition: 0.3s;
}

  • display: inline-block;: 요소를 가로로 배치하며, 동시에 블록 레벨 요소의 속성(너비, 높이 설정 등)을 적용할 수 있습니다.

  • padding: 12px 32px;: 요소 내부의 상하 여백을 12px, 좌우 여백을 32px로 설정합니다.

  • border-radius: 30px;: 요소의 모서리를 둥글게 처리하여, 모서리의 둥글기 정도를 30px로 설정합니다.

  • text-transform: uppercase;: 텍스트 내용을 대문자로 변환합니다. 예를 들어, 'hello'가 'HELLO'로 변경됩니다.

  • font-size: 14px;: 텍스트의 크기를 14px로 설정합니다.

  • transition: 0.3s;: 요소의 속성 변화가 0.3초 동안 진행되도록 하여, 변화가 자연스럽게 이루어지게 합니다. 이는 크기, 색상, 위치 등의 변화에 적용됩니다.

다음 내용이 궁금하다면?

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