em
타이포그래피의 단위로서 'font-size'와 동일하다. 선택자의 font-size가 20px이라면 1em은 20px이 된다.
html의 font-size가 16px로 설정되어 있기 때문에 별다른 설정이 없을 경우 이를 상속받는 h1이 있다고 가정할 때, h1의 font-size가 2em이라면 이는 32px로 계산된다.
html { font-size: 100%;}
h1 { font-size: 2em; }
em은 font-size 외에 다른 프로퍼티들을 위한 값으로 사용할 수도 있다. margin과 padding이 보통 em 단위로 사이징하는 대표적인 프로터피들이다.
h1 {
font-size: 2em;
margin-bottom: 1em;
}
p {
font-size: 1em;
margin-bottom: 1em;
}
h1
> font-size : 2em (1em = 16px)
> margin-bottom: 1em (1em = 32px)
p
> font-size: 1em (1em = 16px)
> margin-bottom: 1em (1em=16px)
1em은 현재의 font-size를 의미한다. 그렇기 때문에 2em으로 font-size가 세팅되어 다른 프로퍼티(margin-bottom) 에서 1em을 font-size인 2em, 즉 32px로 계산하여 margin-bottom은 32px과 동일한 값을 가진다.
rem
rem은 루트의 em을 의미한다. 즉 1em은 <html>의 font-size와 항상 동일하다.
h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
p {
font-size: 1rem;
margin-bottom: 1rem;
}
h1
> font-size : 2rem (1rem = 16px)
> margin-bottom: 1rem (1rem = 16px)
p
> font-size: 1rem (1rem = 16px)
> margin-bottom: 1rem (1rem=16px)
html의 font-size를 따로 변경하지 않는다면 h1, h2, p 등의 1rem 값은 16px로 세팅된다. html에서 font-size 값을 변경하게 될 경우 h1, h2, p 등도 항상 동일한 값을 가지게 된다.
원문: REM vs EM – The Great Debate
'HTML > Day39' 카테고리의 다른 글
| [HTML] HTML 요소의 크기 (height & width) (0) | 2022.01.02 |
|---|---|
| [HTML] float 속성 & clear 속성 & overflow 속성 (0) | 2022.01.02 |
| [HTML] 부정 선택자 (0) | 2022.01.02 |
| [HTML] 링크 선택자 (0) | 2022.01.02 |
| [HTML]문자 선택자 (0) | 2022.01.02 |