들어가기 전에
텍스트를 많이 사용하는 html 문서에서 font-size 속성은 가독성이나 명확한
구문을 표현하기 위해서 반드시 필요한 속성입니다.
글꼴의 크기를 지정하는 font-size 속성에는 다양한 값들이 있습니다.
이 값들의 특징과 단위에 따른 폰트 사이즈의 변화를 알아보도록 하겠습니다.
핵심키워드
- absolute size
- relative size
- viewport units
학습하기
4) 속성-font-size
font-size 속성
글꼴의 크기를 지정하는 속성입니다.
기본 값 : medium
font-size: keyword | length | initial | inherit ;< 속성 값 >
keyword | medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger |
length | px, em 등 고정 수치로 지정합니다. |
% | 부모 요소의 font-size 기준의 퍼센트로 지정합니다. |
- absolute size (keyword) 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의되어있습니다.
- relative size (keyword) 부모 요소의 font-size 크기에 대해 상대적입니다. smaller는 0.8배, larger는 1.2배입니다.
- length px, em, rem 등의 단위를 이용하여 고정된 크기를 지정할 수 있습니다. - em : 부모 요소의 font-size에 em 값을 곱한 크기 - rem : 루트의 font-size에 rem 값을 곱한 크기
- percent (%) 부모 요소의 font-size를 기준으로 백분율 계산된 값을 지정할 수 있습니다.
- viewport units vw, vh 단위로 뷰포트를 기준으로 하여, 유동적인 font-size를 지정할 수 있습니다. vw는 뷰포트 width의 1%, vh는 뷰포트 height의 1% 값을 가집니다.
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>font-size</title>
<style>
.parent {
font-size: 20px;
}
.child {
font-size: 1em;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ipsam aspernatur vitae sapiente laudantium velit quo unde cupiditate autem,
harum eaque natus perferendis ducimus saepe libero, voluptatibus voluptates possimus.
Adipisci, delectus.
</div>
</div>
</body>
</html>
생각해보기
- font-size에는 em 단위와 % 단위를 사용할 수 있는데요. 둘 다 부모 요소의 font-size를 기준으로 그 값이 곱해지기 때문에 font-size 속성에서는 두 단위의 동작이 같아 보일 수 있습니다. 그러나 다른 속성에서 이 단위들이 사용될 때는 그 기준이 명확하게 달라집니다. 이 차이에 대해 유념하시면 좋을 것 같습니다.
참고자료
- CSS font-size property
https://www.w3schools.com
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
- font-size
https://developer.mozilla.org
- font-size CSS 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 em 과 ex length 단위로 계산된 다른 항목들의 크기를 바꿉니다.