-
[HTML&CSS] px, em, rem단위HTML&CSS 2024. 1. 25. 14:27
px(pixel)
- 모니터나 스마트폰에서 하나의 화소에 해당하는 부분.
- 화면에 표시되는 가장 작은 단위
- 고정된 단위로, 크기가 변하지 않음
em
- 상대적인 단위로, 해당 단위가 사용되고 있는 요소에 의해 사이즈가 결정
- 요소에 font-size 속성이 정의되어있지 않다면 부모 요소의 사이즈를 따라감
개발자 도구로 보면 h1 태그의 폰트 사이즈가 2em으로 되어있다.
2em이 32px로 표현되어 있는데, 이는 h1태그의 부모요소인 body태그가 기본적으로 16px의 사이즈를 갖기 때문.rem
- 상대적인 단위로, 최상위 엘리먼트인 Root의 사이즈를 기준으로 사이즈가 결정
- html에서 최상위 요소는 html태그(기본적으로 16px의 사이즈를 가짐)
body태그의 폰트 사이즈를 32px로 바꾸고 em과 rem 비교해 보자.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h1>제목1</h1> <h2>제목2</h2> <p> 본문 글 <div id="em-content">em내용</div> <br> <div id="rem-content">rem내용</div> </p> </body> <style> body { font-size: 32px; } #em-content { font-size: 1em; } #rem-content { font-size: 1rem; } </style> </html>
em단위는 바뀐 body태그의 사이즈(32px)를 따라가고, rem단위는 그대로 html태그의 사이즈(16px)를 따라감
'HTML&CSS' 카테고리의 다른 글
[CSS] display: flex - 2 (basis, grow, shrink) (0) 2024.02.29 [CSS] display: flex - 1 (0) 2024.02.26 [CSS] Display 속성 (0) 2024.02.04