primary, secondary 버튼 스타일
primary 버튼 스타일
.btn-primary {
background: var(--primary-color);
color: #000000;
}
-
background: var(--primary-color);
: 요소의 배경색을 설정합니다.--primary-color
라는 이름의 변수를 사용했습니다.--primary-color
변수는 이미 앞에서#ffcd42
라는 값을 설정해 두었습니다. 따라서background: var(--primary-color);
는background: #ffcd42;
과 같은 의미입니다. 변수를 사용함으로써, 나중에 보았을 때 왜 이 색을 선택했는지 의미를 더 쉽게 알 수 있습니다. -
color: #000000;
: 글자 색상을 설정합니다.#000000
은 검은색을 의미합니다.#000000
은#RRGGBB
형식으로 색상을 표현하는데,RR
,GG
,BB
는 각각 빨강, 초록, 파랑을 의미합니다. 각 값들이 낮을수록 어두워지고, 높을수록 밝아집니다. 예를 들어#FF0000
은 빨강색을 의 미하고,#00FF00
은 초록색을 의미합니다. 그리고#000000
은 빨강, 초록, 파랑 모두 0이기 때문에 검은색을 의미합니다.
secondary 버튼 스타일
.btn-secondary {
margin: 5px 0;
background-color: var(--bg-secondary);
color: var(--bg-primary);
}
-
margin: 5px 0;
: 위 아래 여백은 5px, 좌 우 여백은 0으로 설정합니다. -
background-color: var(--bg-secondary);
: 요소의 배경색을 설정합니다.--bg-secondary
는--bg-secondary
라는 변수의 값을 가져와서, 이미 해당 변수에 설정해 둔#ffd35c
라는 값을 사용합니다. -
color: var(--bg-primary);
: 글자 색상을 설정합니다.--bg-primary
는--bg-primary
라는 변수의 값을 가져와서, 이미 해당 변수에 설정해 둔#ffffff
라는 값을 사용합니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!