CSS 단위

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

 

부모요소에 따라서 바뀔 때

%나 em

 

브라우저에 따라서 바뀔 때

vw나 vh

rem

 

미디어쿼리에서 min-width나 max-width의 값도 rem을 사용하는 것을 추천

---

요소의 너비와 높이에 따라 바뀔 때

%나 vw vh

 

폰트의 크기에 따라 바뀔 때

em나 rem

---

em과 rem의 사용

 

어떤 컴포넌트를 어디에 사용하는지에 따라 크기가 유동적으로 변해야한다면 em

(좋아요 버튼을 body에도 쓰면서, article의 자식요소로도 사용할 때)

 

어디서 사용하든 동일한 크기를 원할 땐 rem

---

depth가 많은 복잡한 코드에서 em을 사용하면 크기 계산이 어려움

> 폰트 사이즈는 rem 추천

 

반응형에서 폰트 사이즈가 줄어들면 패딩도 맞춰서 줄어들 수 있도록 패딩에 em 추천

하지만 제목과 본문이 폰트 크기가 다를 때는 폰트 크기 차이때문에 패딩 좌우 정렬이 틀어짐

> 그래서 패딩의 상하는 em으로 하되 좌우는 rem으로 맞춰주면 정렬 가능함

---

PXtoEM

px을 em으로 계산해주는 사이트

PXtoEM.com: PX to EM conversion made simple.