▶ em
- em은 현재 자기 자신의 font-size의 영향을 받음.
- .container의 width는 60em인데 해당 font-size가 10px이니 10*60=600px에 해당.
- em 사용 시 font-size의 영향을 받고 font-size 조정 시에는 조정된 사이즈의 영향을 받는 모든 부분이 같이 변경됨.
- 특정한 조상 요소에 절대적인 값을 입력해 놓고 이하는 그 값에 맞게 변경할 때 em을 많이 사용함.
- em은 중간중간에 조상요소를 타고 올라가면서 영향을 받는 관계를 모두 이해해야 함(em의 단점).
- 타고 내려오다 중간에 font-size를 지정하기 애매한 구간이 생기면 이 또한 em 단위에 영향을 주기 때문에 관리에 어려움.
- 그래서 쓸 수 있는 단위가 rem.
▶ rem
- rem은 root em을 의미.
- 중간 단계를 다 건너뛰고 가장 조상 요소는 <html>.
- rem은 html에 지정된 font-size의 영향만을 받음.
- .child의 width만 200px로 변경하고 싶은 경우.
- <html>의 font-size는 10, .child의 width는 20rem;
- 중간의 요소들은 아무런 영향을 받지 않음.
- 만약 font-size가 최종 단계에서 관리하기 용이하게 <html>에서는 10px을 이용하더라도 문서 내의 텍스트를 16px로 유지하고 싶다면 <body>에 16px을 지정해서 원래대로 되돌려 놓도록.
- 중간에 16px로 덮어씌어지기 때문에 rem 단위에는 아무런 영향을 주지 않음(rem의 장점).
'CSS' 카테고리의 다른 글
| [CSS] 단위(4) - vmax, vmin (0) | 2020.09.07 |
|---|---|
| [CSS] 단위(3) - vw, vh (0) | 2020.09.07 |
| [CSS] 단위(1) - px, % (0) | 2020.09.07 |
| [CSS] Reset (0) | 2020.09.07 |
| [CSS] 상속 (0) | 2020.09.03 |
