font로 시작하는 속성s
- font-size: ; 글자 크기
- font-weight: ; 글자 두께
- font-style: ; 글자 기울기
- font-family: ; 글꼴(서체)
1. font-size
- 글자 크기를 줄이거나 키울 수 있고 기본값은 16px이다
- 사이즈 단위로는 px, em, rem 등이 있다
1. font-size | 예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* section {font-size: 20px;} */
.fs01 {font-size: 16px;}
.fs02 {font-size: 12;}
.fs03 {font-size: 20px;}
.fs04 {font-size: 1em;}
.fs05 {font-size: 0.75em;}
.fs06 {font-size: 1.25em;}
.fs07 {font-size: 1rem;}
.fs08 {font-size: 0.75rem;}
.fs09 {font-size: 1.25rem;}
</style>
</head>
<body>
<section>
<h2>font-size: ; 글자 크기</h2>
<p class="fs01">font-size:16px; 기본 글자 크기</p>
<p class="fs02">font-size:12px; 글자 크기</p>
<p class="fs03">font-size:20px; 글자 크기</p>
<hr>
<h3>단위 em은 기준이 되는 글자의 크기에 대해 ~배를 의미.<br>
(1em=16px이나 상위요소의 변화에 따라 같이 달라짐)</h3>
<p class="fs04">font-size:1em; 글자 크기. <br></p>
<p class="fs05">font-size:0.75em; 글자 크기</p>
<p class="fs06">font-size:1.25em; 글자 크기</p>
<hr>
<h3>단위 rem은 최상위요소의 크기에 대해 ~배를 의미.<br>
(1rem=16px)</h3>
<p class="fs07">font-size:1rem; 글자 크기<br>
<p class="fs08">font-size:0.75rem; 글자 크기</p>
<p class="fs09">font-size:1.25rem; 글자 크기</p>
</section>
</body>
</html>
1. font-size | 결과창
2. font-weight
- 글자 두께를 두껍게 할 수 있다
2. font-weight | 예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.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;}
.fw11 {font-size:12px;
font-weight: normal;
color: #e90;}
.fwn {font-weight: normal;}
</style>
</head>
<body>
<section>
<h2>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 class="fw11">font-weight:<b class="fwn">normal</b>;
글자 두께를 보통으로</p>
<p class="fw12">
font-<span class="fw10">weight:bold</span>; 글자 두께</p>
</section>
</body>
</html>2. font-weight | 결과 창
3. font-style
- 기울이기 정도(?)를 할 수 있다
3. font-style | 예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.fst01 {font-style: italic;}
.fst02 {font-style: oblique;}
.fst03 {font-style: normal;}
.fst03:hover {
/* 선택자 A:hover는
A에 마우스오버시 상태를 지정하는
상태선택자 */
font-style: italic; }
</style>
</head>
<body>
<section>
<h2>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>
</body>
</html>3. font-style | 결과 창
4. font-family
- 글꼴을 변경 가능하며 기본에서 들고오거나 사이트에서 들고와 사용 할 수 있다.
4. font-family | 예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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=Hi+Melody&family=Nanum+Gothic&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<style>
.ff01 {font-family:"Georgia", "Garamond", serif; }
.ff02 {font-family: "Verdana", "Helvetica", "Arial", sans-serif;}
.ff03 {font-family: "Lucida Console", "Monaco", monospace; }
/* https://fonts.google.com/
font-family: 'Hi Melody', cursive;
font-family: 'Nanum Gothic', sans-serif;
font-family: '0, sans-serif;
*/
.ff04 {font-family: 'Hi Melody', cursive;}
</style>
</head>
<body>
<section>
<h2>font-family: ; 글꼴(서체)</h2>
<p class="ff01">font-family:"Georgia", "Garamond", serif; 글꼴(서체)</p>
<p class="ff02">font-family:"Verdana", "Helvetica", "Arial", sans-serif; 글꼴(서체)</p>
<p class="ff03">font-family:"Lucida Console", "Monaco", monospace; 글꼴(서체)</p>
<h3> https://fonts.google.com/ </h3>
<p class="ff04">font-family:'Hi Melody', cursive ; 글꼴(서체)</p>
<p class="ff05">font-family: ; 글꼴(서체)</p>
<p class="ff06">font-family: ; 글꼴(서체)</p>
</section>
</body>
</html>4. font-family | 결과 창
'Web > CSS' 카테고리의 다른 글
| css 따라하기 3일 차 | text (0) | 2022.06.20 |
|---|---|
| css 따라하기 1일 차 | 3가지 사용법, 선택자와 선언부, 우선순위 (0) | 2022.06.08 |