TIL 반응형 레이아웃을 위한 units : rem, em, v*, %

본 글은 드림코딩엘리 강의 시청 후 정리한 내용입니다.

✍️ 들어가며

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