[CSS] 단위(px, %, vh, vm, rem etc.)

 

절대 단위

: 다른 요소들의 크기와 상관없이 항상 동일한 값

: px와 pt가 대표적

: 화면 크기 변해도 항상 동일한 크기이다.

 

 

상대단위

: 브라우저를 기준으로 폰트 사이즈가 변화

: %, em, rem, vw, vh 등이 있다.

: font-size의 디폴트 값은 100%이다.

 

vw & vh (viewport width & viewport height)

: viewport는 웹사이트에서 보여지는 영역으로 1vw = 1%와 같다.

: 화면 전체 너비와 높이는 100vw, 100vh이다.

: 50vh는 전체 화면 높이의 50%

 

 

vmin & vmax

• vmin: 화면에서 너비와 높이 중 짧은 길이를 기준으로 상대 길이 결정
• vmax: 화면에서 너비와 높이 중 긴 길이를 기준으로 상대 길이 결정

만약 높이가 20vmax이고 높이가 너비보다 길다면, 높이의 20%의 길이가 된다.

 

 

em

: 부모 요소의 폰트 사이즈를 기준으로 자식 요소의 폰트 사이즈가 결정

.parent{
	font-size: 2em; /* 2 * 16 = 32px */
}

.child{
	font-size: 3em; /* parent의 3배 = 96px */
}

1em = 16px

 

 

rem

: 가장 부모 요소인 html 100%를 기준으로 그 아래 요소들의 폰트 사이즈가 결정

: 취상위 요소의 폰트 사이즈가 기준인 단위

: html 디폴트 폰트 사이즈는 16px

 

.parent{
	font-size: 3rem;	/* 16 * 3 = 48px */
}

.child{
	font-size: 1rem;	/* 16 * 1 = 16px */
}

rem은 최상위 요소에 상대적인 크기가 변경되므로 더 광범위하여 접근성이 더 선호된다.

이때 html의 폰트 사이즈가 변하면 rem으로 설정한 다른 폰트 사이즈 크기도 상대적으로 이에 비례해 변한다.