-
여러분은 지금까지
색깔을 바꾸는 것과
-
페이지의 배경색을
바꾸는 법을 배웠어요
-
텍스트와 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'체는
폭이 고정되어있어요
-
모든 글자들이 똑같은 폭을
가진다는 뜻이죠
-
여기 칸아카데미에서도 많은
모노스페이스체를 보셨을 거에요
-
왜냐하면 코드 편집기엔 항상
모노스페이스체를 쓰거든요
-
바로 모든 코드의 줄을
맞추기 위해서에요
-
단어의 글자 모양에
상관없이 말이에요
-
이제 폰트를 바꾸는 법을
배웠으니까 잘 사용하세요
-
사이트를 괜찮게 보이기 위해서는
폰트 종류를 몇 개로 제한하고
-
같이 썼을 때 어울리는
폰트 짝을 찾으세요
-
안 예쁘게 하고 싶더래도
여러분 마음이에요
-
해보는 거에요
