CSS: 크기와 색상 표현하기

<크기 단위>

px
제일 많이 사용하는 고정적 단위로, 모니터 해상도 단위인 픽셀을 대상으로 한다.

%
비율을 나타내는 상대적(가변적) 단위인 퍼센트다. 상위 요소가 100px인데 50%를 적용하면 50px이 된다.

em
글자 크기에 사용되는 상대적인 단위다. 소수점은 '0.x'로 표현할 수 있다. 상위 요소 글자가 100px인데 2em을 주면, 200px이 된다.

<색상 단위>

색상 이름
'black'처럼 색상 이름을 직접 적는 방법으로, 17가지의 표준색을 포함해 대략 140개 정도의 색상 이름이 있다.

RGB
rgb는 각각 빛의 삼원색인 Red, Green, Blue를 나타내며, 앞선 색상 이름보다 더 자세히 색상을 표현하는 방법 중 하나이다.

<span style="color:rgb(105,15,100)">RGB</span>

위 코드를 실행하면 이렇게 실행된다.

숫자가 높을 수록 해당 색상이 높아진다는 것이며, 그 숫자값은 0~255까지 사용할 수 있다. 그리고 전체색이 많아질수록 색은 밝아지고, 전체색이 적어질수록 색은 어두어진다. 즉, (0,0,0)은 검은색이고 (255,255,255)는 흰색이다.

Hex
16진수로 색상을 표현한 방식으로 헥스코드라 불린다.

#4169E1

위와 같은 방식으로 표현하며 각 두 자리마다 r, g, b를 뜻한다. 즉 41가 red,69가 green, e1이 blue이다. 헥스 코드로 나타낼 수 있는 색상의 수는 총 166=16,777,216가지로, RGB보다는 좀 더 범용적으로 쓰이는 편이다.