.png)
본 글은 드림코딩엘리 강의 시청 후 정리한 내용입니다.
✍️ 들어가며
1,2차 프로젝트를 하며 나름 반응형 레이아웃에 익숙해졌다 생각했지만, 단위에 대한 이해없이 rem만을 사용해왔었다.
적재적소에 알맞은 단위를 사용하는 것이 굉장히 중요하다는 것을 깨달은 후
단위에 대한 개념을 다시 정리해보고자 한다.
📏 Absolute length units
📏 모니터에서 표현되는 가장 작은 단위 px
- px은 absolute lenght units 중 가장 많이 사용되는 unit이다.
- 절대적이라는 점에서, 컨테이너의 크기와 상관없이 고정된다.
- 즉, 다양한 스크린 사이즈에 맞춰 적절한 크기의 UI를 그릴 수 없다는 단점이 있다.
- 뿐만아니라 사용자가 폰트 사이즈를 따로 설정하더라도 폰트크기가 고정되어 변하지 않는다.
📐 Relative length units
Summary
- em : 부모의 폰트 사이즈에 의해 결정
- rem : 루트의 폰트 사이즈에 의해 결정
- vw : 뷰포트의 너비에 대한 1%
- vh: 뷰포트의 높이에 대한 1%
- vmin: 높이와 너비 중에 작은 값에 대한 상대 값
-> if desktop, vh 기준- vmax: 높이와 너비 중에 큰 값에 대한 상대 값
-> if mobile, vw 기준- % : 부모 요소의 상대적 크기
📐 em과 rem
<div class='parent'>
Parent
<div class='child'>Child</div>
</div>em
.parent{
font-size: 8em;
// default size는 16px
// 8em = 16 * 8 = 128px
// 8em = 800%
}
.child{
font-size: 0.5em;
// 부모의 0.5배인, 64px
// = 50%
}-> em은 부모기준으로 계산되기에, 중첩이 많이 될 수록 직관적으로 em을 이해하기 어려워진다.
rem
.parent{
font-size: 8em;
// default size는 16px
// 8em = 16 * 8 = 128px
}
.child{
font-size: 0.5em;
// 16 * 0.5 = 8px
}📐 v*
vw
스크린 너비 기준
-> 100vw : 꽉찬 너비
-> 50vw : 스크린 너비의 반절
vh
스크린 너비 기준
-> 100vw : 꽉찬 높이
-> 50vw : 스크린 높이의 반절
vmin & vmax
- vmin : 너비와 높이 중에 작은 값에 대한 기준값
- vmax : 너비와 높이 중에 큰 값에 대한 기준값
1번일때, a = 50vmax, b = 50vmin
2번일땐, a = 50vmin, b = 50vmax
🤔 언제 어떻게 사용하나?
📌 부모 또는 브라우저 기준
- 부모 기준으로 변해야한다면, % 또는 em
- 브라우저에 따라 변해야한다면, v* 또는 rem
📌 영역 또는 폰트 사이즈 기준
- box(영역 기준) → %, v*
- font → em, rem
✔ 컴포넌트 사이즈가 어떻게 되길 원하는지에 따라
- 좋아요 버튼 컴포넌트를 rem 단위로 만들었다면, 버튼이 어디에 속해있던 동일한 사이즈로 고정된다.
- em 단위를 사용했다면, 속해있는 곳에 따라 사이즈가 결정된다.
- 컴포넌트의 위치에 상관없이 사이즈가 고정되야한다면, rem
- 위치에 따라 사이즈가 조정되어야 한다면, em
✔ 컨텐츠 영역은 % 또는 v*가 반응형 레이아웃에 적절
- rem이나 em은 font-size를 기준으로 움직이기에 영역을 위한 단위로는 적절치 못하다.
✔ em과 rem의 혼용 (best✨)
- 만약 양 옆의 padding을 em으로 설정하면, font 사이즈에 따라 다른 값이 계산되기에 텍스트의 정렬을 맞출수 없다. 이때 rem으로 양 옆 padding을 고정시키면 같은 기준인 root에 대해 계산되기에 정렬이 가능하다.
✔ 미디어 쿼리에서도 고정된 px보다는 rem을 사용하기
- 고정된 px값을 주기보다 rem을 사용하면 보다 유동적인 레이아웃을 만들 수 있다.
✨ 결론
컨텐츠 영역은 % 또는 v*으로!
font의 경우, 루트 기준이라면 rem을, 부모 기준이라면 em을 사용하자!!
끝✌️
참고
프론트엔드 필수 반응형 CSS 단위 총정리 : https://www.youtube.com/watch?v=7Z3t1OWOpHo
프론트엔드 필수 반응형 CSS 단위 em 과 rem : https://www.youtube.com/watch?v=xWMKz9NCD0k
