lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter2Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>em, rem 예시</title>
  </head>
  <body>
    <div class="parent">
      부모 텍스트
      <div class="child">자식 텍스트</div>
    </div>
    <div class="element">HTML 기준 텍스트</div>
  </body>
</html>

# em과 rem

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

<br />

## `em` 단위

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

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

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

<br />

## 예제:

```css title="CSS"
.parent {
  font-size: 16px;
}

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

<br />

## `rem` 단위

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

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

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

<br />

### 예제

```css title="CSS"
html {
  font-size: 16px;
}

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

<br />

## 요약

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

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

em과 rem

em 단위

예제:

rem 단위

예제

요약

`em` 단위

`rem` 단위