CSS Reference

CSS 단위

키워드

속성에 따라 사용할 수 있는 키워드가 존재한다. 예를들어 display 속성의 값으로 사용할 수 있는 키워드는 block , inline , inline-block 등 이 있다.

크기 단위

CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px는 절대값이고 em, %는 상대값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px , 1em, 100%이다.

px

px(픽셀)단위는 화소 1개의 크기를 의미한다. 이 px의 크기는 디바이스에 따라 제각각이기 때문에 명확하지가 않다. 따라서 대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식한다. px은 요소의 크기나 이미지의 크기 지정에 주로 사용된다.

%

%는 백분율 단위의 상대단위이다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정한다.

em

em은 배수 단위로 상대 단위이다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적인 사이즈를 설정한다. 예로 1em은 요소에 지정된 사이즈와 동일하고 1.5em은 요소에 지정된 사이즈에 1.5배이다. 중첩된 자식 요소에 em을 지정하면 자식요소들의 사이즈에 영향을 미치기 때문에 주의하여야 한다.

rem

em의 기준은 상속때문에 바뀔 수도 있다. rem은 최상위 요송의 사이즈를 기준으로 삼는다 rem의 r은 root를 의미한다.

Viewport 단위(vh,vw,vmin,vmax)

1vw : viewport 너비의 1%
1vh : viewport 높이의 1%
vmin : viewport 너비 또는 높이 중 작은쪽의 1%
vmax : viewport 너비 또는 높이 중 큰쪽의 1%

색상 표현 단위

색상을 지정하기위해 키워드를 사용할 수도 있지만 색상의 수가 제한된다. 이를 보안하기위해 여러가지 색상 표현 단위가 있다.

HEX 코드 단위 - (#000000)
RGB - rgb(255, 255, 0)
RGBA - rgb(255, 255, 0, 1(투명도))
HSL(Hue = 색상 , Saturation = 채도 , Lightness = 명도) - hsl(0,100%,25%)
HSLA - hsla(0,100%,25%,1(투명도))