WEBVTT

00:00:00.000 --> 00:00:02.303
여러분은 지금까지
색깔을 바꾸는 것과

00:00:02.303 --> 00:00:05.303
페이지의 배경색을
바꾸는 법을 배웠어요

00:00:05.303 --> 00:00:09.162
텍스트와 CSS를 사용해서
더 많은 것을 할 수 있죠

00:00:09.162 --> 00:00:12.582
폰트 변경으로
시작해볼게요

00:00:12.582 --> 00:00:15.925
폰트가 뭘까요?
아마 알고 계실거에요

00:00:15.925 --> 00:00:17.324
하지만 이 단어를
모를 수도 있죠

00:00:17.324 --> 00:00:19.837
폰트는 단어를 만드는
글자의 형태에요

00:00:19.837 --> 00:00:23.216
글자를 장식하거나
두꺼운 정도나

00:00:23.216 --> 00:00:25.943
잉크펜으로 적은 것처럼
보이게 하는 것들 같은거죠

00:00:25.943 --> 00:00:30.756
이 페이지의 폰트를 바꾸면서
보여주는게 나을 것 같네요

00:00:30.756 --> 00:00:35.791
모든 문단을 선택하는
p 태그의 CSS를 봅시다

00:00:35.791 --> 00:00:41.747
여기 'font-family'
속성을 추가할게요

00:00:41.747 --> 00:00:44.139
글자가 어떻게
바뀌었는지 보이세요?

00:00:44.139 --> 00:00:47.355
좀 더 간결해졌죠

00:00:47.355 --> 00:00:52.333
이번엔 'font-family'를
'serif'로 바꿔볼게요

00:00:52.333 --> 00:00:55.902
좀 더 글자가 복잡해진게
보이세요?

00:00:55.902 --> 00:00:59.989
'serif'폰트 종류는 글자 밑에
작은 발이 보이는 것 같은 폰트에요

00:00:59.989 --> 00:01:03.119
브라우저가 'serif' 종류를 쓰면

00:01:03.139 --> 00:01:05.944
컴퓨터의 기본 세리프체를
사용하게 될 거에요

00:01:05.944 --> 00:01:08.394
보통 'Times New Roman'체죠

00:01:08.394 --> 00:01:14.304
이번엔 'Sans-serif'체로
바꿔볼게요

00:01:14.304 --> 00:01:18.026
'sans'는 라틴어에서 왔는데
'제외한' 이라는 뜻이에요

00:01:18.026 --> 00:01:22.140
그러니까 Sans-serif체는
글자에 작은 발이 없는 폰트에요

00:01:22.140 --> 00:01:24.322
그래서 글자체가
좀 더 간결해보이죠

00:01:24.322 --> 00:01:27.747
브라우저에게 san-serif ‘font-family’를 사용하라고 하면

00:01:27.747 --> 00:01:30.646
컴퓨터의 기본 산세리프체를
사용할 거에요

00:01:30.646 --> 00:01:33.136
보통 'Arial'체나
'Helvetica'체이죠

00:01:33.136 --> 00:01:35.400
하지만 여기 중요한 점이 있어요

00:01:35.400 --> 00:01:37.710
이 기본 서체는 작성자가 아니라

00:01:37.710 --> 00:01:41.556
사이트를 읽는 사람의
컴퓨터의 기본 서체가 사용됩니다

00:01:41.556 --> 00:01:45.307
여러분은 두 개의 산세리프체를
보고 있을지도 몰라요

00:01:45.317 --> 00:01:47.595
만약 여러분들의 컴퓨터와
제 기본 서체가 다르다면요

00:01:47.595 --> 00:01:54.330
하지만 그 웹페이지를 보는 사람에게

00:01:54.330 --> 00:01:56.703
저와 같은 폰트를 보여주고
싶을 때도 있어요

00:01:56.703 --> 00:02:00.150
이런 경우에는 폰트 이름을
설정할 수 있어요

00:02:00.150 --> 00:02:03.150
예를 들자면
Helvetica로 하죠

00:02:03.150 --> 00:02:08.448
여러분의 컴퓨터와 제 컴퓨터에
Helvetica가 있으면 작동하겠죠

00:02:08.448 --> 00:02:10.578
하지만 모든 컴퓨터에
같은 폰트가 있는 건 아니에요

00:02:10.578 --> 00:02:14.739
그런 경우 컴퓨터는 그 폰트 속성을 
아예 무시해버려요

00:02:14.746 --> 00:02:20.029
다행히도 CSS는 대비책으로
'백업' 폰트를 제공해요

00:02:20.029 --> 00:02:22.984
컴퓨터에 특정 폰트가
없을 경우를 위해서요

00:02:22.984 --> 00:02:28.531
'Helvetica'뒤에 쉼표를 찍고
'sans-serif'를 쓰세요

00:02:28.531 --> 00:02:31.087
이제 컴퓨터는 Helvetica체를
찾을 거에요

00:02:31.087 --> 00:02:35.098
만약 없다면 기본
산세리프체를 쓸거에요

00:02:35.098 --> 00:02:39.300
Helvetica 처럼 특정 폰트의
이름을 사용하고 싶을 때

00:02:39.324 --> 00:02:44.565
이렇게 백업 폰트 종류를
같이 써줘야 해요

00:02:44.565 --> 00:02:50.159
세리프와 산세리프 말고도
몇 개의 기본 font-family가 있어요

00:02:50.159 --> 00:02:58.404
이 가사를 손글씨처럼 쓰려면 
'font-family:cursive' 를 지정할 수 있어요

00:02:58.404 --> 00:03:04.974
멋들어지게 쓰고 싶다면
‘fantasy’ font-family를 해보면 됩니다

00:03:04.974 --> 00:03:08.305
아니면 타자기로 쓴 것처럼
보이게 하고 싶다면요?

00:03:08.305 --> 00:03:11.254
'monospace' 종류를
쓸 수도 있죠

00:03:11.254 --> 00:03:14.016
'monospace'체는
폭이 고정되어있어요

00:03:14.016 --> 00:03:16.486
모든 글자들이 똑같은 폭을
가진다는 뜻이죠

00:03:16.486 --> 00:03:20.301
여기 칸아카데미에서도 많은
모노스페이스체를 보셨을 거에요

00:03:20.301 --> 00:03:24.008
왜냐하면 코드 편집기엔 항상
모노스페이스체를 쓰거든요

00:03:24.008 --> 00:03:26.596
바로 모든 코드의 줄을
맞추기 위해서에요

00:03:26.596 --> 00:03:29.561
단어의 글자 모양에
상관없이 말이에요

00:03:29.561 --> 00:03:33.580
이제 폰트를 바꾸는 법을
배웠으니까 잘 사용하세요

00:03:33.580 --> 00:03:38.107
사이트를 괜찮게 보이기 위해서는
폰트 종류를 몇 개로 제한하고

00:03:38.107 --> 00:03:40.524
같이 썼을 때 어울리는
폰트 짝을 찾으세요

00:03:40.524 --> 00:03:45.123
안 예쁘게 하고 싶더래도
여러분 마음이에요

00:03:45.123 --> 00:03:48.000
해보는 거에요