본 글은 드림코딩엘리 강의 시청 후 정리한 내용입니다.
1,2차 프로젝트를 하며 나름 반응형 레이아웃에 익숙해졌다 생각했지만, 단위에 대한 이해없이 rem만을 사용해왔었다.
적재적소에 알맞은 단위를 사용하는 것이 굉장히 중요하다는 것을 깨달은 후
단위에 대한 개념을 다시 정리해보고자 한다.
Summary
- em : 부모의 폰트 사이즈에 의해 결정
- rem : 루트의 폰트 사이즈에 의해 결정
- vw : 뷰포트의 너비에 대한 1%
- vh: 뷰포트의 높이에 대한 1%
- vmin: 높이와 너비 중에 작은 값에 대한 상대 값
-> if desktop, vh 기준- vmax: 높이와 너비 중에 큰 값에 대한 상대 값
-> if mobile, vw 기준- % : 부모 요소의 상대적 크기
<div class='parent'>
Parent
<div class='child'>Child</div>
</div>
.parent{
font-size: 8em;
// default size는 16px
// 8em = 16 * 8 = 128px
// 8em = 800%
}
.child{
font-size: 0.5em;
// 부모의 0.5배인, 64px
// = 50%
}
-> em은 부모기준으로 계산되기에, 중첩이 많이 될 수록 직관적으로 em을 이해하기 어려워진다.
.parent{
font-size: 8em;
// default size는 16px
// 8em = 16 * 8 = 128px
}
.child{
font-size: 0.5em;
// 16 * 0.5 = 8px
}
스크린 너비 기준
-> 100vw : 꽉찬 너비
-> 50vw : 스크린 너비의 반절
스크린 너비 기준
-> 100vw : 꽉찬 높이
-> 50vw : 스크린 높이의 반절
📌 부모 또는 브라우저 기준
- 부모 기준으로 변해야한다면, % 또는 em
- 브라우저에 따라 변해야한다면, v* 또는 rem
📌 영역 또는 폰트 사이즈 기준
- box(영역 기준) → %, v*
- font → em, rem
- 컴포넌트의 위치에 상관없이 사이즈가 고정되야한다면, rem
- 위치에 따라 사이즈가 조정되어야 한다면, em
%
또는 v*
가 반응형 레이아웃에 적절✨ 결론
컨텐츠 영역은 % 또는 v*으로!
font의 경우, 루트 기준이라면 rem을, 부모 기준이라면 em을 사용하자!!
끝✌️
참고
프론트엔드 필수 반응형 CSS 단위 총정리 : https://www.youtube.com/watch?v=7Z3t1OWOpHo
프론트엔드 필수 반응형 CSS 단위 em 과 rem : https://www.youtube.com/watch?v=xWMKz9NCD0k