[Bootstrap] Color (색상)

안녕하세요. 명월입니다.

이 글은 부트스트랩에서 지원하는 색상에 대한 설명입니다.

저처럼 화면 디자인 감각이 부족한 사람의 공통점은 색상 선택도 항상 좋지 못합니다.

예전에 부트스트랩이 있기 전에 혼자서 프로그램을 하면 항상 단색위주 또는 흑백 그래이 위주의 색깔로 프로그램을 작성했었습니다.

나름 포토샵 색상표도 열고 디자인에서 보색 관계, 유사색의 특징등 나름 공부도 하고 어떻게 하면 좋은 디자인이 나올까 고민도 많이 했었는데, 이 색상 영역은 진짜 감각이 없으면 확실히 구현하기 어려운 영역인 것같습니다.

아마 다른 개발자분들도 이런 고민이 많았었는지 부트스트랩에서 색을 지정해서 사용하기 쉽게 어느 정도 지정해 놓았습니다.

링크 - https://getbootstrap.com/docs/4.3/utilities/colors/

링크 - https://getbootstrap.com/docs/4.3/components/alerts/

먼저 이 색깔의 종류는 10가지 정도되고 타입으로는 4종류 타입이 있네요.

	글자 타입 ( text- )	배경 타입 ( bg- )	경고 타입 ( alert- )
primary	.text-primary	.bg-primary	alert-primary
secondary	.text-secondary	.bg-secondary	alert-secondary
success	.text-success	.bg-success	alert-success
danger	.text-danger	.bg-danger	alert-danger
warning	.text-warning	.bg-warning	alert-warning
info	.text-info	.bg-info	alert-info
light	.text-light	.bg-light	alert-light
dark	.text-dark	.bg-dark	alert-dark
white	.text-white	.bg-white

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="alert alert-primary" role="alert">alert</div>

.bg-primary

alert

참고로 경고타입은 글자색과 배경이 맞추어진 타입인데... 왜 클래스명이 alert인지는...??

여기까지 부트스트랩이 Html의 클래스에서 지원하는 색상은 대표적으로 10가지입니다. 생각보다 많아 보이지는 않지만 포탈사이트나 블로그를 만드는 정도라면 저 10가지 이상의 색상을 사용하는 경우가 흔지는 않습니다.

그리고 부트스트랩을 사용한다고 CSS 바닐라 버전의 컬러 타입을 못 사용하는건 아닙니다.

링크 - https://www.w3schools.com/colors/colors_hex.asp

여기까지 부트스트랩에서 지원하는 색상에 대한 설명이었습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.