[CSS] 반응형 웹을 만들기 위한 상대적인 유닛 (em, rem)

 

em

타이포그래피에서 현재의 지정된 포인트 사이즈를 나타내는 단위

즉, 현재 폰트 사이즈를 나타내는 단위

폰트 패밀리에 따라서 사용자에게 보이는 텍스트의 크기가 달라질 수 있는데

em은 선택된 폰트에 전혀 상관없이 항상 고정된 폰트 사이즈를 가짐

폰트 사이즈를 따로 지정하지 않으면 16px로 지정되는데 여기서 폰트 사이즈를 8em으로 지정하면

16 * 8 = 128px로 브라우저에 표기된다. 즉, 800%와 같다.

* 부모의 값에 상대적으로 곱해진다.

예를 들어, root가 16px이고 parent가 8em, parent 안에 있는 child가 0.5 em이면 child는 16 * 8 * 0.5 = 64px이 된다.

 

rem

em과 비슷하지만 부모가 아닌 루트에 지정된 폰트 사이즈에 따라서 크기가 결정된다.

예를 들어, root가 16px이고 parent가 8em, parent 안에 있는 child가 0.5 em이면 child는 16 * 0.5 = 8px이 된다.

 

사용 방향

부모를 기준으로 상대적으로 지정하려면 %나 em, 브라우저를 기준으로 상대적으로 지정하려면 v*나 rem 사용

요소의 너비나 높이에 따라서 사이즈가 변경이 되어야 한다면 % 나 v*(vw, vh), 폰트 사이즈에 따라 사이즈가 변경이 되어야 한다면 em, rem 사용

 

em과 rem

나의 컴포넌트가 어디에서든 사이즈가 똑같아야 하면 rem, 나의 컴포넌트가 부모요소에 따라 사이즈가 유동적으로 변경되어야 하면 em 사용

코드를 보고 직관적으로 판단하기 쉬운건 rem

 

관련 사이트

PXtoEM

PXtoEM.com: PX to EM conversion made simple.