CSS3 폰트 크기를 결정하는 em rem 개념 및 차이점
웹코딩에서 폰트 크기를 정의할 때, 가장 많이 쓰이는 단위는 단연코 px 입니다. 절대값으로 브라우저의 창 크기라던지, 브라우저의 종류라던지에 상관 없이 어떤 상황에서든지 px로 값을 넣어주면 늘 고정된 크기를 갖습니다.
지금은 반응형 브라우저가 거의 자리를 잡았고, 창 크기 혹은 해상도의 크기에 따라서 폰트 크기가 적절하게 가독성을 해치지 않도록 사이즈가 변화합니다. 여기에서 쓰이는 단위가 em과 rem 입니다. 이 둘의 차이점과 뜻을 알아보도록 하겠습니다.
em 그리고 rem 의 뜻
배수를 의미합니다. 그렇다면 배수 자체가 기준이 될 수 없고, 부모요소에 반드시 폰트 크기가 정의되어야 합니다. 그러면 자식 요소에 em 혹은 rem을 폰트 사이즈로 지정하여 크기를 결정할 수 있습니다. 다음 아래의 예제를 보면서 설명하겠습니다.
See the Pen CSS3: font-size: em & rem by rgy0409 (@rgy0409) on CodePen.
현재 결과화면이 보이실 겁니다. 메뉴에 보시면 HTML과 CSS 코딩 상태도 확인하실 수 있으니까 꼭 같이 봐주시기를 바랍니다. 먼저 em과 rem은 "배"의 의미를 갖지만, 어떤 부모요소를 기준으로 정의하느냐가 다릅니다.
em : 모든 부모요소가 기준이 될 수 있습니다. 단 해당 부모 요소 중 em 이 있다면 중첩되어 적용됩니다.
rem : html이 기준이 됩니다. 보통 html의 font-size는 16px 입니다.
말로는 조금 설명이 어렵습니다. 예제를 보시면서 다시 설명을 드리겠습니다. 예제에서 body 태그 부분에 바로 텍스트로 "Hi, CSS3!" 라고 작성을 해 둔 부분이 있습니다. 초록색 텍스트 부분입니다. 바로 다음으로 오는 자식요소가 3개가 있죠. p태그 두개와 div 태그 입니다. 해당 요소 안에도 똑같은 텍스트를 넣었습니다. p태그의 텍스트는 검정색, div 텍스트는 빨간색, 파란색 입니다.
먼저 body 에 바로 마크업된 텍스트의 크기를 살펴보시기 바랍니다. 크롬 브라우저에서 검사 기능을 활용해서 살펴보면 폰트 크기가 24px 이라고 되어 있습니다. 왜냐하면 body의 부모 요소인 html의 기본 폰트 크기가 16px 이기 때문입니다. 따로 정의되어 있지 않는 한 html 문서의 기본 폰트 크기는 16px 이라고 알고 계시면 될 것 같습니다. body 태그에는 font-size: 1.5em; 이라고 되어 있으니, 16px의 1.5배의 크기라는 뜻이 됩니다. 따라서 결과값는 24px 이 됩니다.
이제 body 바로 다음에 오는 자식요소인 p태그 두개를 살펴봅니다. 클래스값이 각각 body-p1, body-p2인 요소들 입니다. 먼저 body-p1에는 1.5em 이라고 되어 있고, body-p2에는 1.5rem 이라고 되어 있습니다. 그러면 아래의 계산 결과를 먼저 보겠습니다.
body-p1의 폰트 크기 = html(16px) × body(1.5em) × p1(1.5em) = 36px
body-p2의 폰트 크기 = html(16px) × p(1.5rem) = 24px
이제 em과 rem의 차이를 조금 이해하실 수 있으실 것입니다. 그렇습니다. em은 모든 부모요소의 폰트 크기에 영향을 받을 수 있습니다. 만약 자식 요소 중 중간에 고정 크기인 px가 들어 있다면 어떻게 될까요? 해당 예제가 클래스명 div3 인 요소에 있습니다. 그리고 모든 부모 요소가 계속해서 em 으로 들어온다면, 가장 최하위 자식요소의 폰트 크기는 모든 부모요소의 곱이 될 것입니다. 예제에서는 81px 짜리 폰트가 그 경우가 되겠습니다. 그리고 rem은 무조건 html 만을 기준을 삼습니다. 위의 부모 요소들이 em이 되었듯, 고정 크기값인 px가 되었든 모두 무시합니다.
div4의 경우는 위에 수 많은 부모요소들이 있었지만, div4 에서 폰트 크기를 rem으로 정의했으므로, html 폰트의 1.5배만 적용됩니다. 결국 폰트 크기는 24px이 됩니다. 여기에 자식요소인 div4-p1 클래스값인 p태그에는 1.5em 으로 마크업 되어 있기 때문에 24px의 1.5배인 36px이 되는 것 입니다.
em 폰트 크기 계산, 한번 더!
div2의 p1 에 있는 p태그 텍스트의 폰트 크기에 대한 계산은 다음과 같습니다.
div2-p1의 폰트 크기 = html(16px) × body(1.5em) × div1(1.5em) × div2(1.5em) × p1(1.5em) = 81px
이렇게 계산이 됩니다.
중간 요소 중에서 폰트 크기가 px로 고정 크기로 정의되었을 때?
div3의 경우가 이런 상황입니다. 예제에서 파란색으로 출력된 폰트 부분입니다. 이럴때 자식 요소들 중 em과 rem은 어떻게 크기가 계산이 될까요? 간단합니다. em은 가장 근접한 부모 요소의 고정값을 기준으로 계산이 되며, rem은 아까도 말씀드렸듯 무조건 html을 기준으로 합니다. 그래서 계산 결과는 아래과 같습니다.
div3 자식 요소인 p1의 폰트크기 = div3(30px) × p1(1.5em) = 45px
div3 자식 요소인 p2의 폰트크기 = html(16px) × p2(1.5rem) = 24px
이런 차이점이 있다는 것을 기억하시고, 차후에 em과 rem의 사용에 혼동이 없기를 바라겠습니다. 끝.
"친절한효자손 취미생활" 을 검색!
