-
CSS 상대단위 rem, em 알아보기 & viewport 에서의 단위 vw, vh, vmin, vmax 알아보기Web-app/CSS 2023. 10. 13. 21:03728x90
rem, em
rem (root em)
root element의 font size를 나타내는 단위로, 1rem은 html element의 font size와 동일.
일반적으로 16px이 default 값으로, 브라우저의 글꼴 크기 설정에 따라 1rem 의 값은 달라지게 됩니다.
크롬에서 설정 페이지 크롬에서 설정 페이지를 들어갔을 때 일반적인 글꼴 크기는 중간, 권장상태로 되어 있습니다.
이 중간 상태에서 font-size값은 16px.
만약 설정을 아주 크게로 변경하면 24px로 바뀝니다.
즉 이때 1rem은 24px이 됩니다.
크롬에서 글꼴 크기 설정에 다른 font-size default 값은 다음과 같습니다.
글꼴 크기 설정 아주작게 작게 중간 크게 아주크게 1rem 10px 12px 16px 20px 24px em
rem의 경우 root element의 font-size에 상대적이었으나, em은 자신이 속한 element의 font-size에 상대적입니다.
예시를 위해 이런 코드를 짜보았습니다. detail1안에 detail2안에 detail3가 있습니다.
<div class="detail" id="detail1"> 오늘은 다카마쓰에서 사온 치쿠세이 우동 밀키트를 먹어보았습니다 <div class="detail" id="detail2">면만드는 아조씨 친절하셨는데 <div class="detail" id="detail3">추억이 새록새록 하고만요</div> </div> </div>브라우저 폰트 크기 설정을 중간으로 해준 상태에서 detail class를 2rem으로 설정하고, detail2, detail3를 각각 1.1em, 0.5em으로 설정해주었습니다.
.detail{ font-size: 2rem; } .detail #detail2{ font-size: 1.1em; } .detail #detail3{ font-size: 0.5em; }이때의 detail1, detail2, detail3의 font-size는 어떻게 될까요?!
detail 전체 class를 2rem이므로, 중간 폰트 16px x 2 = 32px로 설정이 되고,
밑에 child detail2의 경우 1.1em으로 설정되어 있으므로, parent의 font-size 32px x 1.1 = 35.2px이 됩니다.
detail2의 child3의 경우 0.5em으로 설정되어 있으므로, parent인 detail2의 font-size 35.2px x 0.5 = 17.6px으로 설정됩니다.
즉 em은 parent의 크기에 상대적으로 반응하게 됩니다.
따라서 em의 경우 parent와의 관계를 따져서 사용해야 합니다.
rem과 em 사용
font-size또는 padding, margin 에 이용하면 브라우저의 폰트 크기 설정에 따라 반응할 수 있는 홈페이지를 만들 수 있을 것입니다.
viewport 기준 단위 vw, vh, vmin, vmax
vw (viewport width), vh (viewport height)
현재 보고 있는 스크린 화면 (viewport)을 기준으로 width와 height를 정하는 단위
위 예시에서 div class =test 를 하나 더 넣어주어 실험을 해보았습니다.
<body> <div class="nav">navigation bar</div> <div class="test"></div> <div class="container"></div> <div class="content__container"> <div class="content" id="content1">content <div class="detail" id="detail1"> 오늘은 다카마쓰에서 사온 치쿠세이 우동 밀키트를 먹어보았습니다 <div class="detail" id="detail2">면만드는 아조씨 친절하셨는데 <div class="detail" id="detail3">추억이 새록새록 하고만요</div> </div> </div> </div> <div class="content" id="content2">content</div> </div> </body>.test{ position: fixed; background: rgba(0,0,0,0.5); width: 100vw; height: 100vh; z-index: 100; }
position:fixed; 반투명한 검정 레이어가 덮여씌워졌습니다. position property가 fixed이기 때문에 스크롤을 내려도 viewport를 기준으로 채워지기 때문에 깔끔하게 채워집니다.
position:absolute; 반면 position만 absolute로 변경하면 스크롤을 내려도 밑에는 덮히지 않습니다.
vmin, vmax
vmin의 경우 viewport의 width, height 중 더 작은 값이 적용됩니다.
vmax의 경우 viewport의 width, height 중 더 큰 값이 적용됩니다.
예시를 위해 아까 test class의 width, height 값을 다음과 같이 바꿔주었습니다.
.test{ position: fixed; background: rgba(0,0,0,0.5); width: 90vmin; height: 60vh; z-index: 100; }
두 경우 모두 height는 viewport의 60% 정도 차지하게 되고,
Screen size 732 x 931 px의 경우 가로가 세로보다 짧기 때문에 width는 가로를 기준으로 값이 정해집니다. (732 x 0.9 = 658.8px)
Screen size 1553 x 931 px의 경우 세로가 가로보다 짧기 때문에 width는 세로를 기준으로 값이 정해집니다. (931 x 0.9 = 837.9px)
Screen size가 931 x 931를 기점으로 width가 고정되거나 크키가 변하게 됩니다.
Reference
Rem in CSS: Understanding and Using rem Units — SitePoint
Adrian Sandu explains the purpose and advantages of rem units, demonstrating ways to use em and rem units in CSS layouts.
www.sitepoint.com
728x90'Web-app > CSS' 카테고리의 다른 글
CSS display flex에 대해 알아보기 (0) 2023.10.27 CSS font 중요한 property에 대해 알아보기 (0) 2023.10.22 CSS background 에 image 넣기 & 옵션 설정하기 (0) 2023.10.09 CSS property float와 clear 알아보기 (0) 2023.10.09 CSS property overflow 알아보기 & 실습 (0) 2023.10.08