[CSS] 글꼴 관련 스타일
컴퓨터/CSS<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Diphylleia&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playwrite+NZ:wght@100..400&display=swap" rel="stylesheet">
<title>글꼴 관련 스타일</title>
</head>
<body>
<h1>글꼴 관련 스타일 속성(font~ )</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>
<!--------------------------- style --------------------------->
<style>
#ff1 {font-family: 궁서체;}
#ff2 {font-family: HYSNRL;}
#ff3 {font-family: 바탕체, 궁서체;}
</style>
<br><br>
<h3>* 외부 웹 폰트 사용하는 방법</h3>
<p>
웹 폰트 사이트 : <a href="https://fonts.google.com/">구글 폰트</a>
</p>
<p id="wf1">외부 글꼴 테스트1</p>
<p id="wf2">Lorem ipsum dolor sit amet.</p>
<p id="wf3">Lorem ipsum dolor sit amet.</p>
<style>
#wf1 {
font-family: "Diphylleia", serif;
font-weight: 400;
}
#wf2 {
font-family: "Playwrite NZ", cursive;
font-weight: 400;
}
#wf3 {
font-family: "Playfair Display", serif;
font-weight: 400;
}
</style>
<br>
<h3>font-size : 글꼴의 크기를 변경할 때 사용</h3>
<pre>
선택자 {font-size:크기(px | em | rem | %)}
- px : 픽셀 단위로 고정크기
- em : 부모요소 글꼴 크기의 배수
- rem : HTML태그의 폰트 크기의 비율로 계산(배수 1.5rem)
- % : 상위요소 폰트 크기의 비율로 계산(150%)
- vw, vh : 현재 보이는 창의 크기에 따라 값이 변한다.(창의 width:1000px -> 1vw : 10px, height:1000px -> 1vh : 10px)
옵션들
xx-small : 10px
x-small : 10px
small : 13px
medium : 16px (기본값)
large : 18px
x-large : 24px
xx-large : 32px
* 상대값
larger : 부모의 글자크기에 120%
smaller : 부모의 글자크기에 부모*1/6
</pre>
<ul>
<li id="fs1">고정크기 px테스트</li>
<li id="fs2">가변크기 em테스트</li>
<li id="fs3">가변크기 rem테스트</li>
<li id="fs4">가변크기 %테스트</li>
</ul>
<!--------------------------- style --------------------------->
<style>
#fs1 {font-size: 20px;}
#fs2 {font-size: 1.5em;} /* 원래크기에 1.5배 */
#fs3 {font-size: 1.5rem;}
#fs4 {font-size: 150%;}
</style>
<br><br>
<h3>font-weight : 글꼴의 두께 지정</h3>
<pre>
선택자 {
font-weight:nomal | bolder | lighter | 100 | 400(보통) | 900;
}
</pre>
<ul>
<li>원래 굵기</li>
<li id="fw1">굵은 글꼴로 변경</li>
<li id="fw2">원래 굵기보다 더 굵게</li>
<li id="fw3">원래 굵기보다 더 가늘게</li>
</ul>
<!--------------------------- style --------------------------->
<style>
#fw1 {font-weight: bold;} /* 700 bold만 쓴다. 나머진 잘 안쓴다.*/
#fw2 {font-weight: 900;}
#fw3 {font-weight: lighter;} /* 100 */
</style>
<br><br>
<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>.
<br><br>
<h3>font-style : 텍스트 문구를 기울이고자 할 때 사용</h3>
<pre>
선택자 {
font-style:nomal | italic | oblique; <!-- italic을 더 자주 사용. oblique 차이가 거의 없다. -->
}
</pre>
<p style="font-style: italic;">Lorem ipsum dolor sit amet.</p>
<p style="font-style: oblique;">Lorem ipsum dolor sit amet.</p>
</body>
</html>
<화면>
'컴퓨터 > CSS' 카테고리의 다른 글
| [CSS] 목록 관련 스타일 (0) | 2024.06.27 |
|---|---|
| [CSS] 텍스트 관련 스타일 (0) | 2024.06.27 |
| [CSS] 선택자 우선순위 (0) | 2024.06.27 |
| [CSS] 기타 선택자 (2) | 2024.06.27 |
| [CSS] 기본 선택자 (0) | 2024.06.26 |