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'에 대한 문서들을 읽어보세요
아니면 인터넷에 더 많은 강좌를 찾아보세요
여러분의 글자 크기를 엄청 키워보세요!