font-size
글자 크기는 font-size 속성으로 조절합니다.
픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있고 백분율을 사용할
수도 있습니다.
기본형
font-size : 절대크기 | 상대크기 | 크기 | 백분율
사용 가능한 속성값
font-size 속성에서 사용하는 속성 값은 다음과 같습니다.
| 속성 값 | 설명 |
|---|---|
| 절대 크기 | 브라우저에서 지정한 글자 크기입니다. 사용할 수 있는 값은 medium | xx-small | x-small | small | large | x-large | xx-large 입니다. |
| 상대 크기 | 부모 요소의 클자 크기(font-size)를 기준으로 더 크게 표시하거나 더 작게 표시합니다. 사용할 수 있는 값은 smaller | larger 입니다. |
| 크기 | 브라우저와 상관없이 글자 크기를 직접 지정합니다. |
| 백분율 | 부모 요소의 글자 크기를 기준으로 해당하는 비율(%)를 계산해 표시합니다. |
절대크기
medium 속성은 웹브라우저에서 정한 기본 글자크기입니다. xx-small, x-small, small, large, x-large, xx-large 속성은 medium 속성에 대한 상대적인 크기입니다. 웹브라우저의 기본 글자 크기를 바꾸면 요소의 글자 크기도 바뀝니다.
font-size : medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length
상대크기
smaller, larger 속성은 부모 요소의 글자 크기에 대한 상대적인 글자
크기입니다.
부모 요소의 글자 크기가 변하면 자식 요소의 글자 크기도 변합니다.
font-size : smaller | larger
크기
font-size에서 사용할 수 있는 값은 여러 형태이지만 주로 크기 값을 직접 지정합니다.
font-size : 크기
사용할 수 있는 단위는 다음과 같습니다.
| 단위 | 설명 |
|---|---|
| em | 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절합니다. |
| ex | x-height(엑스 하이트). 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절합니다. |
| px | pixel(픽셀). 모니터에 따라 상대적 크기가 됩니다. |
| pt | point(포인트). 일반 문서에서 많이 사용하는 단위입니다. |
| % | 부모 요소의 글자 크기를 기준으로 해당하는 비율(%)를 계산해 표시합니다. |
px 단위 사용하기
웹에서 font-size 속성을 사용해 폰트 크기를 지정할 때는 주로 px 단위를 많이 사용합니다.
<h1>30px의 크기를 가진 제목</h1>
<p>15px의 크기를 가진 단락</p>
h1 {
font-size: 30px;
}
p {
font-size: 15px;
}
크기를 따로 지정하지 않으면 텍스트 문단의 크기는 기본적으로 16px 로 표시됩니다.
em 단위 사용하기
px 단위를 사용하면 폰트 크기가 고정되기 때문에 창 쿠기가 작은 모바일 기기로 볼때도 같은 크기로 화면에 표시됩니다. 모바일 기기를 고려한다면 px 단위보다 em 단위를 사용하는 것이 좋습니다.
em은 사용하는 글꼴의 대문자 M 을 기준으로 합니다. 그래서 그 발음을 따 em이라는
단위를 사용합니다. 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em 으로 놓고
상대적 값을 비교하여 글자 크기를 조절합니다. 만약 지정한 크기가 없다면
<body> 요소의 크기 16px 가 기본 값 1em 으로 지정됩니다.
<h1>3em의 크기를 가진 제목</h1>
<p>1em의 크기를 가진 단락</p>
h1 {
font-size: 3em;
}
p {
font-size: 1em;
}