[CSS] rem, em 차이

기본 개념 설명

HTML 에서는 CSS 를 이용하여 마진, 폰트 크기를 지정할 때 px, % 단위를 사용할 수도 있지만, 상대적인 값을 표현할 때는 rem, em 단위를 사용한다.

 

rem

rem 은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미한다.

rem의 기준이 되는 값은 최상위 요소(html 태그)에서 지정된 font-size를 의미한다.

html { font-size: 16px; }
div {
  font-size: 2rem;  /* 32px 이라는 뜻 */
  margin-left: 0.5rem /* 8px 이라는 뜻 */
  padding: 1rem /* 16px 이라는 뜻 */
}

 

 

em

em는 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미한다.

rem이랑 정의는 같은데, 기준이 되는 값은 현재 스타일의 지정 요소의 font-size 를 의미한다.

div { font-size: 16px; }
div {
  font-size: 2rem;  /* 32px 이라는 뜻 */
  margin-left: 0.5rem /* 8px 이라는 뜻 */
  padding: 1rem /* 16px 이라는 뜻 */
}

 

rem과  em의 차이점

rem은 최상위 요소(html 태그)의 font-size를 기준으로 하고, em은 부모요소로부터 상속받은 font-size를 기준으로 한다.

html { font-size: 16px; } /* 16px */
body { font-size: 2em; } /* 16 * 2 = 32px */
div.container { font-size: 2em; } /* 16 * 2 * 2 = 64px */
div.content1 { font-size: 2rem; } /* (html의 )16 * 2 = 32px */
div.content2 { font-size: 2em; }