[Bootstrap] color 추가하여 나만의 CSS로 Custom 하기.

Chris·2023년 3월 24일
0
post-thumbnail

부트스트랩5에서 기본적으로 제공하는 컬러들은 상당히 제한적입니다. 그래서 부트스트랩에서 제공하는 style.css에 남색(navy)버튼 색을 추가하는 방법을 적어보겠습니다.

1. :root에 color 추가

style.css에서 :root{} 에서 navy색상을 추가해보겠습니다.

--bs-navy-rgb: 32, 56, 100; /* 남색 버튼색 */
--bs-navy-soft-rgb: 217, 226, 243; /* soft 버전 */

위는 남색 즉, navy색상 rgb 코드 입니다. 원래의 진한 남색 rgb 코드와 navy 색상에 흰색을 많이 섞은 남색 계열의 연한 색(soft버전)을 추가합니다.

2. btn-navy 클래스 정의

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 클래스와 함께 정의합니다.


🍑참고

1. rgba

red, green, blue, alpha를 의미합니다. 알파는 각 화소가 얼마나 투명한지를 나타내며 이때 알파 합성을 사용하여 다른 이미지와 합성할 수 있게 합니다.

2. 헥스 코드

rgb 코드 를 16진법으로 계산해서 나오는 숫자입니다.
예를 들어, rgb 코드가 (25, 20, 100) 이라면 헥스코드는 #191464가 됩니다.


🍉동일 선상의 색상코드를 참고하기 좋은 사이트 추천

HTML Color Codes에서 헥스코드, rgb, rgba, hsla 색상을 동시에 확인할 수 있어 유용합니다. 또는, 파워포인트의 색상코드표를 참고하세요.


3. 추가, text 클래스에 색상 custom 하기.

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를 적지 않고 위에서 정의한 색상 코드의 클래스를 가져옵니다.

4. 추가, 배경 클래스에 색상 custom 하기.

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;
}

5. Cf) 참고하기 좋은 HEX Color Codes


🥝참조
https://ko.wikipedia.org/wiki/%ED%8C%8C%EC%9D%BC:Hex_code.gif

profile
기술 블로그

0개의 댓글