[CSS] font -로 시작하는 글자 속성들

• font-size:n; 글자 크기 지정
• font-weight: ; 글자 두께 지정
• font-style: ; 글자 기울기 지정
• font-family: ; 글자 폰트 지정

font-size:n; 글자 크기 지정

px : 글자크기

em : 배수(상위요소의 크기에 영향을 받음)

rem : 배수 (상위요소의 크기에 영향을 받지않음)(r=root)

em은 배수이기 때문에 자신을 둘러싼 상위 속성을 기준으로 그 배수의 크기로 바뀜 (상대적인 크기)

rem은 상위요소의 크기에 영향을 받지않음

<section id="sec01">
 <fieldset>
	<legend class="h2">1.font-size:n; 글자 크기 지정</legend>
	<p class="h3">[px로 크기지정]</p>
	<p class="fs01">font-size:16px; 글자 크기</p>
	<p class="fs02">font-size:12px; 글자 크기</p>
	<p class="fs03">font-size:20px; 글자 크기</p><hr>
	
	<p class="h3">[em으로 크기지정]<br>
	em : 배수 단위 (상위요소의 크기에 영향을 받음)</p>
	<p class="fs04">font-size:1em; 글자 크기</p>
	<p class="fs05">font-size:0.75em; 글자 크기</p>
	<p class="fs06">font-size:1.25em; 글자 크기</p><hr>
	
	<p class="h3">[rem으로 크기지정]<br>
	rem : 배수 단위 (상위요소의 크기에 영향을 받지않음)(r=root)</p>
	<p class="fs07">font-size:1rem; 글자 크기</p>
	<p class="fs08">font-size:0.75rem; 글자 크기</p>
	<p class="fs09">font-size:1.25rem; 글자 크기</p>
</fieldset>
</section><br>

#sec01 {
	font-size: 20px;
}
.h2 {
	font-weight: bold; 
	font-size: 28px;
}
.h3 {
	font-weight: bold; 
	font-size: 20px;
}
.fs01 {
	font-size: 16px;
	color : #000080;
}
.fs02 {
	font-size: 12px;
	color : #20B2AA;
}
.fs03 {
	font-size: 20px;
	color : #FF69B4;
}
.fs04 {
	font-size: 1em;
	color : #000080;
}
.fs05 {
	font-size: 0.75em;
	color : #20B2AA;
}
.fs06 {
	font-size: 1.25em;
	color : #FF69B4;
}
.fs07 {
	font-size: 1rem;
	color : #000080;
}
.fs08 {
	font-size: 0.75rem;
	color : #20B2AA;
}
.fs09 {
	font-size: 1.25rem;
	color : #FF69B4;
}

 

font-weight: ; 글자 두께 지정

<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><hr>
	<p class="fw10">font-weight: bold;</p>

.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 : #EE82EE;
}

 

상태선택자

<!-- 상태 선택자 -->
	<p>font-weight:<b class="fw11">normal; 글자</b> 두께</p>

/* 상태선택자 A:hover는 A에 마우스오버일 때 적용됨 */
.fw11:hover {font-weight: bold;}

<!--🌟🌟🌟 2. font-weight: ; 글자 두께 지정 🌟🌟🌟-->
<fieldset>
	<legend class="h2">2. font-weight: ; 글자 두께 지정</legend>
	<p class="h3">글자 두께 100~900</p>
	<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><hr>
	
	<!-- 상태 선택자 -->
	<p class="h3">상태선택자</p>
	<p>font-weight:<b class="fw11">normal; 글자</b> 두께</p> <hr>
	
	<!--🌟🌟🌟 연습문제 🌟🌟🌟-->
	<p class="h3">hover 연습문제</p>
	<p class="fw12">font-weight:글자 두께</p> 
	
</fieldset><br>

/* 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 : #EE82EE;
}
.fw11 {
	font-weight: normal;
	color : #EE82EE;
}
/* 상태선택자 A:hover는 A에 마우스오버일 때 적용됨 */
.fw11:hover {font-weight: bold;}
.fw12:hover {font-weight: bold;}

 

3. font-style: ; 글자 기울기 지정

margin : 바깥쪽여백

paddding : 안쪽여백

