반응형 폰트 사이즈 단위 em? rem? 뭐가 다를까? | css font-size 상대 단위 - STUDY

CSS 반응형 폰트 사이즈 단위 em? rem? 뭐가 다를까? | css font-size 상대 단위

작성일 21-02-23 20:45

페이지 정보

작성자웹아이 조회 512회 댓글 0건

본문

안녕하세요.
오늘은 반응형 사이트 제작할 때 많이 쓰는 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과 rem 실행 시 글자크기 스크린샷 em과 rem 실행 시 글자크기 스크린샷

흠...어째서 이렇게 될까요? 분명 em은 1.2, rem은 1.5를 지정해줬는데...
숫자를 더 크게 지정한 rem이 더 작아진거죠? 개발자 도구로 font-size가 어떻게 설정되었는지 확인해 보겠습니다.

em은 font-size가 24픽셀로 적용이 되었습니다. em은 font-size가 24픽셀로 적용이 되었습니다.

rem은 font-size가 15픽셀로 적용이 되었습니다. rem은 font-size가 15픽셀로 적용이 되었습니다.

이제 왜 이런건지 설명을 해드릴께요~~

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의 차이 설명 em과 rem의 차이 설명

이제 이해가 좀 되시나요?
em은 바로 위 상위요소!! rem은 최상위 요소 HTML만 기억하시면 되요~~

em과 rem을 사용했을때의 좋은 점은 상위 태그의 값으로 모든 하위 크기를 변경해줄 수 있다는거에요~
그럼 반응형 사이트 만들때 미디어 쿼리로 상위 요소의 사이즈만 변경해 주면 되니 코드도 많이 줄고 코딩시간도 많이 줄일 수 있어요!~

참고로 em과 rem은 margin, padding 같이 사이즈를 사용하는 곳에도 모두 사용이 가능하답니다.^^

아직도 이해가 안되신다구요?
알고 싶은 다른게 있으시다구요?
그럼 댓글로 남겨주세요. 댓글을 늘 지켜보고 있겠습니다~^^


추천0

댓글목록

등록된 댓글이 없습니다.

Road to Deveropment
Road to Deveropment
상단으로