CSS

[ CSS ] Flexible 단위

원혜강 2021. 9. 16. 21:21

 

단위에 고정된 값을 부여하는 것이 아니라, 브라우저의 크기에 따라 너비 / 높이 또는 폰트의 크기를 변경할 수 있음 

 

단위 설명 예시
em   요소에 현재 적용된 폰트의 크기를 기준으로 함   2em = 현재 적용된 폰트의 크기의 2배
ch   em과 비슷한데, 특히 0을 기준으로 크기를 결정   -
rem   root 요소 (<html>)에 지정된 폰트 크기를 기준으로 함   2rem = <html>에 폰트 크기의 2배
vw   viewport 너비의 1%   10vw = 현재 브라우저 창 너비의 10%
vh   viewport 높이의 1%   10vh = 현재 브라우저 창 높이의 10%
vmin   viewport의 너비나 높이 중 작은 것의 1%   -
vmax   viewport의 너비나 높이 중 큰 것의 1%   - 
%   부모 요소에 적용되는 크기를 기준으로 함    -

 

1. vw & vh

  • viewport 너비, 높이에 근거함
  • 10vw라면 viewport 너비의 10%
  • 100vw라면 viewport를 꽉 채운다!
  • 브라우저 크기에 따라 달라짐 (유동적)

 

** vw, vh와 %의 차이점은?

vw, vh는 뷰포트 즉 브라우저 너비에 따라 결정되는 단위이다!

%는 부모요소에 영향을 받기 때문에 차이가 있다.

 

2. vmin & vmax

  • ex) width: 100px; /  height: 150px; 
  • vmin은 100px / vmax는 150px

3. rem & em

  • rem : html 요소의 폰트 크기에 따라 결정됨
  • em : 사용된 요소의 폰트 크기에 따라 결정됨 (자신보다 부모요소)

 

** em과 rem 비교해서 보기 **

<div>
	<p>원혜강 개발 블로그입니다!</p>
</div>

 

em의 경우 ↘

html { font-size: 10px; }
div { font-size: 2em; } /* 10px의 두배 = 20px */
p { font-size: 1em; } /* 부모요소인 div의 1배 = 20px */

 

rem의 경우 ↘

html { font-size: 10px; }
div { font-size: 2rem; } /* 10px의 두배 = 20px */
p { font-size: 1rem; } /* root요소인 html의 1배 = 10px */