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