css 단위

css 단위

px

가장 기본되는 단위

%

부모요소가 기준이 되어 자식의 사이즈를 결정하게 됨

em

자신의 폰트 사이즈(font-size) 를 기준으로 곱하기 한 값.

.container{
	width:60em;
	font-size:10px;
    /* width 는 600px이 됨*/
}

자신의 폰트사이즈가 px로 지정이 되지 않으면 상위 폰트사이즈를 상속받게 됨.

• 1em = 상위 지정된 font-size의 px값

rem

root em 의 약어.

가장 조상요소의 font-size에만 영향 받는 em

em을 사용했을 시 부모 노드로부터 상속되는 모든 관계를 이해하고 있어야 되기 때문에, 관리가 불편할 경우 사용

vw

viewport width

전체 화면 크기를 기준으로 가로로 몇 퍼센트 차지하는가

vh

viewport height

가로를 세로로 생각하면됨.

vmin, vmax

vmax 의 경우 기본적으로 viewport의 크기에 비례한 값을 갖지만 만약,

width:50vmax;

이렇게 있을 경우 height와 width 중 더 큰 값을 선택해 그 절반의 값만큼을 width로 쓰게된다.

vmin은 반대로 height와 width 중 더 작은 값을 선택해 그 숫자의 값만큼의 비율로 값을 갖게 된다.