[CSS] em과 rem
em과 rem은 CSS의 상대 단위이다.
'font-size' 속성을 기준으로 상대적인 크기를 나타낸다.
앞에 숫자를 붙여 1em, 1rem의 형태로 사용하고 숫자는 기준이 되는 'font-size'의 배수가 된다.
(예를 들어 2em은 'font-size'의 2배 크기를 의미한다.)
em과 rem은 어느 요소의 'font-size'를 기준으로 하는지에 따라 차이가 나타난다.
em
See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.
'em'은 각 요소의 'font-size'에 상대적이다.
'padding'을 동일하게 설정했는데 각 요소의 'font-size'에 맞춰 다르게 나타났다.
'font-size'를 설정하지 않으면 부모 요소의 것을 상속하기 때문에 'em'도 자동적으로 부모 요소의 'font-size'를 기준으로 한다.
이 특징을 바탕으로 요소의 'font-size'도 'em'으로 설정이 가능하다.
See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.
em은 부모 요소의 'font-size'를 기반으로 하기 때문에 아래로 내려올수록 중첩되어 나타난다.
이를 방지할 수 있는 것이 'rem'이다.
rem
'rem'에서 'r'은 'root'를 나타낸다.
'rem'은 최상위 요소의 'font-size'에 상대적이다.
<head>와 <body>를 감싸는 <html> 요소를 고정적으로 기반한다.
See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.
'rem'은 기준으로 하는 요소가 달라지지 않기 때문에 동일한 rem 값에 대하여 동일한 크기를 나타낸다.
'Web > CSS' 카테고리의 다른 글
| [CSS] 다양한 폰트(글꼴) 사용하기 (feat. Google Fonts) (1) | 2023.11.17 |
|---|---|
| [CSS] transition 애니메이션 부여하기 (1) | 2023.11.13 |
| [CSS] 투명도 설정 (feat. opacity, rgba) (1) | 2023.11.07 |
| [CSS] %, 백분율 단위 (CSS percentage) (1) | 2023.11.03 |
| [CSS] 적용 우선순위 (16) | 2023.11.02 |
