CSS 색상, 단위

CSS 색상표현

1. 정의된 색상 이름 사용하기

 

예) 

background-color: tomato 

color: white;

aqua, brown, black 등 정해진 이름을 쓰면 사용이 가능하다.

더 많은 정의된 색상의 이름을 알고 싶다면 아래 링크에서 확인하기

 

HTML Color Names

 

2. RGB

 

빛의 삼원색(빨강, 초록, 파랑)을 종합하여 색을 표현, 각 색 당 0~255 사이의 수치로 설정한다.

 

rgb (red, green, blue)

회색표현하기

 

 

rgba (red, green, blue, alpha)

* alpha 채널 : 투명(0.0~1.0) 0에 가까울수록 투명 1은 투명하지 않음을 나타낸다.

 

예) 

 

3. HEX 

16진수로 색상을 나타낸다. RR(빨간색), GG(녹색) 및 BB(파란색)을 나타낸다.

 #abc - #aabbcc / #111 - #111111 같은 숫자가 반복되면 줄여서 한자리만 사용 가능하다.

투명도 처리는 8자리로 표현하며, 다음과 같이 나타낸다.  #RRGGBBAA 

 

 #RRGGBB 

   예)

회색표현하기

 

4. HSL

h(hue , 색조) s(saturation 채도) l(lightness 명도)

h : 0~360까지의 각도값(색상환)

s : 0~100%의 백분률의 값,  0 : 회색, 100 : 본 색상

l :  0~100%의 백분률의 값, 0 : 검은색, 100 : 흰색

 

         

예) 

 

회색표현하기

 

투명도 처리 : hsla(h, s, l, a)  

 

 

CSS에서 사용하는 단위

1. px : 픽셀 pixel, 1px = 1인치의 1/96(가장 많이 사용)

2. pt : 포인트 point,  1pt = 1인치의 1/76

3. cm : 센티미터

4. em : 출판에서 사용하는 단위,  'M'의 가로길이를 기준으로 함, 약 16px, 예) 2em 두 배 커진 크기를 가진다.

5. 고정값 : thin, medium, thick - borther에서 주로 사용

    xx-small < x-small < small < medium(기본) < large < x-large < xx-large 글자 크기에서 사용

6. 백분률 : % (상대적인 크기)

   

CSS 7가지 단위

1. rem (root em) : 상위(부모) 요소를 기준으로 배율로 크기를 지정

2. vh (viewport height) : viewport 기준 높잇값, 뷰포트 높이 1% 길이

3. vw (viewport width) : viewport 기준 너비값, 뷰포트 너비 1% 길이

4. wmin (viewport min) : viewport 기준 최솟값(너비)

5. vmax (viewport max) : viewport 기준 최댓값(높이)

6. ex : 현재 포트의 소문자 x-높이값 em의 절반값

7. ch : 제로 문자(0)의 너비값

 

* viewport 란?

모바일 (스마트기기) 화면 기준