1
00:00:00,000 --> 00:00:02,303
여러분은 지금까지
색깔을 바꾸는 것과

2
00:00:02,303 --> 00:00:05,303
페이지의 배경색을
바꾸는 법을 배웠어요

3
00:00:05,303 --> 00:00:09,162
텍스트와 CSS를 사용해서
더 많은 것을 할 수 있죠

4
00:00:09,162 --> 00:00:12,582
폰트 변경으로
시작해볼게요

5
00:00:12,582 --> 00:00:15,925
폰트가 뭘까요?
아마 알고 계실거에요

6
00:00:15,925 --> 00:00:17,324
하지만 이 단어를
모를 수도 있죠

7
00:00:17,324 --> 00:00:19,837
폰트는 단어를 만드는
글자의 형태에요

8
00:00:19,837 --> 00:00:23,216
글자를 장식하거나
두꺼운 정도나

9
00:00:23,216 --> 00:00:25,943
잉크펜으로 적은 것처럼
보이게 하는 것들 같은거죠

10
00:00:25,943 --> 00:00:30,756
이 페이지의 폰트를 바꾸면서
보여주는게 나을 것 같네요

11
00:00:30,756 --> 00:00:35,791
모든 문단을 선택하는
p 태그의 CSS를 봅시다

12
00:00:35,791 --> 00:00:41,747
여기 'font-family'
속성을 추가할게요

13
00:00:41,747 --> 00:00:44,139
글자가 어떻게
바뀌었는지 보이세요?

14
00:00:44,139 --> 00:00:47,355
좀 더 간결해졌죠

15
00:00:47,355 --> 00:00:52,333
이번엔 'font-family'를
'serif'로 바꿔볼게요

16
00:00:52,333 --> 00:00:55,902
좀 더 글자가 복잡해진게
보이세요?

17
00:00:55,902 --> 00:00:59,989
'serif'폰트 종류는 글자 밑에
작은 발이 보이는 것 같은 폰트에요

18
00:00:59,989 --> 00:01:03,119
브라우저가 'serif' 종류를 쓰면

19
00:01:03,139 --> 00:01:05,944
컴퓨터의 기본 세리프체를
사용하게 될 거에요

20
00:01:05,944 --> 00:01:08,394
보통 'Times New Roman'체죠

21
00:01:08,394 --> 00:01:14,304
이번엔 'Sans-serif'체로
바꿔볼게요

22
00:01:14,304 --> 00:01:18,026
'sans'는 라틴어에서 왔는데
'제외한' 이라는 뜻이에요

23
00:01:18,026 --> 00:01:22,140
그러니까 Sans-serif체는
글자에 작은 발이 없는 폰트에요

24
00:01:22,140 --> 00:01:24,322
그래서 글자체가
좀 더 간결해보이죠

25
00:01:24,322 --> 00:01:27,747
브라우저에게 san-serif ‘font-family’를 사용하라고 하면

26
00:01:27,747 --> 00:01:30,646
컴퓨터의 기본 산세리프체를
사용할 거에요

27
00:01:30,646 --> 00:01:33,136
보통 'Arial'체나
'Helvetica'체이죠

28
00:01:33,136 --> 00:01:35,400
하지만 여기 중요한 점이 있어요

29
00:01:35,400 --> 00:01:37,710
이 기본 서체는 작성자가 아니라

30
00:01:37,710 --> 00:01:41,556
사이트를 읽는 사람의
컴퓨터의 기본 서체가 사용됩니다

31
00:01:41,556 --> 00:01:45,307
여러분은 두 개의 산세리프체를
보고 있을지도 몰라요

32
00:01:45,317 --> 00:01:47,595
만약 여러분들의 컴퓨터와
제 기본 서체가 다르다면요

33
00:01:47,595 --> 00:01:54,330
하지만 그 웹페이지를 보는 사람에게

34
00:01:54,330 --> 00:01:56,703
저와 같은 폰트를 보여주고
싶을 때도 있어요

35
00:01:56,703 --> 00:02:00,150
이런 경우에는 폰트 이름을
설정할 수 있어요

36
00:02:00,150 --> 00:02:03,150
예를 들자면
Helvetica로 하죠

37
00:02:03,150 --> 00:02:08,448
여러분의 컴퓨터와 제 컴퓨터에
Helvetica가 있으면 작동하겠죠

38
00:02:08,448 --> 00:02:10,578
하지만 모든 컴퓨터에
같은 폰트가 있는 건 아니에요

39
00:02:10,578 --> 00:02:14,739
그런 경우 컴퓨터는 그 폰트 속성을 
아예 무시해버려요

40
00:02:14,746 --> 00:02:20,029
다행히도 CSS는 대비책으로
'백업' 폰트를 제공해요

41
00:02:20,029 --> 00:02:22,984
컴퓨터에 특정 폰트가
없을 경우를 위해서요

42
00:02:22,984 --> 00:02:28,531
'Helvetica'뒤에 쉼표를 찍고
'sans-serif'를 쓰세요

43
00:02:28,531 --> 00:02:31,087
이제 컴퓨터는 Helvetica체를
찾을 거에요

44
00:02:31,087 --> 00:02:35,098
만약 없다면 기본
산세리프체를 쓸거에요

45
00:02:35,098 --> 00:02:39,300
Helvetica 처럼 특정 폰트의
이름을 사용하고 싶을 때

46
00:02:39,324 --> 00:02:44,565
이렇게 백업 폰트 종류를
같이 써줘야 해요

47
00:02:44,565 --> 00:02:50,159
세리프와 산세리프 말고도
몇 개의 기본 font-family가 있어요

48
00:02:50,159 --> 00:02:58,404
이 가사를 손글씨처럼 쓰려면 
'font-family:cursive' 를 지정할 수 있어요

49
00:02:58,404 --> 00:03:04,974
멋들어지게 쓰고 싶다면
‘fantasy’ font-family를 해보면 됩니다

50
00:03:04,974 --> 00:03:08,305
아니면 타자기로 쓴 것처럼
보이게 하고 싶다면요?

51
00:03:08,305 --> 00:03:11,254
'monospace' 종류를
쓸 수도 있죠

52
00:03:11,254 --> 00:03:14,016
'monospace'체는
폭이 고정되어있어요

53
00:03:14,016 --> 00:03:16,486
모든 글자들이 똑같은 폭을
가진다는 뜻이죠

54
00:03:16,486 --> 00:03:20,301
여기 칸아카데미에서도 많은
모노스페이스체를 보셨을 거에요

55
00:03:20,301 --> 00:03:24,008
왜냐하면 코드 편집기엔 항상
모노스페이스체를 쓰거든요

56
00:03:24,008 --> 00:03:26,596
바로 모든 코드의 줄을
맞추기 위해서에요

57
00:03:26,596 --> 00:03:29,561
단어의 글자 모양에
상관없이 말이에요

58
00:03:29,561 --> 00:03:33,580
이제 폰트를 바꾸는 법을
배웠으니까 잘 사용하세요

59
00:03:33,580 --> 00:03:38,107
사이트를 괜찮게 보이기 위해서는
폰트 종류를 몇 개로 제한하고

60
00:03:38,107 --> 00:03:40,524
같이 썼을 때 어울리는
폰트 짝을 찾으세요

61
00:03:40,524 --> 00:03:45,123
안 예쁘게 하고 싶더래도
여러분 마음이에요

62
00:03:45,123 --> 00:03:48,000
해보는 거에요