css font-size :: em, pt, px, %, rem, keyword



웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[HTML] css font-size :: em, pt, px, %, rem, keyword

2017.11.08
css 폰트를 지정하지 않는다면 기본 설정은
16px 이며 1em, 12pt, 100% 모두 같은 사이즈를 뜻한다.

하지만 em, pt, px, %, rem, keyword 를 쓰는 경우에 따라
css font-size는 다르게 보이게 된다
위에 표처럼 body가 font-size:100%일때와
120%일때로 변경될때 사용에 따라서 변경되게 된다.
px과 pt의 경우 고정된 크기로 해상도에 따라서 변화가 되지 않는다
em, rem, %는 해상도에 따라서 사이즈 조정이 가능하다.(넓이의 기준)

위에 세가지를 구분하자면
em: 부모(상위 엘리먼트)의 단위에 맞추어 해상도 따라서 사이즈 조정을 하게 된다
% : 기본사이즈에 대한 상대적 사이즈 조정이 가능하다
위에 둘은 비슷하지만 조금 달라지는 부분은 rem이다
rem: 최상위 요서 html요소에 비례하는 단위를 가졌으며, 기본html의 font-size를 고정값으로
지정해두면 나머지는 그 비율에 따라서 크기를 계산한다.


em을 이용하여 <article>요소에 크기를 조절하면,
html { font-size:10px; }
section { font-size:2em; }
section>article { font-size:1em }

=> article속 글자크기는 20px이 됩니다.
em 단위는 자신 바로 위 요소 (부모요소) 크기를 기준으로 상대 조절합니다.
위의 마크업에서 article요소의 부모는 section이며, section의 글자크기는 root 요소인 html 글자 크기의 두배인 20px입니다.
article 자신의부모인 section요소의 1em 크기이므로, 결과적으로 20px이 됩니다.



rem 을 이용하여 <article>요소의 크기를 조절하면
html { font-size:10px; }
section { font-size:2rem; }
section>article { font-size:1rem; }

=> article 속 글자크기는 10px 이됩니다.
rem 단위는 웹문서의 최상위 요소(html)의 크기를 기준으로 상대조절 합니다.
자신의 부모요소 크기와는 아무상관이 없습니다.
현재 최상위 요소인 html요소의 글자크기가 10px이고, article 요소는 1rem 이므로 article속 글자크기는 10px이 됩니다.

이 포스트 공유하기

글수정  글삭제 전체목록