CSS 색상 표현 방법
CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리색(border) 등 다양한 CSS 속성들에 적용됩니다. 색상을 표현하는 방법에 대해 어떤 것들이 있는지 알아보겠습니다.
01. 색상명
해당 색상을 의미하는 고유명사를 속성값으로 사용합니다. 사용할 수 있는 속성값으로는 red, green, blue, aqua, corel, 등 여러 가지가 있으나 해당 색상값을 의미하는 단어를 미리 알고 있어야 합니다. http://www.w3schools.com에 접속하여 Learn CSS > Color Colors를 클릭하면 등록된 색상명을 확인할 수 있습니다.
속성 값 | 속성 설명 |
---|---|
color: orange; | 글자를 오렌지색으로 표현 |
background: beige; | 배경색을 베이지색으로 표현 |
border-color: tomato; | 테두리를 토마토색으로 표현 |
02. HEX값
red, green, blue의 세 가지 색을 16진수 00~ff 사이의 수치를 표현하는 것으로서 #rrggbb 형태로 기술합니다. #aabbcc와 같이 세 가지 색 모두 두 자리 값이 같으면 #abc라고 한자리로 줄여쓸 수 있습니다. red, green, blue는 빛의 3원색이므로 값이 커지면 더 밝은 색이 됩니다. 따라서 최대값 #ffffff는 흰색을 의미하고, 최소값 #000000은 검정색을 의미하며, 가운데 자리만 최대값인 #00ff00은 green색을 의미합니다. 이와 같이 red, green, blue의 16진수 두 자리 값을 적절히 배합하면 어떤 색이 나올지 예상할 수 있습니다.
HEX 값 | 속성 설명 |
---|---|
color: #000000; | red:0, green:0, blue:0 색상으로 표현 |
color: #ff0000; | red:255, green:0, blue:0 색상으로 표현 |
color: #00ff00; | red:0, green:255, blue:0 색상으로 표현 |
color: #0000ff; | red:0, green:0, blue:255 색상으로 표현 |
color: #ffff00; | red:255, green:255, blue:0 색상으로 표현 |
color: #00ffff; | red:0, green:255, blue:255 색상으로 표현 |
color: #ff00ff; | red:255, green:0, blue:255 색상으로 표현 |
color: #ffffff; | red:255, green:255, blue:255 색상으로 표현 |
03. RGB값 / RGBA값
RGB값은 rgb(red, green, blue) 형태로 기술하며 red, green, blue는 10진수 0~255사이의 수치로 표현합니다. RGBA값은 rgba(red, green, blue, alpha) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.
속성 값 | 속성 설명 |
---|---|
color: rgb(255, 128, 0); | 글자를 red:255, green:128, blue:0 색상으로 표현 |
color: rgba(255, 0, 0, 0.5); | 배경색을 빨간색 반투명으로 표현 |
04. HSL값 / HSLA값
HSL값은 hsl(hue, saturation, lightness) 형태로 기술하며 hue(색상)는 0~360 색상환 값, saturation(채도)과 lightness(명도)는 % 값으로 표현합니다. HSLA값은 hsla(hue, saturation, lightness, alpha) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.
속성 값 | 속성 설명 |
---|---|
color: hsl(300, 100%, 50%); | 글자를 색상:300도, 채도:100%, 명도:50%로 표현 |
background: hsla(0, 100%, 100%, 0.5); | 배경을 빨간색 반투명으로 표현 |
05. 색상 표현법 예시
'CSS' 카테고리의 다른 글
[CSS]애니메이션01 (4) | 2022.08.29 |
---|---|
[CSS]요소 숨기기 (8) | 2022.08.25 |
[CSS]단위 (4) | 2022.08.23 |
[CSS]이미지 스프라이트 / IR 효과 / 백그라운드 표현 (7) | 2022.08.20 |
[CSS]강아지 애니메이션 (3) | 2022.08.18 |
댓글