CSS단위 em 과 rem 어떤 것을 써야 할까?

CSS 단위 종류

px 단위

• 컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 고정된 값으로 유지된다.

em 단위

• 부모 요소의 사이즈에 의하여 상대적으로 결정된다.
• Em 단위는 폰트 종류와 상관없이 항상 고정된 폰트 사이즈를 가지고 있다.

[예시]
기본 font-size = 16px
1em = 16px
부모 요소가 8em = 128px
자식 요소 0.5em = 64px

📍이유 : em 단위는 부모요소의 사이즈에 의해 결정되기 때문에 부모요소가 8em 으로 128px 이면, 자식요소는 부모요소의 0.5 배인 64px을 가지게 된다. 기준이 자신의 부모요소 !

rem 단위

• root em : 루트 요소에 지정된 폰트 사이즈에 따라 크기가 결정된다.

[예시]
기본 font-size = 16px
8 rem = 128px
0.5 rem = 8px

📍이유 : html 기본 사이즈가 16px로 지정되어 있을 때, 8rem은 루트 요소의 8배인 128px이고, 0.5rem은 루트요소의 0.5배인 8px 이다.

언제 어떤 단위를 사용해야 할까?

1. 부모 요소에 따라 크기가 정해져야 할 때

• %, em 단위 사용

2. 부모와 상관없이 브라우저 사이즈에 따라 크기가 정해져야 할 때

• vh, vw, rem 단위 사용

3. 요소의 너비와 높이에 따라 사이즈 변경이 되어야 할 때

• %, vh, vw 단위 사용

4. 폰트 사이즈에 따라서 사이즈 변경이 되어야 할 때

• em, rem 단위 사용