⛏️/HTML | CSS
[CSS] 2. 폰트
defyuil
2023. 9. 22. 14:11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font</title>
<link href="font.css" rel="stylesheet">
<!-- fonts.google -->
<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=Gasoek+One&family=Nanum+Pen+Script&family=Noto+Sans+KR&family=Noto+Serif+KR:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<h1>font-로 시작하는 글자 속성들</h1>
<ul>
<li>font-size:n; 글자 크기 지정</li>
<li>font-weight: ; 글자 두께 지정</li>
<li>font-style: ; 글자 기울기 지정</li>
<li>font-family: ; 글꼴(서체) 지정</li>
</ul>
<section id="sec01">
<h2>1. font-size:n; 글자 크기</h2>
<p class="fs01">font-size:16px; 글자 크기</p>
<p class="fs02">font-size:12px; 글자 크기</p>
<p class="fs03">font-size:20px; 글자 크기</p>
<hr>
<p class="fs04">font-size:1em; 글자 크기 <br>
em은 배수 단위 (상위요소의 크기에 영향을 받음)
</p>
<p class="fs05">font-size:0.75em; 글자 크기</p>
<p class="fs06">font-size:1.25em; 글자 크기</p>
<hr>
<p class="fs07">font-size:1rem; 글자 크기<br>
rem은 배수 단위 (상위요소의 크기에 영향을 받지않음.
r=root, 최상위요소인 html이 기준이 됨.)
</p>
<p class="fs08">font-size:0.75rem; 글자 크기</p>
<p class="fs09">font-size:1.25rem; 글자 크기</p>
</section>
<section id="sec02">
<h2>2. font-weight: ; 글자 두께 </h2>
<p class="fw01">font-weight:100; 글자 두께</p>
<p class="fw02">font-weight:200 ; 글자 두께</p>
<p class="fw03">font-weight:300 ; 글자 두께</p>
<p class="fw04">font-weight:400 ; 글자 두께</p>
<p class="fw05">font-weight:500 ; 글자 두께</p>
<p class="fw06">font-weight:600; 글자 두께</p>
<p class="fw07">font-weight:700 ; 글자 두께</p>
<p class="fw08">font-weight:800 ; 글자 두께</p>
<p class="fw09">font-weight:900 ; 글자 두께</p>
<p class="fw10">font-weight:bold; 글자 두께</p>
<p>
font-weight:<b class="fw11">normal; 글자</b> 두께
</p>
<p class="fw12">font-weight: ; 글자 두께</p>
</section>
<section id="sec03">
<h2>3. font-style: ; 글자 기울기</h2>
<p class="fst01">font-style:italic; 글자 기울기</p>
<p class="fst02">font-style:oblique; 글자 기울기</p>
<p>font-style:
<i class="fst03">normal; 글자</i> 기울기
</p>
</section>
<section id="sec04">
<h2>4. font-family: ; 글꼴(서체) </h2>
<p class="ffm01">font-family:"Verdana", "Arial", "Helvetica", sans-serif; 글꼴</p>
<p class="ffm02">font-family:"Garamond", "Georgia" , serif; 글꼴</p>
<hr>
https://fonts.google.com/
<p class="ffm03">font-family:'Noto Serif KR', serif; 글꼴</p>
<p class="ffm04"> font-
<span class="ffm-np">family</span>: ; 글꼴</p>
<p class="ffm05">font-family: ; 글꼴</p>
<p class="ffm06">font-family: ; 글꼴</p>
</section>
</body>
</html>
@charset "UTF-8";
body {
background-color:#cef;
font-family: 'Noto Sans KR', sans-serif; }
section {border: 4px solid #ccc;
margin: 3em 1em;
padding: 1em; }
h2 {background-color:#ccc;
padding: 0.5em 1em;
color: #333;}
/* 주석단축키=ctrl+shift+/ */
/* 1.font-size:n; 글자 크기 */
#sec01 {font-size: 20px;}
.fs01 {font-size: 16px;
color: #00f;}
.fs02 {font-size: 12px;}
.fs03 {font-size: 20px;}
.fs04 {font-size: 1em;
color: #0d0;}
.fs05 {font-size: 0.75em;}
.fs06 {font-size: 1.25em;}
.fs07 {font-size: 1rem;
color: #00f;}
.fs08 {font-size: 0.75rem;}
.fs09 {font-size: 1.25rem;}
/* 2. font-weight: ; 글자 두께 */
.fw01 {font-weight: 100;}
.fw02 {font-weight: 200;}
.fw03 {font-weight: 300;}
.fw04 {font-weight: 400;}
.fw05 {font-weight: 500;}
.fw06 {font-weight: 600;}
.fw07 {font-weight: 700;}
.fw08 {font-weight: 800;}
.fw09 {font-weight: 900;}
.fw10 {font-weight: bold;
color: #0c0;}
.fw11 {font-weight: normal;
color: #004;}
.fw11:hover {
/* 상태선택자 A:hover는
A에 마우스오버일 때 적용됨 */
font-weight: bold; }
.fw12:hover {font-weight: bold;}
/* 3. font-style: ; 글자 기울기 */
.fst01 {font-style: italic;
color: #0a0;}
.fst02 {font-style: oblique;}
.fst03 {font-style: normal;}
/* 4. font-family: ; 글꼴 */
.ffm01 {font-family:
"Verdana", "Arial", "Helvetica", sans-serif; }
.ffm02 {font-family:
"Garamond", "Georgia" , serif;}
/* https://fonts.google.com
font-family: 'Nanum Pen Script', cursive;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Noto Serif KR', serif;
*/
.ffm03 {font-family: 'Noto Serif KR', serif;}
.ffm-np {font-family: 'Nanum Pen Script', cursive;}
