[CSS] EM과 REM의 차이

EM과 REM

고정적인 값이 아닌 상대적인 값을 표현해주어서 EM과 REM을 사용한다.

 

 

---

 

🔎 REM

페이지의 최상위 요소인 HTML 요소의 폰트 크기를 기준으로 크기를 정한다.

font-size: 11rem;

 

💨 REM 장점

상속에 상관없이 일괄된 크기를 반환해준다.

따라서 별다른 번거로움 없이 반응형 크기 사용이 가능하여 기본적으로 REM을 사용하면 된다.

 

VS

 

🔎 EM

상위 요소의 폰트 크기를 기준으로 크기를 정한다.

font-size: 11em;

 

💨 EM 장점

상속에 의하여 크기를 반환해준다.

따라서 상속을 고려하여 신중히 사용해주면 보다 디테일하게 구현 가능하다.

 

 

 

 

REM과 EM을 사용하면 반응형 웹사이트를 손쉽게 구현할 수 있다.

상황에 맞게 적절히 사용해주자

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!