1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙
2. 미리보기로 활용 복습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS - 글꼴 관련 스타일</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&display=swap" rel="stylesheet">
<style>
#ff1 { font-family: 궁서체; }
#ff2 { font-family: 고딕체; }
#ff3 { font-family: 수진체, 궁서체; }
/* 첫번째로 제시한 글꼴이 없을 경우 대체할 글꼴을 나열하여 작성 가능 */
#ff4 {
font-family: "Cute Font", sans-serif;
font-weight: 400;
font-style: normal;
}
#fs1 { font-size: 20px; }
#fs2 { font-size: 1.5em; }
#fs3 { font-size: 180%; }
#fw1 { font-weight: bold; } /* 700 */
#fw2 { font-weight: bolder; } /* 900 */
#fw3 { font-weight: lighter; } /* 100 */
</style>
</head>
<body>
<h1>글꼴 관련 스타일 속성</h1>
<h3>font-family : 글꼴을 지정할 때 사용</h3>
<pre>
선택자 {
font-family : 글꼴명;
}
</pre>
<!-- p#ff$*3 -->
<p id="ff1">글꼴 확인 1</p>
<p id="ff2">글꼴 확인 2</p>
<p id="ff3">글꼴 확인 3</p>
<h3>외부 웹 폰트 적용</h3>
<p>
웹 폰트 제공 사이트 :
<a href="http://fonts.google.com" target="_blank">구글 웹 폰트</a>
</p>
<p id="ff4">글꼴 확인 4</p>
<hr>
<h3>font-size : 글꼴 크기 지정할 때 사용</h3>
<pre>
선택자 {
font-size: 크기(px, em(배수));
}
</pre>
<!-- ul>li#fs$*3 -->
<ul>
<li id="fs1">고정크기 (px) 확인</li>
<li id="fs2">가변크기 (em) 확인</li>
<li id="fs3">가변크기 (%) 확인</li>
</ul>
<hr>
<h3>font-weight : 글꼴 굵기 표현할 때 사용</h3>
<pre>
선택자 {
font-weight : normal | bold | bolder | lighter | 100 ~ 900;
}
</pre>
<!-- ul>li+li#fw$*3 -->
<ul>
<li>원래 글자</li>
<li id="fw1">굵게 표현</li>
<li id="fw2">원래 굵기보다 굵게 표현</li>
<li id="fw3">원래 굵기보다 가늘게 표현</li>
</ul>
<hr>
<h3>font-variant : 영문 텍스트 문구를 작은 크기의 대문자로 변경할 때 사용</h3>
<pre>
선택자 {
font-variant : small-caps;
}
</pre>
<p>I LOVE YOU</p>
<p style="font-variant:small-caps;">i love you</p>
<hr>
<h3>font-style : 텍스트 문구를 기울여서 표현할 때 사용</h3>
<pre>
선택자 {
font-style: normal | italic | oblique;
}
</pre>
<em>em 태그</em>
<p style="font-style:italic;">italic : 기울임 글꼴</p>
<p style="font-style:oblique;">oblique : 원래 글자를 기울여서 표현</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
'##CSS' 카테고리의 다른 글
| 목록 관련 스타일 (0) | 2024.10.20 |
|---|---|
| 텍스트 관련 스타일 (2) | 2024.10.19 |
| 기타선택자 수업내용 복습 (5) | 2024.10.16 |
| 기본 선택자 수업내용 복습 (0) | 2024.10.15 |
| 선택자 우선순위 (0) | 2024.10.14 |