반응형
10. font
1) font-family
font-family는 서체를 지정하는 속성입니다. 아래와 같은 방법으로 합니다.
h1{
font-family: "Times New Roman", Times, serif;
}
위 코드의 의미는 h1 태그를 Times New Roman을 지정합니다. 그런데 사용자의 컴퓨터에 폰트가 없으면 Times를 사용하게 됩니다.
이때 마지막 폰트는 포괄적인 폰트로 지정합니다. 아래와 같은 것이 있습니다.
serif (장식이있는폰트)
sans-serif
cursive (흘림체)
fantasy
monospace (고정폭)
2) font-weight
폰트의 두께를 나타냅니다. 대체로 bold만 기억하시면 됩니다. bold를 사용하면 폰트가 두껍게 표시됩니다.
h1{
font-weight: bold;
}
3) line-height
행과 행 사이의 간격을 지정합니다. 기본값은 normal로 수치로는 1.2에 해당합니다. 이 수치를 기준으로 간격을 조정하면 됩니다. 값이 1.2라면 현재 엘리먼트 폰트 크기의 1.2배만큼 간격을 준다는 의미입니다.
p{
line-height: 1.3;
}
4) font
폰트와 관련된 여러 속성을 축약형으로 표현하는 속성입니다. 형식은 아래와 같습니다. 순서를 지켜서 기술하셔야 합니다.
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
이 중에서 font-size와 font-size와 font-family는 필수로 포함되어야 하는 정보입니다.
h1{
font: 15px arial, sans-serif;
}
font_family.html
<!DOCTYPE html>
<html>
<head>
<style>
#type1{
font-size:5rem;
font-family: arial, verdana, "Helvetica Neue", serif;
font-weight: bold;
line-height: 2;
}
#type2{
font:bold 5rem/2 arial, verdana, "Helvetica Neue", serif;
}
</style>
</head>
<body>
<pid="type1">
Hello world<br>
Hello world
</p>
<pid="type2">
Hello world<br>
Hello world
</p>
</body>
</html>
'프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 정리 - 13. bracket 도구사용법 (0) | 2017.10.14 |
|---|---|
| 생활코딩 css 정리 - 12. 캐스캐이딩 (0) | 2017.10.13 |
| 생활코딩 css 정리 - 11. 웹폰트 (0) | 2017.10.13 |
| 생활코딩 css 정리 - 10. 서체 (0) | 2017.10.03 |
| 생활코딩 css 정리 - 8. color 그리고 text-align (0) | 2017.09.30 |
| 생활코딩 css 정리 - 7. font-size (0) | 2017.09.26 |
| 생활코딩 css 정리 - 6. 속성을 공부하는 방법 (0) | 2017.09.25 |
| 생활코딩 css 정리 - 5. 가상 클래스 선택자 (0) | 2017.09.25 |