Font Size(Unit 단위) #2

Font Unit (폰트 단위 크기 비교)

css에서는 글자 폰트 크기나 width, height 등의 크기를 pt, px, em, ex, % 등의 다양한 단위를 사용할 수가 있다.

대부분 프론트 개발 시에는 px 단위를 사용하고 있지만 요즘 트렌드인 반응형(RWD)이나 모바일로 인하여 em, % 단위를 사용하고 있는 추세이기도 하다.

pt, px 은 절대적인 크기를 나타내는 반해서 em, ex, % 는 상위 엘리먼트에 대한 상대적인 크기를 나타낸다.

em, ex, % 단위의 장점이라면 웹 브라우저의 메뉴에서 글꼴 크기를 조절할 수 있고, 그에 따라 레이아웃이 유동적으로 변화 될 수 있기 때문에 접근성이 향상된다.

즉, 작은 글자를 보기 어려운 사람들도 글자 확대를 하여 쉽게 볼 수 있다는 점이다.

그럼 웹에서 사용되고 있는 Font Unit 에 대해 알아보자.

em 은 상대적인 크기를 지니는 단위로써 요소에 저정하는 글자 크기 단위를 설정할 수가 있다.

본래 em이라는 단위는 어원적으로 글꼴 세트의 알파벳 대문자의 'M'의 너비를 의미한다.

일반적으로 웹 브라우저에서는 1em = 16px 으로 환산되며, 1em은 웹 브라우저에서 글자 크기사이즈를 지정하지 않았을 때 표시되는 글꼴 크기의 기본값이다.

em 단위를 사용하면 부모 요소에서 지정한 글자크기를 기준으로 배율을 조정하게 된다.

따라서 1.5em을 지정하면 부모요소(E.g. html,body)의 글자 크기의 1.5배가 된다.

일반적으로 문서 레이아웃을 글자 크기에 따라 유동적으로 만들 때 많이 사용된다.

rem

CSS3의 폰트 크기값으로 새로 등장한 rem 은 root em이라는 뜻으로, HTML 문서의 root 요소인 <html>요소를 가리키며, 이 요소에 지정된 크기를 기준으로 상대적인 값을 가지게 된다는 것이다.

em 단위는 부모로부터 글꼴 크기를 상속받지만, rem 단위는 부모가 아닌 시조(root = html)로부터 폰트 크기를 상속받는다는 점이 다르다.

예를 들어, em 단위는 부모로부터 폰트크기를 상속받기 때문에 같은 값이 설정되어 있다하더라도 노드가 깊어질 수록 폰트크기가 기하 급수적으로 크거나 작아진다.

이런 방식은 문제점은 부모 또는 조상 노드 가운데 어떤 요소의 폰트 사이즈값을 변경할 경우 모든 자식과 자손요소도 그 영향을 받는다는 점이다.

그래서 예측하기 어렵고 계산하기 복잡하다는 단점이 있다. 물론 글꼴의 확대 축소를 유연하게 만들기 위한 목적으로 존재하기는 하지만 이러한 복잡성으로 개발자들은 이 방법을 잘 이용하지는 않는다.

html = 100% = 16px

body = 0.5em = 8px

div = 0.5em = 4px

p = 0.5em = 2px

하지만 rem 단위는 부모가 아닌 시조로부터 글꼴 크기를 상속받기 때문에 html 요소에 기본 글꼴 크기를 지정해 두면 항상 HTML 요소로부터 글꼴 크기를 상속받는다.

html 요소의 글꼴 크기를 변경하는 것 만으로 페이지의 모든 글꼴 크기를 변경할 수 있다는 점 자체는 em 요소 다를 바 없지만 rem 요소는 부모 요소로부터 상속을 받지 않기 때문에 페이지의 모든 글꼴 크기 변화를 예측할 수 있고 계산하기도 훨씬 수월하다.

유용한 상황

단말기의 해상도에 따라 기본 글꼴 크기를 전체적으로 다르게 제어할 필요가 있을 경우 미디어쿼리와 함께 rem 단위를 사용하면 효과적입니다.

글꼴 사이즈 반응형으로 만들기

기본 em 사용법 및 계산

html, body { font-size: 14px; }

14px 이 기준일 시 1em 은 14px 이므로 20px의 폰트사이즈를 em단위로 변환할 시 20/14 1.43em

font-size 의 단위를 설정하는 방법은 크게 절대단위(px)와 상대단위(%,em)등이 있는데 모바일이나 반응형을 고려할 시 상대단위를 사용하는 것이 좋다.

브라우저의 기본 값은 1em = 16px 이므로 12px 을 사용하고자 할 때,

em 계산법은 12( 사용하고 싶은 px) / 16(기준크기 px) = 0.75 em 이 된다.

참고로 em은 소수점 3자리까지 가능하다.

% 로 변환할 시,

12(사용하고자 하는 px) / 16 (기준크기 px) * 100 = 75% 가 된다.

See the Pen Example em unit by jaeheekim (@jaehee) on CodePen.

font-size 계산은 http:///pxtoem.com/ 참고

EM Vs REM

html

<div class="container">

    <p class="first">First Paragraph using EM's</p>

    <p class="second">Second Paragraph using REM's</p>

</div>

<style>
    html { font-size: 62.5%; }
    body { font-size: 14px; font-size: 1.4rem; }
    h1   { font-size: 24px; font-size: 2.4rem; }
</style>

* rem 단위는 부모로부터 상속받지 않는다. root em 의 약어이다.

css

html { font-size: 16px; }

/* 16 * 1.4 = 22.4 */
.container { font-size: 1.4em; }

/* em 상속값 16 * 1.4 * 1.4 */
p.first { font-size: 1.4em; }

/* rem 절대값 16 * 1.4 = 22.4 */
p.second { font-size: 1.4rem; }

font-size css class 작명 짓기

smaller, xx-small, x-small, small, medium, large, x-large, xx-large, larger

또는, smaller, xx,-s, x-s, small(sm), medium(md), large(lg), x-lg, xx-lg, larger

px 은 화소를 의미한다.

px단위는 요소를 이미지에 맞춰 정확히 배치해야 할 때 사용하면 좋다.

이미지의 크기 단위가 px이기 때문이다.

pt는 포인트를 의미한다.

1pt는 1/72in 이다.

pc는 파이카를 의미한다.

1pc 는 12pt이며 1/6in 이다.

cm는 화면의 논리적 센티미터를 의미한다.

1in 는 2.54cm 이다.

Jaehee's WebClub

저작자표시

'StyleSheet > CSS' 카테고리의 다른 글

Flexible box Layout - 플렉스 박스 #1 (3)	2018.10.12
Web Font - @font-face 적용 방법 (14)	2018.10.12
Font Size(Unit 단위) #1 (0)	2018.10.11
Navigation icon Transform (0)	2017.04.24
Responsive Table (1)	2017.04.24

Web Club