본문으로 건너뛰기
실습하기

em과 rem

px외에도 em과 rem을 활용해 요소의 길이를 지정할 수 있습니다.


em 단위​

em은 CSS에서 사용되는 상대적인 길이 단위입니다. 상대적이라는 것은 길이의 값이 다른 값에 기반한다는 것을 의미합니다.

em 단위의 크기는 해당 요소의 부모 요소(상위 요소)의 크기에 따라 결정됩니다.

만약 부모 요소의 글꼴 크기가 16px이면, 그 안의 자식 요소에서 1em은 16px을 의미합니다.


예제:​

CSS
.parent {
  font-size: 16px;
}

.child {
  font-size: 2em; /* 32px과 같습니다. (16px * 2) */
}

rem 단위​

rem은 "root em"의 줄임말로 CSS에서 사용되는 상대적 길이 단위입니다.

em과 마찬가지로 상대적인 단위이지만 em이 해당 요소의 부모 요소의 크기에 상대적이라는 점과 달리, rem은 루트 요소 (일반적으로 <html> 요소)의 크기에 상대적입니다.

예를 들어 웹페이지 기본 글꼴 크기가 16px이면, 1rem은 어디에서든 16px을 의미합니다.


예제​

CSS
html {
  font-size: 16px;
}

.box {
  width: 10rem; /* 이것은 160px과 같습니다. (16px * 10) */
}

요약​

  • em은 부모 요소의 크기에 따라 크기가 결정됩니다.

  • rem은 웹페이지 전체의 기본 크기에 따라 크기가 결정됩니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!