0:00:00.000,0:00:03.679
CSS는 글자 크기를[br]조정할 때도 쓸 수 있어요

0:00:03.679,0:00:07.554
이 페이지의 헤딩을 보면[br]문단에 비해서

0:00:07.554,0:00:09.382
이미 브라우저는[br]제공하고 있어요

0:00:09.382,0:00:12.352
다른 요소마다 다른 크기를 가진 [br]기본 스타일을 말이죠

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

0:00:13.883,0:00:16.236
헤딩의 각 단계에서는[br]크기가 더 커지죠

0:00:16.236,0:00:18.930
가끔은 이런 크기들도[br]수정하고 싶을 때가 있죠

0:00:18.930,0:00:22.426
CSS의 글자 크기 속성을[br]이용하면 할 수 있어요

0:00:22.426,0:00:23.853
예를 들자면

0:00:23.853,0:00:28.983
이 페이지의 모든 글자를[br]살짝 작게 만들고 싶다면요?

0:00:28.983,0:00:31.132
'style' 태그로 가볼게요

0:00:31.132,0:00:34.890
여기서 'body'부분에[br]CSS 규칙을 추가해 줄게요

0:00:34.890,0:00:39.537
그 안에 'font-size' 속성을[br]넣어주세요

0:00:39.537,0:00:42.979
그럼 'font-size'의 값은[br]뭐가 될까요?

0:00:42.979,0:00:45.974
글자 크기를[br]어떻게 측정하죠?

0:00:45.974,0:00:47.954
사실 이건 굉장히[br]좋은 질문이에요

0:00:47.954,0:00:50.267
적어도 열 개가 넘는[br]단위들이 있으니까요

0:00:50.267,0:00:52.738
CSS가 제공하는[br]글자 크기에는 말이죠

0:00:52.738,0:00:54.684
전에 봤던 단위로[br]시작해볼까요

0:00:54.684,0:00:55.853
'픽셀'로 말이죠

0:00:55.853,0:00:58.623
이미지의 크기를 조절할 때[br]픽셀 단위를 썼어요

0:00:58.623,0:01:01.313
CSS에서도[br]많이 사용할 거에요

0:01:01.313,0:01:04.105
11픽셀이라고 해볼게요

0:01:04.105,0:01:06.425
모두가 작아졌네요

0:01:06.425,0:01:08.840
헤딩 부분까지도[br]작아졌어요

0:01:08.840,0:01:11.382
왜 헤딩도 작아지는 걸까요?

0:01:11.382,0:01:15.222
브라우저가 지정해주었던[br]픽셀사이즈여야 하는거 아닌가요?

0:01:15.222,0:01:16.658
아니에요

0:01:16.658,0:01:21.954
브라우저의 기본 헤딩은 픽셀로[br]정의되어 있지 않기 때문이죠

0:01:21.962,0:01:25.567
'em'이라고 부르는 단위로[br]정의되어 있어요

0:01:25.567,0:01:27.450
이 단위는[br]상대적인 단위라서

0:01:27.450,0:01:32.105
헤딩의 크기가 바디의 글자크기에[br]맞추어 조절되는 거에요

0:01:32.105,0:01:34.057
이게 무슨 말인지[br]보여드릴게요

0:01:34.057,0:01:36.589
h2 스타일 부분으로 가서

0:01:36.589,0:01:39.454
글자크기 속성을 추가할게요

0:01:39.454,0:01:44.929
이번엔 픽셀대신[br]상대적인 크기로 해볼게요

0:01:44.929,0:01:47.173
상대적으로[br]얼마나 큰 지 말이죠

0:01:47.173,0:01:50.173
h2를 바디에 비해[br]얼마나 크게 할까요?

0:01:50.173,0:01:53.347
두 배 정도 크게 해볼까요?

0:01:53.347,0:01:57.003
그러려면 '2em'이라고 쓰세요

0:01:57.003,0:02:01.841
여길 보면 브라우저가 글자 폰트의[br]픽셀 크기를 계산하게 돼요

0:02:01.841,0:02:05.048
브라우저는 바디의 글자 크기가[br]11픽셀이라는 걸 아니까요

0:02:05.048,0:02:08.055
h2는 그것보다[br]두 배 커야하니까

0:02:08.055,0:02:12.174
h2의 높이는[br]22픽셀이 되는거죠

0:02:12.174,0:02:16.576
만약 바디 글자 크기를[br]12픽셀로 바꾼다면

0:02:16.576,0:02:19.322
h2의 크기는[br]얼마가 될까요?

0:02:19.322,0:02:21.884
맞아요[br]24픽셀이죠

0:02:21.884,0:02:26.815
만약 h2의 크기를[br]1.5em으로 바꾼다면요?

0:02:26.815,0:02:31.145
이제 h2의 크기는[br]12 곱하기 1.5가 되니까

0:02:31.145,0:02:33.336
18픽셀이 되는거죠

0:02:33.336,0:02:37.754
바디에 한 것 처럼[br]h2에도 픽셀로 크기를 줄 수 있어요

0:02:37.754,0:02:39.651
그럼 같은 방식으로[br]적용될 거에요

0:02:39.651,0:02:41.502
여러분이 뭐가 더 쉽다고[br]생각하는 지에 따라 다를거에요

0:02:41.502,0:02:45.258
제가 아까 얘기한 것 처럼[br]더 많은 단위들이 있어요

0:02:45.258,0:02:47.252
픽셀과 em말고도 말이죠

0:02:47.252,0:02:49.568
이 두 개가 가장[br]많이 쓰이는 단위에요

0:02:49.568,0:02:51.016
그렇지만 다른 단위가[br]궁금하다면

0:02:51.016,0:02:53.193
'font-size'에 대한[br]문서들을 읽어보세요

0:02:53.193,0:02:55.522
아니면 인터넷에[br]더 많은 강좌를 찾아보세요

0:02:55.522,0:02:58.883
여러분의 글자 크기를[br]엄청 키워보세요!