오늘은 반응형 사이트 제작할 때 많이 쓰는 size 단위인 em, rem에 대해서 알아보도록 하겠습니다.
보통 폰트사이즈를 12px 요렇게 고정 크기 픽셀 단위로 설정하지만 em과 rem은 배율이라고 보시면 되요
1.2em 1.2rem은 1.2배라고 보시면 되요~
근데 배율이면 기준이 있어야하자나요? 도대체 어떤 요소의 1.2배란 말일까요?
여기서 em과 rem은 서로 다른 길을 갑니다.
em은 상위 요소(부모)가 기준이 되구요 rem은 최상위 요소가 기준이 됩니다.
rem의 뜻은 최상위를 뜻하는 root의 r을 붙여줘서 r + em이 된답니다.
상위? 최상위?
상위와 최상위의 차이가 어떻게 다른지는 예제를 통해서 한번 알아보도록 하겠습니다.
<style>
html { font-size:10px }
section { font-size:20px }
section .div_em { font-size:1.2em }
section .div_rem { font-size:1.5rem }
</style>
<html>
<head>
<title>em과 rem의 차이를 알아보자!!</title>
</head>
<body>
<section>
<div class="div_em">EM의 글자크기</div>
<div class="div_rem">REM의 글자크기</div>
</section>
</body>
</html>
<!-- 편의를 위해 style과 html을 분리하여 작성하였습니다. -->
위 코드를 실행하게 되면 다음과 같이 됩니다.
흠...어째서 이렇게 될까요? 분명 em은 1.2, rem은 1.5를 지정해줬는데...
숫자를 더 크게 지정한 rem이 더 작아진거죠? 개발자 도구로 font-size가 어떻게 설정되었는지 확인해 보겠습니다.
이제 왜 이런건지 설명을 해드릴께요~~
em은 바로 상위요소(부모)에 영향을 받는다고 했잖아요? 그럼 div_em의 상위요소는 어딜까요?
바로 위 SECTION 태그 입니다.
제가 SECTION태그에는 font-size를 20px로 설정을 해주었어요~
20px의 1.2배는...바로 24px이 되네요~ 그래서 24px이 적용된거에요!!
그렇다면 rem은???
제가 HTML 태그에 font-size를 10px를 줬어요~ 그냥 심심해서 설정해준건 아니랍니다.^^;;
REM의 Root는 바로 최상위 태그 HTML을 가르키는거였어요~~~
그래서 10px의 1.5배인 15픽셀이 적용된거에요~~
잘 이해가 안되신다고요??? 그림으로 알려드릴께요~~^^
이제 이해가 좀 되시나요?
em은 바로 위 상위요소!! rem은 최상위 요소 HTML만 기억하시면 되요~~
em과 rem을 사용했을때의 좋은 점은 상위 태그의 값으로 모든 하위 크기를 변경해줄 수 있다는거에요~
그럼 반응형 사이트 만들때 미디어 쿼리로 상위 요소의 사이즈만 변경해 주면 되니 코드도 많이 줄고 코딩시간도 많이 줄일 수 있어요!~
참고로 em과 rem은 margin, padding 같이 사이즈를 사용하는 곳에도 모두 사용이 가능하답니다.^^
아직도 이해가 안되신다구요?
알고 싶은 다른게 있으시다구요?
그럼 댓글로 남겨주세요. 댓글을 늘 지켜보고 있겠습니다~^^
'Web > CSS' 카테고리의 다른 글
| CSS로 마우스 커서를 내가 원하는 이미지로 변경하기 | 커서가 안 바뀔 때 (2) | 2022.01.10 |
|---|---|
| CSS의 Width사이즈 계산 방식을 달리 해보자~ | box-sizing (0) | 2021.09.17 |
| 반응형 사이트 사이즈 계산에는 CSS의 calc()가 최고죠!! (0) | 2021.08.24 |
| ALT 속성이 필요한 이유!! | ALT 속성 없는 이미지 태그 쉽게 찾기 (0) | 2021.08.24 |
| 배경만 반투명하게 할 때 opacity?? rgba?? (0) | 2021.06.12 |