1
00:00:00,000 --> 00:00:03,679
CSS는 글자 크기를
조정할 때도 쓸 수 있어요

2
00:00:03,679 --> 00:00:07,554
이 페이지의 헤딩을 보면
문단에 비해서

3
00:00:07,554 --> 00:00:09,382
이미 브라우저는
제공하고 있어요

4
00:00:09,382 --> 00:00:12,352
다른 요소마다 다른 크기를 가진 
기본 스타일을 말이죠

5
00:00:12,352 --> 00:00:13,883
바디 부분 글자 크기가 있고요

6
00:00:13,883 --> 00:00:16,236
헤딩의 각 단계에서는
크기가 더 커지죠

7
00:00:16,236 --> 00:00:18,930
가끔은 이런 크기들도
수정하고 싶을 때가 있죠

8
00:00:18,930 --> 00:00:22,426
CSS의 글자 크기 속성을
이용하면 할 수 있어요

9
00:00:22,426 --> 00:00:23,853
예를 들자면

10
00:00:23,853 --> 00:00:28,983
이 페이지의 모든 글자를
살짝 작게 만들고 싶다면요?

11
00:00:28,983 --> 00:00:31,132
'style' 태그로 가볼게요

12
00:00:31,132 --> 00:00:34,890
여기서 'body'부분에
CSS 규칙을 추가해 줄게요

13
00:00:34,890 --> 00:00:39,537
그 안에 'font-size' 속성을
넣어주세요

14
00:00:39,537 --> 00:00:42,979
그럼 'font-size'의 값은
뭐가 될까요?

15
00:00:42,979 --> 00:00:45,974
글자 크기를
어떻게 측정하죠?

16
00:00:45,974 --> 00:00:47,954
사실 이건 굉장히
좋은 질문이에요

17
00:00:47,954 --> 00:00:50,267
적어도 열 개가 넘는
단위들이 있으니까요

18
00:00:50,267 --> 00:00:52,738
CSS가 제공하는
글자 크기에는 말이죠

19
00:00:52,738 --> 00:00:54,684
전에 봤던 단위로
시작해볼까요

20
00:00:54,684 --> 00:00:55,853
'픽셀'로 말이죠

21
00:00:55,853 --> 00:00:58,623
이미지의 크기를 조절할 때
픽셀 단위를 썼어요

22
00:00:58,623 --> 00:01:01,313
CSS에서도
많이 사용할 거에요

23
00:01:01,313 --> 00:01:04,105
11픽셀이라고 해볼게요

24
00:01:04,105 --> 00:01:06,425
모두가 작아졌네요

25
00:01:06,425 --> 00:01:08,840
헤딩 부분까지도
작아졌어요

26
00:01:08,840 --> 00:01:11,382
왜 헤딩도 작아지는 걸까요?

27
00:01:11,382 --> 00:01:15,222
브라우저가 지정해주었던
픽셀사이즈여야 하는거 아닌가요?

28
00:01:15,222 --> 00:01:16,658
아니에요

29
00:01:16,658 --> 00:01:21,954
브라우저의 기본 헤딩은 픽셀로
정의되어 있지 않기 때문이죠

30
00:01:21,962 --> 00:01:25,567
'em'이라고 부르는 단위로
정의되어 있어요

31
00:01:25,567 --> 00:01:27,450
이 단위는
상대적인 단위라서

32
00:01:27,450 --> 00:01:32,105
헤딩의 크기가 바디의 글자크기에
맞추어 조절되는 거에요

33
00:01:32,105 --> 00:01:34,057
이게 무슨 말인지
보여드릴게요

34
00:01:34,057 --> 00:01:36,589
h2 스타일 부분으로 가서

35
00:01:36,589 --> 00:01:39,454
글자크기 속성을 추가할게요

36
00:01:39,454 --> 00:01:44,929
이번엔 픽셀대신
상대적인 크기로 해볼게요

37
00:01:44,929 --> 00:01:47,173
상대적으로
얼마나 큰 지 말이죠

38
00:01:47,173 --> 00:01:50,173
h2를 바디에 비해
얼마나 크게 할까요?

39
00:01:50,173 --> 00:01:53,347
두 배 정도 크게 해볼까요?

40
00:01:53,347 --> 00:01:57,003
그러려면 '2em'이라고 쓰세요

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

42
00:02:01,841 --> 00:02:05,048
브라우저는 바디의 글자 크기가
11픽셀이라는 걸 아니까요

43
00:02:05,048 --> 00:02:08,055
h2는 그것보다
두 배 커야하니까

44
00:02:08,055 --> 00:02:12,174
h2의 높이는
22픽셀이 되는거죠

45
00:02:12,174 --> 00:02:16,576
만약 바디 글자 크기를
12픽셀로 바꾼다면

46
00:02:16,576 --> 00:02:19,322
h2의 크기는
얼마가 될까요?

47
00:02:19,322 --> 00:02:21,884
맞아요
24픽셀이죠

48
00:02:21,884 --> 00:02:26,815
만약 h2의 크기를
1.5em으로 바꾼다면요?

49
00:02:26,815 --> 00:02:31,145
이제 h2의 크기는
12 곱하기 1.5가 되니까

50
00:02:31,145 --> 00:02:33,336
18픽셀이 되는거죠

51
00:02:33,336 --> 00:02:37,754
바디에 한 것 처럼
h2에도 픽셀로 크기를 줄 수 있어요

52
00:02:37,754 --> 00:02:39,651
그럼 같은 방식으로
적용될 거에요

53
00:02:39,651 --> 00:02:41,502
여러분이 뭐가 더 쉽다고
생각하는 지에 따라 다를거에요

54
00:02:41,502 --> 00:02:45,258
제가 아까 얘기한 것 처럼
더 많은 단위들이 있어요

55
00:02:45,258 --> 00:02:47,252
픽셀과 em말고도 말이죠

56
00:02:47,252 --> 00:02:49,568
이 두 개가 가장
많이 쓰이는 단위에요

57
00:02:49,568 --> 00:02:51,016
그렇지만 다른 단위가
궁금하다면

58
00:02:51,016 --> 00:02:53,193
'font-size'에 대한
문서들을 읽어보세요

59
00:02:53,193 --> 00:02:55,522
아니면 인터넷에
더 많은 강좌를 찾아보세요

60
00:02:55,522 --> 00:02:58,883
여러분의 글자 크기를
엄청 키워보세요!