WEBVTT

00:00:00.000 --> 00:00:03.679
CSS는 글자 크기를
조정할 때도 쓸 수 있어요

00:00:03.679 --> 00:00:07.554
이 페이지의 헤딩을 보면
문단에 비해서

00:00:07.554 --> 00:00:09.382
이미 브라우저는
제공하고 있어요

00:00:09.382 --> 00:00:12.352
다른 요소마다 다른 크기를 가진 
기본 스타일을 말이죠

00:00:12.352 --> 00:00:13.883
바디 부분 글자 크기가 있고요

00:00:13.883 --> 00:00:16.236
헤딩의 각 단계에서는
크기가 더 커지죠

00:00:16.236 --> 00:00:18.930
가끔은 이런 크기들도
수정하고 싶을 때가 있죠

00:00:18.930 --> 00:00:22.426
CSS의 글자 크기 속성을
이용하면 할 수 있어요

00:00:22.426 --> 00:00:23.853
예를 들자면

00:00:23.853 --> 00:00:28.983
이 페이지의 모든 글자를
살짝 작게 만들고 싶다면요?

00:00:28.983 --> 00:00:31.132
'style' 태그로 가볼게요

00:00:31.132 --> 00:00:34.890
여기서 'body'부분에
CSS 규칙을 추가해 줄게요

00:00:34.890 --> 00:00:39.537
그 안에 'font-size' 속성을
넣어주세요

00:00:39.537 --> 00:00:42.979
그럼 'font-size'의 값은
뭐가 될까요?

00:00:42.979 --> 00:00:45.974
글자 크기를
어떻게 측정하죠?

00:00:45.974 --> 00:00:47.954
사실 이건 굉장히
좋은 질문이에요

00:00:47.954 --> 00:00:50.267
적어도 열 개가 넘는
단위들이 있으니까요

00:00:50.267 --> 00:00:52.738
CSS가 제공하는
글자 크기에는 말이죠

00:00:52.738 --> 00:00:54.684
전에 봤던 단위로
시작해볼까요

00:00:54.684 --> 00:00:55.853
'픽셀'로 말이죠

00:00:55.853 --> 00:00:58.623
이미지의 크기를 조절할 때
픽셀 단위를 썼어요

00:00:58.623 --> 00:01:01.313
CSS에서도
많이 사용할 거에요

00:01:01.313 --> 00:01:04.105
11픽셀이라고 해볼게요

00:01:04.105 --> 00:01:06.425
모두가 작아졌네요

00:01:06.425 --> 00:01:08.840
헤딩 부분까지도
작아졌어요

00:01:08.840 --> 00:01:11.382
왜 헤딩도 작아지는 걸까요?

00:01:11.382 --> 00:01:15.222
브라우저가 지정해주었던
픽셀사이즈여야 하는거 아닌가요?

00:01:15.222 --> 00:01:16.658
아니에요

00:01:16.658 --> 00:01:21.954
브라우저의 기본 헤딩은 픽셀로
정의되어 있지 않기 때문이죠

00:01:21.962 --> 00:01:25.567
'em'이라고 부르는 단위로
정의되어 있어요

00:01:25.567 --> 00:01:27.450
이 단위는
상대적인 단위라서

00:01:27.450 --> 00:01:32.105
헤딩의 크기가 바디의 글자크기에
맞추어 조절되는 거에요

00:01:32.105 --> 00:01:34.057
이게 무슨 말인지
보여드릴게요

00:01:34.057 --> 00:01:36.589
h2 스타일 부분으로 가서

00:01:36.589 --> 00:01:39.454
글자크기 속성을 추가할게요

00:01:39.454 --> 00:01:44.929
이번엔 픽셀대신
상대적인 크기로 해볼게요

00:01:44.929 --> 00:01:47.173
상대적으로
얼마나 큰 지 말이죠

00:01:47.173 --> 00:01:50.173
h2를 바디에 비해
얼마나 크게 할까요?

00:01:50.173 --> 00:01:53.347
두 배 정도 크게 해볼까요?

00:01:53.347 --> 00:01:57.003
그러려면 '2em'이라고 쓰세요

00:01:57.003 --> 00:02:01.841
여길 보면 브라우저가 글자 폰트의
픽셀 크기를 계산하게 돼요

00:02:01.841 --> 00:02:05.048
브라우저는 바디의 글자 크기가
11픽셀이라는 걸 아니까요

00:02:05.048 --> 00:02:08.055
h2는 그것보다
두 배 커야하니까

00:02:08.055 --> 00:02:12.174
h2의 높이는
22픽셀이 되는거죠

00:02:12.174 --> 00:02:16.576
만약 바디 글자 크기를
12픽셀로 바꾼다면

00:02:16.576 --> 00:02:19.322
h2의 크기는
얼마가 될까요?

00:02:19.322 --> 00:02:21.884
맞아요
24픽셀이죠

00:02:21.884 --> 00:02:26.815
만약 h2의 크기를
1.5em으로 바꾼다면요?

00:02:26.815 --> 00:02:31.145
이제 h2의 크기는
12 곱하기 1.5가 되니까

00:02:31.145 --> 00:02:33.336
18픽셀이 되는거죠

00:02:33.336 --> 00:02:37.754
바디에 한 것 처럼
h2에도 픽셀로 크기를 줄 수 있어요

00:02:37.754 --> 00:02:39.651
그럼 같은 방식으로
적용될 거에요

00:02:39.651 --> 00:02:41.502
여러분이 뭐가 더 쉽다고
생각하는 지에 따라 다를거에요

00:02:41.502 --> 00:02:45.258
제가 아까 얘기한 것 처럼
더 많은 단위들이 있어요

00:02:45.258 --> 00:02:47.252
픽셀과 em말고도 말이죠

00:02:47.252 --> 00:02:49.568
이 두 개가 가장
많이 쓰이는 단위에요

00:02:49.568 --> 00:02:51.016
그렇지만 다른 단위가
궁금하다면

00:02:51.016 --> 00:02:53.193
'font-size'에 대한
문서들을 읽어보세요

00:02:53.193 --> 00:02:55.522
아니면 인터넷에
더 많은 강좌를 찾아보세요

00:02:55.522 --> 00:02:58.883
여러분의 글자 크기를
엄청 키워보세요!