1seul357
em과 rem 본문
css를 구현할 때는 항상 px을 썼었는데, em과 rem에 대해서도 공부를 해봐야겠다는 생각이 들었다. px과 em, rem은 절대 단위와 상대 단위의 차이가 있다는 점은 알고 있었지만 em과 rem의 차이는 잘 모르고 있어서 이번주 포스팅 주제로 정했다.
절대 단위
절대 단위는 고정된 길이를 의미하는 단위이다. CSS에서의 px는 절대 단위이다. 고정형 웹이나 컨텐츠의 크기가 변경되어서는 안되는 경우, 주로 px를 사용한다.
상대 단위
상대 단위란 고정되지 않은 길이를 의미하는 단위이다. 화면의 크기 혹은 부모 요소의 폰트 크기를 기준으로 계산된다. 예를 들어서 부모 요소의 폰트 사이즈가 8px이라면 1em은 8px, 2em은 16px, 3em은 24px이 된다. 만약 부모 요소의 폰트 사이즈가 지정되지 않았다면 기본 값인 16px을 기준으로 계산된다. 상대 단위로는 em과 rem뿐만 아니라 %, vw, vh 등이 포함된다. 반응형 웹을 구현하기 위해서는 상대 단위를 사용하는 것이 좋다.
em
em은 폰트 크기 값에 비례해서 결정되는 상대 단위이다. 해당 요소의 폰트 사이즈에 영향을 받으며 만약 해당 요소의 폰트 사이즈가 지정되어 있지 않다면 부모 요소의 폰트 사이즈를 기준으로 한다.
해당 요소의 폰트 사이즈가 20px인 경우
- 1em = 20px * 1 = 20px
- 1.5em = 20px * 1.5 = 30px
- 2em = 20px * 2 = 40px
- 5em = 20px * 5 = 100px
rem
rem은 html에서 최상위 요소인 <html>의 폰트 사이즈를 기준으로 크기를 지정한다.
html의 폰트 사이즈가 16px인 경우
- 1rem = 16px * 1 = 16px
- 1.5rem = 16px * 1.5 = 24px
- 10rem = 16px * 10 = 160px
- 20rem = 16px * 20 = 320px
html {
font-size: 16px;
}
div {
font-size: 8px;
width: 2rem;
height: 3em;
}<html>의 폰트 사이즈는 16px, <div> 요소의 폰트 사이즈는 8px인 웹이 있다. 이때, <div>의 width 값은 rem으로 지정되어 있기 때문에 <html>의 폰트 사이즈에 영향을 받는다. 그러므로 <div>의 넓이는 32px이 된다. <div>의 height 값은 em으로 지정되어 있다. em은 해당 요소의 폰트 사이즈에 영향을 받고, 요소의 폰트 사이즈가 8px이므로 높이는 24px이 된다.
❗ 만약 해당 요소에 폰트 사이즈가 없다면 div의 높이는 얼마일까?!
요소에 폰트 사이즈가 지정되어 있지 않다면 상위 요소인 <html>의 폰트 사이즈에 영향을 받는다. 그러므로 3em은 48px이 된다.
em과 rem 어떤 것을 써야 할까?
rem을 사용하는 것이 좋다. em은 해당 요소의 폰트 사이즈가 없다면 부모 요소의 폰트 사이즈를 기준으로 계산되는데, 태그가 복잡할 경우 예측하기 어렵기 때문이다. 한단계 위의 부모 요소의 폰트 사이즈가 없다면 폰트 사이즈가 있는 부모 요소를 찾아서 코드를 작성해야 하기 때문에 유지 보수도 힘들어질 수 있기 때문에 rem을 사용하는 것을 추천한다.
'TIL' 카테고리의 다른 글
| Viewport (2) | 2024.11.29 |
|---|---|
| MSW (Mock Service Worker) (0) | 2024.11.12 |
| Semantic Tag (0) | 2024.10.29 |
| dependencies와 devDependencies (1) | 2024.10.22 |
| Query Keys Factory (0) | 2024.10.18 |
