lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter2Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# em과 rem

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

 

## em 단위

`em`은 CSS에서 사용되는 상대적인 길이 단위입니다.

상대적이라는 것은 길이의 값이 다른 값에 기반한다는 것을 의미합니다.

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

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

 

```css title="px, em 단위 비교"
.parent {
 font-size: 16px;
}

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

 

## rem 단위

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

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

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

 

### 예제

```css title="rem 단위 예시"
html {
 font-size: 16px;
}

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

 

요약하면, `em`은 **부모 요소**의 크기에 따라 크기가 결정됩니다.

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

`rem` 단위는 부모 요소가 아닌, 루트 요소(일반적으로 `<html>` 요소)의 크기에 상대적인 단위입니다. 반면 `em` 단위는 부모 요소의 크기에 따라 결정됩니다.

### `rem` 단위는 부모 요소의 크기에 상대적인 단위이다.

em과 rem

em 단위

rem 단위

예제

rem 단위는 부모 요소의 크기에 상대적인 단위이다.

`rem` 단위는 부모 요소의 크기에 상대적인 단위이다.