CSS에서의 em 단위와 여백

다음과 같은 태그가 있다고 가정해 봅시다:

html<div>
  <p>
    text
  </p>
</div>

단락의 글꼴 크기가 px로 설정되어 있다고 가정합니다:

cssp {
  font-size: 20px;
}

이 단락의 여백을 em 단위로 설정해 봅시다. 이 경우, 여백 크기는 부모 요소가 아닌 단락 자체의 글꼴 크기를 기준으로 계산됩니다:

cssp {
  font-size: 20px;
  margin: 2em;  /* 40px에 해당 */
}

이제 단락의 크기가 em로 설정되었다고 가정합니다:

cssdiv {
  font-size: 20px;
}
p {
  font-size: 2em; /* 40px에 해당 */
}

요소에 margin을 다시 설정해 봅시다. 이 경우, 여백은 여전히 요소 자체의 현재 글꼴 크기를 기준으로 계산됩니다. 이때 글꼴 크기 자체는 부모 요소를 기준으로 계산됩니다:

cssdiv {
  font-size: 20px;
}
p {
  font-size: 2em; /* 40px에 해당 */
  margin: 2em;    /* 80px에 해당 */
}

실습 문제

다음 HTML 코드를 바탕으로 문제를 풀어보겠습니다:

html<section>
  <div>
    <p>
      text
    </p>
  </div>
</section>

Задание 1

다음 코드를 실행한 결과, div 태그의 글꼴 크기와 px 단위의 여백이 어떻게 될지 결정하십시오:

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 2em;
}

Задание 2

다음 코드를 실행한 결과, div 태그의 글꼴 크기와 px 단위의 여백이 어떻게 될지 결정하십시오:

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 3em;
}

Задание 3

다음 코드를 실행한 결과, div 태그의 글꼴 크기와 px 단위의 여백이 어떻게 될지 결정하십시오:

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 0.5em;
}

Задание 4

다음 코드를 실행한 결과, p 태그의 글꼴 크기와 px 단위의 여백이 어떻게 될지 결정하십시오:

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
}
p {
  font-size: 2em;
  margin: 2em;
}

Задание 5

다음 코드를 실행한 결과, p 태그의 글꼴 크기와 px 단위의 여백이 어떻게 될지 결정하십시오:

csssection {
  font-size: 10px;
}
div {
  font-size: 1.5em;
}
p {
  font-size: 1em;
  margin: 1.5em;
}