[HTML, CSS] em과 rem

한지원·2021년 1월 6일

유튜브 '드림코딩by엘리'의 [프론트엔드 필수 반응형 CSS단위 총정리] , [프론트엔드 필수 반응형 CSS단위 em과 rem] 를 참고하여 작성한 글입니다.

반응형 CSS단위 정리

size결정 unit

absolute: px(pont size도 px로 조절)
px을 쓰면 생기는 문제: 반응형X

relative: em, ex, ch, rem, lh, vw, vh, vmin, vmax, %

em

typography에서 현재 지정된 포인트 사이즈를 나타내는 단위 (폰트 사이즈)
px를 사용하면 폰트패밀리에 따라 사용자에게 보여지는 크기가 달라지기 때문에 em을 사용해서 사용자에게 보여지는 사이즈를 고정시킨다.

1em = 16px -> parent를 기준으로 child의 em값이 상대적으로 결정된다. 즉 기본적으로 html에서 폰트 사이즈는 16px로 지정되는데 그래서 1em은 기본 사이즈를 기준으로 16px이다.

그러면 %와 같은 기능이 아닌가? 맞다.
font-size: 8em 과 font-size: 800%는 모두 부모의 폰트사이즈 8배 크기를 뜻한다.

ex

em과 다르게 지정된 폰트패밀리에 따라서 높이를 달리할 수 있다.
폰트패밀리가 지정된 소문자 x의 높이를 나타내는 단위

ch

적용된 폰트패밀리에서 숫자 0의 너비를 나타내는 단위

rem

rem의 r은 root를 나타낸다. 즉 부모를 기준으로 사이즈가 조절되는 em과 달리 root에 지정된 폰트사이즈에 따라 크기가 결정된다.
em과 rem을 썼을 때 유저가 웹 브라우저에서 화면의 크기를 변경할 시 유동적으로 반응하게 된다.

lh

line height은 아직 브라우저에서 지원되지 않는다.

v* (viewport)

vw, vh

100vw(vh): 브라우저 너비(높이)의 100%를 쓰겠다.
50vw(vh): 브라우저 너비(높이)의 50%를 쓰겠다.

vmin

브라우저의 너비와 높이 중 작은 값의 크기 지정
50vmin: 브라우저의 너비와 높이 중 더 작은 값의 50%만 쓰겠다.

vmax

브라우저의 너비와 높이 중 큰 값의 크기 지정
50vmax: 브라우저의 너비와 높이 중 더 큰 값의 50%만 쓰겠다.

%

부모 요소에 상대적으로 크기가 결정된다.

px, %, v* 정리
.parent{
  font-size = 8em;
  width: 500px;
}
.child{
  font-size: 0.5em;
  width: 50%
}
parent의 width가 500px이므로 child의 width는 parent의 50%인 250px이다.
.parent{
  font-size = 8em;
  width: 500px;
}
.child{
  font-size: 0.5em;
  width: 50vw
}
child의 width가 부모 요소의 크기와 상관 없이 브라우저에 너비에 따라 변경된다.

언제 어떤 유닛을 사용할까? - em, rem

부모요소의 사이즈에 따라 사이즈를 결정해야할 때 %, em
부모요소와 상관 없이 브라우저의 크기에 따라 반응해야할 때 v*, rem

요소(box)의 너비와 높이에 따라 사이즈를 변경해야할 때: %, v*
폰트 사이즈에 따라 사이즈가 변경되어야 할 때: em, rem

나의 컴포넌트가 페이지의 어디에서 사용되어져도 사이즈가 고정되어야될 때:rem
나의 컴포넌트가 어디에서 사용되느냐에 따라 (부모요소에 따라) 사이즈가 유동적으로 바뀌어야할 때:em