앞에 이어서 텍스트의 여러가지 요소를 변경합니다.
font-family
텍스트 폰트를 선택해 줍니다.
일단 원하는 폰트를 설정한 후, 만약 그 폰트가 구현이 안될경우 기본으로 사용할 폰트를 골라야 합니다.
serif와 sans-serif가 있는데 자신이 적용한 폰트가 삐침이 있으면 serif,
삐침이 없이 고딕같은 폰트라면 sans-serif를 선택합니다.
두가지 폰트 선택시의 차이를 볼까요
<p class="change_sans">sans-serif 삐침이 없어요</p>
<p class="change_serif">serif 삐침이 있어요</p>
CSS
<style>
p.change_sans {font-family:sans-serif;}
p.change_serif {font-family:serif;}
</style>
sans-serif 삐침이 없어요
serif 삐침이 있어요
sans-serif와 serif의 차이를 아시겠나요?
http://www.google.com/fonts/에 가면 다양한 폰트들이 있습니다.
여기서 폰트를 골라서 font-family에 적용하면 됩니다. 일단 원하는 폰트를 고릅니다.
quick-use 클릭 후 head태그 안에 cdn을 넣어주고 style안에 font-family를 설정해 줍니다.
잘 모르겠나요? <link ~> 모여있는 곳에 link태그 복사해서 넣어주시구
폰트를 적용할 부분에 font-family부분을 고대로 복사해 넣어 줍니다.
원하는 폰트로 적용해 보세요.
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<p class="change_family">Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
</body>
CSS
<style>
p.change_family {font-family: 'Oswald', sans-serif;}
</style>
Grumpy wizards make toxic brew for the evil Queen and Jack.
font-size
폰트의 크기를 지정합니다. px이나 em으로 설정할 수 있습니다.
px은 절대적인 크기입니다. 12px은 어디를 가도 12px의 크기입니다.
em은 상대적인 크기입니다. default값에 따라 달라집니다. 쉽게 말하면 em은 배수 입니다.
1em은 기본 사이즈와 똑같은 크기입니다. 기본적으로 브라우저에서 읽는 기본 사이즈는 16px입니다.
1.2em은 기본 사이즈의 1.2배, 즉 16px의 1.2배 입니다.
<p>폰트 사이즈 기본 16px</p>
<p class="change_sizePx">폰트 사이즈 20px</p>
<p class="change_sizeEm">폰트 사이즈 2em = 32px</p>
CSS
<style>
p.change_sizePx {font-size:20px;}
p.change_sizeEm {font-size:2em;}
</style>
폰트 사이즈 기본 16px
폰트 사이즈 20px
폰트 사이즈 2em = 32px
font-weight
이름 그대로 폰트의 두께를 지정하는 요소입니다. 뚱땡이냐 아니냐 결정합니다.
100~900까지 숫자로도 지정하지만 거의 얇거나 두껍거나 두가지로 밖에 안보이기 때문에
대부분 normal 아니면 bold을 value값으로 사용합니다.
<p>기본값 normal</p>
<p class="change_bold">두껍게 bold</p>
CSS
<style>
p.change_bold {font-weight:bold;}
</style>
기본값 normal
두껍게 bold
'css' 카테고리의 다른 글
| 09. opacity _ 투명도 조절 (0) | 2015.11.27 |
|---|---|
| 08. list-style _ 리스트 말머리 변경 (0) | 2015.11.26 |
| 06. text요소 _ 텍스트 꾸밈 요소 (0) | 2015.11.11 |
| 05. color 표기법 _ 16진수, 컬러네임, rgb (0) | 2015.11.10 |
| 04. background _ 배경 효과 (0) | 2015.11.10 |
