글자 크기 30
기본 글자 크기
글자 크기 16
글꼴
serif 글꼴
구글 폰트
글자 크기 30
기본 글자 크기
글자 크기 16
글꼴
serif 글꼴
구글 폰트
글자 크기 30
기본 글자 크기
글자 크기 16
글꼴
serif 글꼴
구글 폰트
<!-- 02_font/02-01_font.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02-01_font</title>
<link href="<https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap>" rel="stylesheet">
</head>
<body>
<h1>text font 속성</h1>
<style type="text/css">
/*
font-size
- 글자 크기 지정
*/
.size { font-size: 30px; }
.default { font-size: 16px; }
</style>
<p class="size"> 글자 크기 30 </p>
<p class="basic"> 기본 글자 크기</p>
<p class="defualt"> 글자 크기 16 </p>
<hr>
<style type="text/css">
/*
font-family
- 폰트를 지정하고, 컴퓨터에 해당 폰트가 없으면 적용되지 않습니다
- 폰트는 여러개 지정이 가능하고, 첫번째 폰트가 없으면 다음에 지정된 폰트가 적용됩니다
마지막 폰트는 OS 에 기본 설치되는 generic-family 폰트( serif, sans-serif, monospace )를 지정하는게 일반적입니다
- 구글 웹폰트
<https://fonts.google.com>
*/
.dotum { font-family: "dotum"; }
.serif { font-family: "abc", serif; }
.google { font-family: "Roboto Slab"; }
</style>
<p class="dotum"> 글꼴 </p>
<p class="serif"> serif 글꼴</p>
<p class="google"> 구글 폰트 </p>
<hr>
<style type="text/css">
/*
font-weight
- 글자 굵기 지정 : normal, bold, lighter
*/
.weight { font-weight: bold; }
.normal { font-weight: normal; }
.light { font-weight: lighter; }
</style>
<p class="weight"> 글자 굵기 </p>
<p class="normal"> 글자 굵기 </p>
<p class="light"> 글자 굵기 </p>
<hr>
<style type="text/css">
/*
font-style
- 글자 기울기 : normal, italic
*/
.italic { font-style: italic; }
.normal { font-style: normal; }
</style>
<p class="italic"> italic </p>
<p class="normal"> 글자 스타일 </p>
<hr>
<style type="text/css">
/*
*/
</style>
<p class=""></p>
<p class=""></p>
<p class=""></p>
<hr>
<style type="text/css">
/*
*/
</style>
<p class=""></p>
<p class=""></p>
<p class=""></p>
<hr>
</body>
</html>