여러분은 지금까지
색깔을 바꾸는 것과

페이지의 배경색을
바꾸는 법을 배웠어요

텍스트와 CSS를 사용해서
더 많은 것을 할 수 있죠

폰트 변경으로
시작해볼게요

폰트가 뭘까요?
아마 알고 계실거에요

하지만 이 단어를
모를 수도 있죠

폰트는 단어를 만드는
글자의 형태에요

글자를 장식하거나
두꺼운 정도나

잉크펜으로 적은 것처럼
보이게 하는 것들 같은거죠

이 페이지의 폰트를 바꾸면서
보여주는게 나을 것 같네요

모든 문단을 선택하는
p 태그의 CSS를 봅시다

여기 'font-family'
속성을 추가할게요

글자가 어떻게
바뀌었는지 보이세요?

좀 더 간결해졌죠

이번엔 'font-family'를
'serif'로 바꿔볼게요

좀 더 글자가 복잡해진게
보이세요?

'serif'폰트 종류는 글자 밑에
작은 발이 보이는 것 같은 폰트에요

브라우저가 'serif' 종류를 쓰면

컴퓨터의 기본 세리프체를
사용하게 될 거에요

보통 'Times New Roman'체죠

이번엔 'Sans-serif'체로
바꿔볼게요

'sans'는 라틴어에서 왔는데
'제외한' 이라는 뜻이에요

그러니까 Sans-serif체는
글자에 작은 발이 없는 폰트에요

그래서 글자체가
좀 더 간결해보이죠

브라우저에게 san-serif ‘font-family’를 사용하라고 하면

컴퓨터의 기본 산세리프체를
사용할 거에요

보통 'Arial'체나
'Helvetica'체이죠

하지만 여기 중요한 점이 있어요

이 기본 서체는 작성자가 아니라

사이트를 읽는 사람의
컴퓨터의 기본 서체가 사용됩니다

여러분은 두 개의 산세리프체를
보고 있을지도 몰라요

만약 여러분들의 컴퓨터와
제 기본 서체가 다르다면요

하지만 그 웹페이지를 보는 사람에게

저와 같은 폰트를 보여주고
싶을 때도 있어요

이런 경우에는 폰트 이름을
설정할 수 있어요

예를 들자면
Helvetica로 하죠

여러분의 컴퓨터와 제 컴퓨터에
Helvetica가 있으면 작동하겠죠

하지만 모든 컴퓨터에
같은 폰트가 있는 건 아니에요

그런 경우 컴퓨터는 그 폰트 속성을 
아예 무시해버려요

다행히도 CSS는 대비책으로
'백업' 폰트를 제공해요

컴퓨터에 특정 폰트가
없을 경우를 위해서요

'Helvetica'뒤에 쉼표를 찍고
'sans-serif'를 쓰세요

이제 컴퓨터는 Helvetica체를
찾을 거에요

만약 없다면 기본
산세리프체를 쓸거에요

Helvetica 처럼 특정 폰트의
이름을 사용하고 싶을 때

이렇게 백업 폰트 종류를
같이 써줘야 해요

세리프와 산세리프 말고도
몇 개의 기본 font-family가 있어요

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

멋들어지게 쓰고 싶다면
‘fantasy’ font-family를 해보면 됩니다

아니면 타자기로 쓴 것처럼
보이게 하고 싶다면요?

'monospace' 종류를
쓸 수도 있죠

'monospace'체는
폭이 고정되어있어요

모든 글자들이 똑같은 폭을
가진다는 뜻이죠

여기 칸아카데미에서도 많은
모노스페이스체를 보셨을 거에요

왜냐하면 코드 편집기엔 항상
모노스페이스체를 쓰거든요

바로 모든 코드의 줄을
맞추기 위해서에요

단어의 글자 모양에
상관없이 말이에요

이제 폰트를 바꾸는 법을
배웠으니까 잘 사용하세요

사이트를 괜찮게 보이기 위해서는
폰트 종류를 몇 개로 제한하고

같이 썼을 때 어울리는
폰트 짝을 찾으세요

안 예쁘게 하고 싶더래도
여러분 마음이에요

해보는 거에요