버튼 공통 스타일
이번 수업에서는 버튼에 공통적으로 적용할 .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초 동안 진행되도록 하여, 변화가 자연스럽게 이루어지게 합니다. 이는 크기, 색상, 위치 등의 변화에 적용됩니다.
가이드라인
AI 튜터
배포
디자인
업로드
수업 노트
즐겨찾기
도움말