1. 색상 변경법
CSS는 그 존재 의의에 맞게 해당 HTML의 컨텐츠들을 다양하게 꾸며줄 수 있습니다. 일반적으로는 CSS 파일 안에 직접 색상 코드를 디테일하게 지정하는 방법이 있고, 외부 라이브러리(BootStrap, Tailwind, Saas 등)을 사용해 색상을 편하게 지정하는 방법도 존재합니다. 기본적으로 색상을 바꾸는 부분에서 그러한데요.
이번 장에서는 기본적인 CSS 색상 코드 변경 방법에 대해서 알아보도록 하겠습니다.
2. HEX 코드
빨강(red), 초록(green), 파랑(blue)의 조합이 16지수로 표현 된 형태의 코드입니다. 주로 #fff 혹은 #ffffff 형태로 사용이 가능한데, #(빨강코드)(초록코드)(파랑코드) 형태라고 보시면 됩니다.
이때 특정 코드의 두 자리수가 같을 경우 축약해서 하나만 적는 것이 가능합니다. 예를 들어 보라색을 나타내는 대표적으로 하얀색 코드의 경우 축약이 가능하므로 #fff로 사용이 가능합니다. 하지만 왠만해서는 풀코드로 사용하는 것이 정확한 색상 데이터의 입력 방법임을 또한 기억해야 합니다. (다음 사이트 참조)
.hex-color { color: #3498db; /* 파란색 */ }
3. RGB, RGBA 코드
빨간색, 초록색, 파란색(RGB) 값을 각각 0에서 255까지의 정수로 표현하여 지정하는 방법입니다. 이때 투명도(A)를 설정하는 방법 또한 가능한데 이럴 경우 rgb인지, rgba인지를 명확하게 작성해 주어야 합니다.
투명도의 경우 0(완전 투명) 부터 1(불투명) 까지 조정이 가능한데, 투명도 자리의 값을 생략할 경우 기본적인 default 값은 1이기에 변화가 없도록 처리됩니다. (다음 사이트 참조)
.rgb-color { color: rgb(52, 152, 219); } .rgba-color { color: rgba(52, 152, 219, 0.7); }
4. HSL, HSLA 코드
Hue(색조), Saturation(채도), Lightness(명도)를 이용해 색상을 표현하는 방법으로 그래픽 디자인 쪽에서 많이 차용되는 색상 코드입니다.
이 코드 또한 RGBA와 마찬가지로 투명도(A)를 적용하는 것이 가능합니다. (다음 사이트 참조)
.rgba-color { color: hsl(0, 100%, 50%); } .rgba-color { color: hsla(0, 100%, 50%, 0.5); }
5. HWB 코드
위치 (Hue), 흰색(Whiteness), 그리고 검은색(Blackness)의 조합으로 그라데이션 효과를 주는 용도로 사용되는데, RGB나 HSL 코드가 주로 사용되기 때문에 그렇게 사용되는 일은 없습니다. (해당 사이트 참조)
.hwb-color { color: hwb(240, 0%, 100%); }
5. CSS 색상 이름
특정 색상에 대해서 미리 등록 된 네이밍을 사용하여 색상을 적용하는 방법입니다. red, green, blue 등과 같이 작성하여 사용이 가능하며, darkpurple, lightgray와 같이 접두사를 추가하여 접미사의 색상을 다양하게 추가한 네이밍도 존재합니다. 해당 네이밍의 경우 다음 사이트에서 참고가 가능합니다.
.name-color { color: royalblue; }
6. 색상 적용 관련 추가 내용
색상에 투명도를 적용할 수 있는 코드는 RGBA와 HSLA 뿐만 아니라 opacity 속성을 추가해서 해당 색상에 대한 투명도 효과를 주는 것 또한 가능합니다. 또한 앞서 소개해드린 색상 코드 표기법들은 color 속성 뿐만 아니라 text-shadow와 같이 색상과 관련된 속성이라면 조합하여 사용하는 것도 가능합니다.
해당 색상 코드들을 찾는 법에 대해서는 공식 문서(MDN) 에서도 확인이 가능하나, 다음 사이트에서 좀 더 편하고 명확히 알려주기에 해당 사이트를 방문해 보시는 것을 추천 드립니다.
