CSS의 5가지 글꼴 관련 스타일에 대해 알아보자 (font~)
<font ~ 로 시작하는 코드>
애밋 문법을 이용해 p*3 + Enter 클릭 시 p 태그 3개 동시에 생성 가능
<!-- p*3 + Enter-->
<p></p>
<p></p>
<p></p>
<!-- p#ff${글꼴 테스트 $}*3 + Enter
p 태그를 만들 건데 아이디명은 ff 뒤에 숫자 넘버링,
{시작태그와 종료태그 안의 글자는 글꼴 테스트 뒤에 넘버링} 해서 만들어 줘!-->
<p id="ff1">글꼴 테스트 1</p>
<p id="ff2">글꼴 테스트 2</p>
<p id="ff3">글꼴 테스트 3</p>
font-family: 글꼴을 지정할 때 사용
기본 글꼴은 고딕체이며, 여러 개 지정 가능
👉🏻 앞의 글꼴이 없는 경우 뒤의 대체 글꼴을 반영
[ 표현법 ]
선택자 {
font-family: 글꼴명;
}
<style>
#ff1 { font-family: 궁서체; }
#ff2 { font-family: 고딕체; } /* 기본 글꼴 */
#ff3 { font-family: 유저체, 바탕체; } /* 앞의 글꼴이 없는 글꼴이라면 뒤의 대체 글꼴을 반영 */
</style>
외부 웹 폰트를 사용하는 방법
👉🏻 웹 폰트 제공 사이트: Browse Fonts - Google Fonts
1. 웹 폰트 제공 사이트에 접속해서 원하는 폰트를 클릭한 후 Regular 400 + 버튼을 누름
2. <link> 속성 3줄짜리를 복사하여 <head> 태그의 <style> 태그 밑에 추가함
<head> 영역 내 <style> 태그 밑에 붙여넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글꼴 관련 스타일</title>
<style>
#ff1 { font-family: 궁서체; }
#ff2 { font-family: 고딕체; } /* 기본 글꼴 */
#ff3 { font-family: 유저체, 바탕체; } /* 앞의 글꼴이 없는 글꼴이라면 뒤의 대체 글꼴을 반영 */
</style>
<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=Germania+One&display=swap" rel="stylesheet">
</head>
<body>
3. <link> 속성 제일 밑 font-family~ 부분을 복사하여 <style> 태그에 해당 폰트를 쓸 id 속성값을 준 뒤 붙여넣기
<head> 영역 내 <style> 태그 안에 붙여넣기
<style>
#ff1 { font-family: 궁서체; }
#ff2 { font-family: 고딕체; } /* 기본 글꼴 */
#ff3 { font-family: 유저체, 바탕체; } /* 앞의 글꼴이 없는 글꼴이라면 뒤의 대체 글꼴을 반영 */
#web-font {font-family: 'Germania One', cursive;}
</style>
4. 해당 폰트를 쓸 곳을 id 속성값 넣어 주고 <body> 영역에 기술하기
<body> 영역에 해당 폰트를 쓸 곳에 id 속성값 주기
<body
<h3> *외부 웹 폰트를 사용하는 방법</h3>
<p>
웹 폰트 제공 사이트:
<a href="http://fonts.google.com" target="_blank">구글 웹 폰트 사이트</a>
</p>
<p id="web-font">font style test 글꼴 테스트 1</p>
</body>
*단, 글꼴에 따라 지원하는 언어가 다르므로 꼭 확인 후 사용할 것!
(예시로 쓴 글꼴은 한글을 지원하지 않아 자동으로 궁서체가 적용됨)
font-size: 글꼴의 크기를 변경할 때 사용
[ 표현법 ]
선택자 {
font-size: 크기(px/em/%);
}
px 👉🏻 픽셀
em 👉🏻 배수 (기본 크기의 몇 배)
% 👉🏻 비율(기본 크기의 몇 프로 증가)
<style>
#fs1 { font-size : 30px }
#fs2 { font-size : 1.5em } /* 기본 크기의 1.5배 */
#fs3 { font-size : 150% }
</style>
<body>
<!-- ul>li#fs$*3 + Enter -->
<ul>
<li id="fs1">고정크기 px 테스트</li>
<li id="fs2">가변크기 em 테스트</li>
<li id="fs3">가변크기 % 테스트</li>
</ul>
</body>
font-weight: 글꼴의 굵기를 표현할 때 사용
[ 표현법 ]
선택자 {
font-weight: normal/bold/bolder/lighter/100~900;
}
👉🏻 bold와 bolder의 차이가 육안으로 구분이 잘 안 됨
숫자의 경우는 900이 제일 굵음
<style>
#fw1 { font-weight: bold; }
#fw2 { font-weight: 900; } /* bolder */
#fw3 { font-weight: lighter; }
</style>
<body>
<!-- ul>li*4 -->
<ul>
<li style="font-weight : normal;">원래 굵기</li>
<li id="fw1">굵은 글꼴로 변경</li>
<li id="fw2">원래 굵기보다 더 굵게</li>
<li id="fw3">원래 굵기보다 더 가늘게</li>
</ul>
</body>
font-variant: 텍스트 문구를 작은 대문자로 변경할 때 사용
[ 표현법 ]
선택자 {
font-variant: small-caps;
}
<p>I LOVE YOU</p>
<p style="font-variant: small-caps">i love you</p>
font-style: 텍스트 문구를 기울이고자 할 때 사용
[ 표현법 ]
선택자 {
font-style: normal(기본값)/italic/oblique;
}
<!-- ul>li*2 -->
<ul>
<li style="font-style: italic;">italic: 기울임 글꼴</li>
<li style="font-style: oblique;">oblique: 원래 글자를 기울인 셈</li>
</ul>