CSS 단위와 값 정리

CSS에 사용되는 모든 속성에는 해당 속성에 허용되는 값이 있다.

 

 

절대 길이 단위 - 일반적으로 항상 동일한 크기로 나타낸다.

cm	센티미터	1cm = 96px/2.54
mm	밀리미터	1mm = 1/10th of 1cm
Q	4분의 1 밀리미터	1Q = 1/40th of 1cm
in	인치	1in = 2.54cm = 96px
pc	Picas	1pc = 1/6th of 1in
pt	포인트	1pt = 1/72th of 1in
px	픽셀	1px = 1/96th of 1in

 

상대 길이 단위 - 다른 요소와 관련이 있다. 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정된다.

em	요소의 글꼴 크기.
ex	요소 글꼴의 x-height.
ch	요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다.
rem	루트 요소의 글꼴 크기.
lh	요소의 라인 높이.
vw	viewport 너비의 1%.
vh	viewport 높이의 1%.
vmin	viewport 의 작은 치수의 1%.
vmax	viewport 의 큰 치수의 1%.

 

 

 

CSS 값 과 단위 - Web 개발 학습하기 | MDN

함수표기법

calc(), min(), max()

 

calc()

css함수를 사용하면 css속성의 값으로 계산식을 지정할 수 있다.

/* property: calc(expression) */
width: calc(100% - 80px);

- +, -, *, / 사칙연산을 모두 사용 가능

- 연산자 좌,우에는 공백을 넣어주어야 한다.

 

min, max

widch: min(100%, 500px); // 500px
widch: max(100%, 500px); // 100%

가장 작은 값, 많은 값을 나타낸다.