안녕하세요! 오늘도 css를 배워볼 준비 되셨나요? 오늘은 폰트, 색상, 사이즈 등에 대해서 알아보려고 합니다. 앞에서 배운 selector나 css 박스 모델을 사용해보면서 공부해보도록 하겠습니다.
사실 css을 맨 처음 배울때 가장 먼저 해보는 것이 배경색이나 폰트 색상 바꾸는 것이라고 생각합니다. div 만들어서 색상 이것저것 바꿔보고 해 보면 재미있거든요
먼저 online으로 html과 css를 쓸 수 있는 웹사이트를 열어 줍니다. 저는 개인적으로 jsfiddle을 사용하고 있습니다.
css 색상
css에서 색상을 바꿀 때 우리는 여러가지 타입에 값을 줄 수 있습니다.
- 색상 이름
- hex
- rgb(a)
- hsl
색상 이름
css에서 많은 색에 이름이 붙여져 있습니다. 우리가 알고 있는 red, black, blue 말고도 tomato, whitewheat, wheat, chocolate 등 여러 색상이 있습니다.
.tomato { color: tomato; }
.chocolate { color: chocolate; }Hex code 색상
Hex는 총 16자리 기호로 구성되어 있습니다. 0-9까지 그리고 A, B, C, D, E, F입니다.
총 만들어 낼 수 있는 색상은 256개입니다.
Hex로 색상을 나타낼 때는 #(샵)을 맨 앞에 붙여 줘야 합니다.
맨 앞에 2자리는 빨간색, 다음 두 자리는 초록색, 마지막 2자리는 파란색을 의미합니다.
00 이면 아무런 색상이 없다 FF라면 그 색상 최고치입니다. 만약에 Hex 코드가 FF0000이라면 빨간색이 00 FF00이라면 초록색이 되는 것입니다.
Hex code는 단색일 때 3자리로도 표현이 가능합니다. 빨간색 Hex 코드가 6자리로 ff00000이라면 f00으로도 빨간색을 나타낼 수 있습니다.
.red { color: #ff0000;}
.green { color: #00ff00;}
.blue { color: #0000ff;}css rgb(a) 색상
rgb는 red, green, blue를 뜻하고 rgb(red, green, blue)로 사용됩니다. 들어가는 값은 0-255까지 들어갑니다. 앞에서 총 만들 수 있는 색상이 256가지라고 했는데 0-255까지 총 256입니다.
앞에서와 같이 들어가는 숫자가 높을수록 각 색상이 강해지는 것입니다.
.red { color: rgb(255, 0, 0);}
.green { color: rgb(0, 255, 0);}
.blue { color: rgb(0, 0, 255);}rgb 말고 다른 마지막 a 값도 넣을 수가 있는데 이것은 alpha를 줄인 것으로 투명도를 뜻합니다.
0.0 - 1.0까지로 0으로 내려갈수록 투명도가 내려갑니다. 즉, 0을 넣으면 보이지 않게 됩니다.
.red { color: rgba(255, 0, 0, 0.8);}hsl(a)
hls는 Hue(색조), 채도(saturation), 명도(lightness)를 뜻합니다. rgb와 같이 마지막에 alpha 값을 넣어서 투명도를 줄 수 있습니다.
hue는 0-360 사이의 숫자로 색조를 표시합니다. 360은 빨간색, 120 초록색, 240은 파란색입니다.
saturation은 %로 나타내지고 0~100% 사이에 값을 받습니다.
lightness 또한 0~100% 사이에 % 값이고 100%는 하얀색입니다.
.red { color: hsl(360, 100%, 50%); }
.light-red { color: hsl(360, 100%, 75%); }hsl에서도 앞에서 배운 apha 값을 넣을 수 있습니다.
.light-violet {background-color:hsla(290,100%,50%, 0.5);}
이상으로 css 색상에 대해서 알아보았습니다.
사실 회사에서 일을 하다 보면 많은 경우 색상은 디자이너가 주는 경우가 많이 있습니다. 그래서 직접 위에 rgba나 hsl를 하나씩 바꿔 가면서 색상 만들고 그런 경우는 거의 없습니다. 직접 색상을 정한다고 해도 대부분 인터넷에서 색상 관련 홈페이지나 플러그 인으로 찍어서 가져오는 경우가 많이 있습니다. 그래도 각각에 색상이 어떻게 만들어지고 어떤 걸 의미하는지 아는 것은 중요하다고 생각합니다. 도움이 되었다면 주변에 많이 공유해주세요!