부트스트랩5에서 기본적으로 제공하는 컬러들은 상당히 제한적입니다. 그래서 부트스트랩에서 제공하는 style.css에 남색(navy)버튼 색을 추가하는 방법을 적어보겠습니다.
style.css에서 :root{}
에서 navy
색상을 추가해보겠습니다.
--bs-navy-rgb: 32, 56, 100; /* 남색 버튼색 */
--bs-navy-soft-rgb: 217, 226, 243; /* soft 버전 */
위는 남색 즉, navy
색상 rgb 코드 입니다. 원래의 진한 남색 rgb 코드와 navy 색상에 흰색을 많이 섞은 남색 계열의 연한 색(soft버전)을 추가합니다.
style.css를 쭉 내려보면 아래와 같이 btn클래스가 정의 되어 있는 부분이 존재합니다.
저는 남색 버튼을 추가할 것이니 이 부분에 다음의 코드를 추가합니다.
.btn-navy {
color: #fff;
background-color: #203864;
border-color: #203864;
}
.btn-navy:hover {
color: #fff;
background-color: #264378;
border-color: #264378;
}
.btn-check:focus + .btn-navy, .btn-navy:focus {
color: #fff;
background-color: #2B4B85;
border-color: #243f70;
box-shadow: 0 0 0 0.25rem rgba(113, 146, 209, 0.5);
}
1) .btn-navy
: 기본 navy
색상을 클래스로 정의합니다. 중심이 되는 color라고 볼 수 있습니다.
2) .btn-navy:hover
: 마우스가 올라갔을 때 (hover) 변경될 색상을 클래스로 정의합니다.
3) .btn-check:focus + .btn-navy, .btn-navy:focus
: 버튼을 눌렀을 때 나오는 색상을 정의합니다. 위에서 정의한 btn-navy
,btn-navy:focus
클래스와 함께 정의합니다.
red, green, blue, alpha를 의미합니다. 알파는 각 화소가 얼마나 투명한지를 나타내며 이때 알파 합성을 사용하여 다른 이미지와 합성할 수 있게 합니다.
rgb 코드 를 16진법으로 계산해서 나오는 숫자입니다.
예를 들어, rgb 코드가 (25, 20, 100) 이라면 헥스코드는 #191464가 됩니다.
HTML Color Codes에서 헥스코드, rgb, rgba, hsla 색상을 동시에 확인할 수 있어 유용합니다. 또는, 파워포인트의 색상코드표를 참고하세요.
text 클래스가 정의 된 곳으로 가서 그 곳에 다음의 소스코드를 추가합니다.
.text-navy{
--bs-text-opacity: 1;
color: rgba(var(--bs-navy-rgb), var(--bs-text-opacity)) !important;
}
.text-navy-soft {
--bs-text-opacity: 1;
color: rgba(var(--bs-navy-soft-rgb), var(--bs-text-opacity)) !important;
}
여기선 따로 헥스코드(HEX Code)나 RGB code를 적지 않고 위에서 정의한 색상 코드의 클래스를 가져옵니다.
bg 클래스가 정의된 곳에 다음의 소스코드를 추가합니다.
.bg-navy {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-navy-rgb), var(--bs-bg-opacity)) !important;
}
.bg-navy-soft {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-navy-soft-rgb), var(--bs-bg-opacity)) !important;
}
🥝참조
https://ko.wikipedia.org/wiki/%ED%8C%8C%EC%9D%BC:Hex_code.gif