[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.30,Default,,0000,0000,0000,,여러분은 지금까지\N색깔을 바꾸는 것과
Dialogue: 0,0:00:02.30,0:00:05.30,Default,,0000,0000,0000,,페이지의 배경색을\N바꾸는 법을 배웠어요
Dialogue: 0,0:00:05.30,0:00:09.16,Default,,0000,0000,0000,,텍스트와 CSS를 사용해서\N더 많은 것을 할 수 있죠
Dialogue: 0,0:00:09.16,0:00:12.58,Default,,0000,0000,0000,,폰트 변경으로\N시작해볼게요
Dialogue: 0,0:00:12.58,0:00:15.92,Default,,0000,0000,0000,,폰트가 뭘까요?\N아마 알고 계실거에요
Dialogue: 0,0:00:15.92,0:00:17.32,Default,,0000,0000,0000,,하지만 이 단어를\N모를 수도 있죠
Dialogue: 0,0:00:17.32,0:00:19.84,Default,,0000,0000,0000,,폰트는 단어를 만드는\N글자의 형태에요
Dialogue: 0,0:00:19.84,0:00:23.22,Default,,0000,0000,0000,,글자를 장식하거나\N두꺼운 정도나
Dialogue: 0,0:00:23.22,0:00:25.94,Default,,0000,0000,0000,,잉크펜으로 적은 것처럼\N보이게 하는 것들 같은거죠
Dialogue: 0,0:00:25.94,0:00:30.76,Default,,0000,0000,0000,,이 페이지의 폰트를 바꾸면서\N보여주는게 나을 것 같네요
Dialogue: 0,0:00:30.76,0:00:35.79,Default,,0000,0000,0000,,모든 문단을 선택하는\Np 태그의 CSS를 봅시다
Dialogue: 0,0:00:35.79,0:00:41.75,Default,,0000,0000,0000,,여기 'font-family'\N속성을 추가할게요
Dialogue: 0,0:00:41.75,0:00:44.14,Default,,0000,0000,0000,,글자가 어떻게\N바뀌었는지 보이세요?
Dialogue: 0,0:00:44.14,0:00:47.36,Default,,0000,0000,0000,,좀 더 간결해졌죠
Dialogue: 0,0:00:47.36,0:00:52.33,Default,,0000,0000,0000,,이번엔 'font-family'를\N'serif'로 바꿔볼게요
Dialogue: 0,0:00:52.33,0:00:55.90,Default,,0000,0000,0000,,좀 더 글자가 복잡해진게\N보이세요?
Dialogue: 0,0:00:55.90,0:00:59.99,Default,,0000,0000,0000,,'serif'폰트 종류는 글자 밑에\N작은 발이 보이는 것 같은 폰트에요
Dialogue: 0,0:00:59.99,0:01:03.12,Default,,0000,0000,0000,,브라우저가 'serif' 종류를 쓰면
Dialogue: 0,0:01:03.14,0:01:05.94,Default,,0000,0000,0000,,컴퓨터의 기본 세리프체를\N사용하게 될 거에요
Dialogue: 0,0:01:05.94,0:01:08.39,Default,,0000,0000,0000,,보통 'Times New Roman'체죠
Dialogue: 0,0:01:08.39,0:01:14.30,Default,,0000,0000,0000,,이번엔 'Sans-serif'체로\N바꿔볼게요
Dialogue: 0,0:01:14.30,0:01:18.03,Default,,0000,0000,0000,,'sans'는 라틴어에서 왔는데\N'제외한' 이라는 뜻이에요
Dialogue: 0,0:01:18.03,0:01:22.14,Default,,0000,0000,0000,,그러니까 Sans-serif체는\N글자에 작은 발이 없는 폰트에요
Dialogue: 0,0:01:22.14,0:01:24.32,Default,,0000,0000,0000,,그래서 글자체가\N좀 더 간결해보이죠
Dialogue: 0,0:01:24.32,0:01:27.75,Default,,0000,0000,0000,,브라우저에게 san-serif ‘font-family’를 사용하라고 하면
Dialogue: 0,0:01:27.75,0:01:30.65,Default,,0000,0000,0000,,컴퓨터의 기본 산세리프체를\N사용할 거에요
Dialogue: 0,0:01:30.65,0:01:33.14,Default,,0000,0000,0000,,보통 'Arial'체나\N'Helvetica'체이죠
Dialogue: 0,0:01:33.14,0:01:35.40,Default,,0000,0000,0000,,하지만 여기 중요한 점이 있어요
Dialogue: 0,0:01:35.40,0:01:37.71,Default,,0000,0000,0000,,이 기본 서체는 작성자가 아니라
Dialogue: 0,0:01:37.71,0:01:41.56,Default,,0000,0000,0000,,사이트를 읽는 사람의\N컴퓨터의 기본 서체가 사용됩니다
Dialogue: 0,0:01:41.56,0:01:45.31,Default,,0000,0000,0000,,여러분은 두 개의 산세리프체를\N보고 있을지도 몰라요
Dialogue: 0,0:01:45.32,0:01:47.60,Default,,0000,0000,0000,,만약 여러분들의 컴퓨터와\N제 기본 서체가 다르다면요
Dialogue: 0,0:01:47.60,0:01:54.33,Default,,0000,0000,0000,,하지만 그 웹페이지를 보는 사람에게
Dialogue: 0,0:01:54.33,0:01:56.70,Default,,0000,0000,0000,,저와 같은 폰트를 보여주고\N싶을 때도 있어요
Dialogue: 0,0:01:56.70,0:02:00.15,Default,,0000,0000,0000,,이런 경우에는 폰트 이름을\N설정할 수 있어요
Dialogue: 0,0:02:00.15,0:02:03.15,Default,,0000,0000,0000,,예를 들자면\NHelvetica로 하죠
Dialogue: 0,0:02:03.15,0:02:08.45,Default,,0000,0000,0000,,여러분의 컴퓨터와 제 컴퓨터에\NHelvetica가 있으면 작동하겠죠
Dialogue: 0,0:02:08.45,0:02:10.58,Default,,0000,0000,0000,,하지만 모든 컴퓨터에\N같은 폰트가 있는 건 아니에요
Dialogue: 0,0:02:10.58,0:02:14.74,Default,,0000,0000,0000,,그런 경우 컴퓨터는 그 폰트 속성을 \N아예 무시해버려요
Dialogue: 0,0:02:14.75,0:02:20.03,Default,,0000,0000,0000,,다행히도 CSS는 대비책으로\N'백업' 폰트를 제공해요
Dialogue: 0,0:02:20.03,0:02:22.98,Default,,0000,0000,0000,,컴퓨터에 특정 폰트가\N없을 경우를 위해서요
Dialogue: 0,0:02:22.98,0:02:28.53,Default,,0000,0000,0000,,'Helvetica'뒤에 쉼표를 찍고\N'sans-serif'를 쓰세요
Dialogue: 0,0:02:28.53,0:02:31.09,Default,,0000,0000,0000,,이제 컴퓨터는 Helvetica체를\N찾을 거에요
Dialogue: 0,0:02:31.09,0:02:35.10,Default,,0000,0000,0000,,만약 없다면 기본\N산세리프체를 쓸거에요
Dialogue: 0,0:02:35.10,0:02:39.30,Default,,0000,0000,0000,,Helvetica 처럼 특정 폰트의\N이름을 사용하고 싶을 때
Dialogue: 0,0:02:39.32,0:02:44.56,Default,,0000,0000,0000,,이렇게 백업 폰트 종류를\N같이 써줘야 해요
Dialogue: 0,0:02:44.56,0:02:50.16,Default,,0000,0000,0000,,세리프와 산세리프 말고도\N몇 개의 기본 font-family가 있어요
Dialogue: 0,0:02:50.16,0:02:58.40,Default,,0000,0000,0000,,이 가사를 손글씨처럼 쓰려면 \N'font-family:cursive' 를 지정할 수 있어요
Dialogue: 0,0:02:58.40,0:03:04.97,Default,,0000,0000,0000,,멋들어지게 쓰고 싶다면\N‘fantasy’ font-family를 해보면 됩니다
Dialogue: 0,0:03:04.97,0:03:08.30,Default,,0000,0000,0000,,아니면 타자기로 쓴 것처럼\N보이게 하고 싶다면요?
Dialogue: 0,0:03:08.30,0:03:11.25,Default,,0000,0000,0000,,'monospace' 종류를\N쓸 수도 있죠
Dialogue: 0,0:03:11.25,0:03:14.02,Default,,0000,0000,0000,,'monospace'체는\N폭이 고정되어있어요
Dialogue: 0,0:03:14.02,0:03:16.49,Default,,0000,0000,0000,,모든 글자들이 똑같은 폭을\N가진다는 뜻이죠
Dialogue: 0,0:03:16.49,0:03:20.30,Default,,0000,0000,0000,,여기 칸아카데미에서도 많은\N모노스페이스체를 보셨을 거에요
Dialogue: 0,0:03:20.30,0:03:24.01,Default,,0000,0000,0000,,왜냐하면 코드 편집기엔 항상\N모노스페이스체를 쓰거든요
Dialogue: 0,0:03:24.01,0:03:26.60,Default,,0000,0000,0000,,바로 모든 코드의 줄을\N맞추기 위해서에요
Dialogue: 0,0:03:26.60,0:03:29.56,Default,,0000,0000,0000,,단어의 글자 모양에\N상관없이 말이에요
Dialogue: 0,0:03:29.56,0:03:33.58,Default,,0000,0000,0000,,이제 폰트를 바꾸는 법을\N배웠으니까 잘 사용하세요
Dialogue: 0,0:03:33.58,0:03:38.11,Default,,0000,0000,0000,,사이트를 괜찮게 보이기 위해서는\N폰트 종류를 몇 개로 제한하고
Dialogue: 0,0:03:38.11,0:03:40.52,Default,,0000,0000,0000,,같이 썼을 때 어울리는\N폰트 짝을 찾으세요
Dialogue: 0,0:03:40.52,0:03:45.12,Default,,0000,0000,0000,,안 예쁘게 하고 싶더래도\N여러분 마음이에요
Dialogue: 0,0:03:45.12,0:03:48.00,Default,,0000,0000,0000,,해보는 거에요