CSS는 글자 크기를
조정할 때도 쓸 수 있어요

이 페이지의 헤딩을 보면
문단에 비해서

이미 브라우저는
제공하고 있어요

다른 요소마다 다른 크기를 가진 
기본 스타일을 말이죠

바디 부분 글자 크기가 있고요

헤딩의 각 단계에서는
크기가 더 커지죠

가끔은 이런 크기들도
수정하고 싶을 때가 있죠

CSS의 글자 크기 속성을
이용하면 할 수 있어요

예를 들자면

이 페이지의 모든 글자를
살짝 작게 만들고 싶다면요?

'style' 태그로 가볼게요

여기서 'body'부분에
CSS 규칙을 추가해 줄게요

그 안에 'font-size' 속성을
넣어주세요

그럼 'font-size'의 값은
뭐가 될까요?

글자 크기를
어떻게 측정하죠?

사실 이건 굉장히
좋은 질문이에요

적어도 열 개가 넘는
단위들이 있으니까요

CSS가 제공하는
글자 크기에는 말이죠

전에 봤던 단위로
시작해볼까요

'픽셀'로 말이죠

이미지의 크기를 조절할 때
픽셀 단위를 썼어요

CSS에서도
많이 사용할 거에요

11픽셀이라고 해볼게요

모두가 작아졌네요

헤딩 부분까지도
작아졌어요

왜 헤딩도 작아지는 걸까요?

브라우저가 지정해주었던
픽셀사이즈여야 하는거 아닌가요?

아니에요

브라우저의 기본 헤딩은 픽셀로
정의되어 있지 않기 때문이죠

'em'이라고 부르는 단위로
정의되어 있어요

이 단위는
상대적인 단위라서

헤딩의 크기가 바디의 글자크기에
맞추어 조절되는 거에요

이게 무슨 말인지
보여드릴게요

h2 스타일 부분으로 가서

글자크기 속성을 추가할게요

이번엔 픽셀대신
상대적인 크기로 해볼게요

상대적으로
얼마나 큰 지 말이죠

h2를 바디에 비해
얼마나 크게 할까요?

두 배 정도 크게 해볼까요?

그러려면 '2em'이라고 쓰세요

여길 보면 브라우저가 글자 폰트의
픽셀 크기를 계산하게 돼요

브라우저는 바디의 글자 크기가
11픽셀이라는 걸 아니까요

h2는 그것보다
두 배 커야하니까

h2의 높이는
22픽셀이 되는거죠

만약 바디 글자 크기를
12픽셀로 바꾼다면

h2의 크기는
얼마가 될까요?

맞아요
24픽셀이죠

만약 h2의 크기를
1.5em으로 바꾼다면요?

이제 h2의 크기는
12 곱하기 1.5가 되니까

18픽셀이 되는거죠

바디에 한 것 처럼
h2에도 픽셀로 크기를 줄 수 있어요

그럼 같은 방식으로
적용될 거에요

여러분이 뭐가 더 쉽다고
생각하는 지에 따라 다를거에요

제가 아까 얘기한 것 처럼
더 많은 단위들이 있어요

픽셀과 em말고도 말이죠

이 두 개가 가장
많이 쓰이는 단위에요

그렇지만 다른 단위가
궁금하다면

'font-size'에 대한
문서들을 읽어보세요

아니면 인터넷에
더 많은 강좌를 찾아보세요

여러분의 글자 크기를
엄청 키워보세요!