primary, secondary 버튼 스타일

이번에는 버튼에 공통적으로 적용할 스타일을 정의해보겠습니다.

primary 버튼 스타일

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 강의를 등록해 주세요!