엔디프의 웹표준 커버스토리
REM 과 EM 의 차이점에 대해서 알아봅시다 본문
안녕하세요 엔디프입니다.
CSS는 상속이 무엇보다 중요하자나요
상속 개념중에서도 폰트 상속에 대해서 이야기를 해볼려고 합니다.
제가 코딩할때는 먼저 body 속성이나 공통선택자 * 에
body {font:100%/1.2 ''dotum'} 이라고 적어줍니다.
폰트사이즈를 상속받기 위함이죠
100% 라고 하는건 현재 웹 화면의 크기에 최적화 된 사이즈로서 보통 16px를 나타내며 16px는 1em 입니다.
em단위는 부모요소로부터 상속받기 때문에 사용할때 샘법이 필요합니다.
<style type="text/css">
body {font:100%/1.2 'dotum'}
.f01 {font-size:0.875em}
.f02 {font-size:0.875em}
</style>
</head>
<body>
<header>
<div class="f01">
폰트 크기 01
<p class="f02">
폰트 크기 02
</p>
</div>
</header>
이렇게 코딩 하면 어떻게 나올까요?
body는 100% 이므로 16px 이며 1em 의 수치를 가집니다.
그렇다면 div.f01 은 em 계산법에 의하여 14px의 값을 환산하는 0.875em 의 값을 주었습니다.
그렇다면 p.f02 는?? 정말 div 안의 p 도 0.875이기 때문에 14px의 값을 가질까요?
위의 폰트는 div의 크기
아래 폰트는 p 태그의 크기입니다.
em은 부모요소의 폰트크기를 상속받는 특성을 가지고 있습니다. 그러므로 p태그의 폰트크기는 부모요소인 div 의 크기를 상속받습니다. 그러므로 부모요소의 크기인 14px 크기 기준으로 작아지므로 12px가 되는것입니다.
em의 이런 상속 개념과 샘법에 구에 받지 않는 폰트 정의법이 rem 단위를 쓰는 것입니다.
rem 은 root em의 약자 입니다. 즉, 폰트 상속으로 root에서 바로 받아내는것입니다.
위의 코드와 똑같은 코드를 넣고 단위만 rem 으로 바꿔보겠습니다.
body {font:100%/1.2 'dotum'}
.f01 {font-size:0.875rem}
.f02 {font-size:0.875rem}
</style>
</head>
<body>
<header>
<div class="f01">
폰트 크기 01
<p class="f02">
폰트 크기 02
</p>
</div>
이렇게 적게 되면
폰트 크기는 div 도 14px, 자식요소인 p 도 14px 로 같아 졌습니다.
em과 rem 의 차이를 아시겠나요?
정리 하자면 이 두 단위의 차이점은 부모요소로 부터 상속을 받느냐
아니면 최상위 root에서 상속을 받느냐의 차이 입니다.
'CSS연구소' 카테고리의 다른 글
| 블록요소와 인라인요소 (0) | 2016.01.21 |
|---|---|
| 라디오버튼 디자인방법 (0) | 2015.01.27 |
| placeholder 기능에 대한 고찰 (0) | 2014.08.12 |
| 이미지스프라이트기법으로 코딩해보기 (1) | 2014.08.01 |
| 나눔고딕연구 (1) | 2014.07.17 |
