CSS | 사이즈 정리 px, rem, em, vh, vw, vmin, vmax
정라잇 |
PX
픽셀은 기본으로 사용되는 단위입니다. 크기가 고정되어 있기 때문에 다른 단위의 기준이 됩니다.
em
<style>
.parent { font-size : 10px }
.child { font-size : 1.5em }
</style>
<div class="parent">
부모요소
<div class="child">자식요소</div>
</div>부모 요소를 기준으로 자식 요소의 크기를 결정합니다. 1.5em 은 10px * 1.5 가 적용되어 15px 로 변환됩니다.
rem
<style>
html { font-size : 10px }
div { font-size : 1.5rem }
</style>
<div>적용</div>최상위 HTML 태그를 기준으로 요소 크기를 결정합니다.
1.5rem 은 10px * 1.5 가 적용되어 15px 로 변환됩니다. rem의 r은 root : 최상위를 의미합니다.
일반적으로 최상위는 html 태그입니다. 사이즈를 정확하게 조절할 수 있기 때문에 폰트 뿐만 아니라 그리드 속성에서도 사용할 수 있습니다.
vw , vh
뷰포트에 맞게 너비를 비율로 설정할 수 있습니다vh는 화면의 높이, vw는 화면의 너비를 비율로 표현합니다. (너비 1,000px = 100vw)
최대 높이값을 제작할 때 height: 100vh 만 입력하면 아주 간단하게 구현이 가능합니다. 이 방법은 너비가 다르더라도 비율을 유지할 수 있기 때문에 데스크탑과 모바일 환경을 제작할 때 사용됩니다.
vmin , vmax
가로 세로 기준으로, 짧은 쪽이 vmin 긴 쪽이 vmax 로 적용됩니다.
vmin은 익스플로러 9 이상에서 vm 이라는 이름으로 적용이 가능합니다. vmax는 ie 에서 지원되지 않습니다.