<!--🌟🌟🌟 3. font-style: ; 글자 기울기 지정 🌟🌟🌟-->
<section>
<fieldset>
	<legend class="h2">3. font-style: ; 글자 기울기 지정</legend>
	<p class="h3">글자 두께 100~900</p>
	<p class="fst01">font-style: italic;</p>
	<p class="fst02">font-style: oblique;</p>
	<p>font-style:<i class="fst03">normal; 글자</i> 기울기</p>
</fieldset>
</section>

/* 3. font-style: ; 글자 기울기 지정 */
.fst01 {font-style: italic;}
.fst02 {font-style: oblique;}

.fst03 {font-style: normal;}
.fst03:hover {font-style: italic; color : #FF69B4;}

 

4. font-family: ; 글자 폰트 지정

1. Serif
   각 글자의 가장자리에 작은 획이 있습니다. 그들은 격식과 우아함을 만들어냅니다.
2. Sans-serif
   글꼴에는 깔끔한 선이 있습니다(작은 획이 첨부되지 않음). 모던하고 미니멀한 룩을 연출합니다.
3. Monospace
   모든 문자가 동일한 고정 폭을 갖습니다. 기계적인 모습을 연출합니다.
4. Cursive
   사람의 손글씨를 모방합니다.
5. Fantasy
   장식적이고 재미있는 글꼴입니다.

사용법

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

 

사용해부자

<!--🌟🌟🌟 4. font-family: ; 글자 폰트 지정 🌟🌟🌟-->
<section>
<fieldset>
	<legend class="h2">4. font-family: ; 글자 폰트 지정</legend>
	<p class="ffm01">font-family: serif; 글꼴</p>
	<p class="ffm02">font-family: sans-serif; 글꼴</p>
	<p class="ffm03">font-family: monospace; 글꼴</p>
	<p class="ffm04">font-family: cursive; 글꼴</p>
	<p class="ffm05">font-family: inherit; 글꼴</p>
</fieldset>
</section>

/* 4. font-family: ; 글자 폰트 지정 */
.ffm01 {font-family: "Times New Roman","Georgia","Garamond", serif; }
.ffm02 {font-family: "Arial","vardana","Helvetica", sans-serif; }
.ffm03 {font-family: "Courier New","Lucida Console","Monaco", monospace;}
.ffm04 {font-family: "Brush Script MT","Lucida Handwriting", cursive;}
.ffm05 {font-family: "Copperplate","Papyrus", inherit;}

 

google fonts로 폰트 찾기

Browse Fonts - Google Fonts

Browse Fonts - Google Fonts

<!--🌟🌟🌟 4. font-family: ; 글자 폰트 지정 🌟🌟🌟-->
<section>
<fieldset>
	<legend class="h2">4. font-family: ; 글자 폰트 지정</legend>
	<p class="ffm01">font-family: serif; 글꼴</p>
	<p class="ffm02">font-family: sans-serif; 글꼴</p>
	<p class="ffm03">font-family: monospace; 글꼴</p>
	<p class="ffm04">font-family: cursive; 글꼴</p>
	<p class="ffm05">font-family: inherit; 글꼴</p><hr>
	
	<p class="h3">🍒google fonts에서 다운받은 글꼴</p>
	<p class="ffm06">font-family: 'Gamja Flower', cursive; 글꼴</p>
	<p class="ffm07">font-family: 'Stylish', sans-serif; 글꼴</p>
	<p class="ffm08">font-family: 'Bagel Fat One', cursive; 글꼴</p>
</fieldset>
</section>

/* 4. font-family: ; 글자 폰트 지정 */
.ffm01 {font-family: "Times New Roman","Georgia","Garamond", serif; }
.ffm02 {font-family: "Arial","vardana","Helvetica", sans-serif; }
.ffm03 {font-family: "Courier New","Lucida Console","Monaco", monospace;}
.ffm04 {font-family: "Brush Script MT","Lucida Handwriting", cursive;}
.ffm05 {font-family: "Copperplate","Papyrus", inherit;}
/* google fonts */
.ffm06 {font-family: 'Gamja Flower', cursive;}
.ffm07 {font-family: 'Stylish', sans-serif;}
.ffm08 {font-family: 'Bagel Fat One', cursive;}