1. font-family 속성 – 글꼴 지정하기
① 기본형 :
body { font-family : "맑은 고딕", 돋움, 굴림 }
/* 맑은 고딕이 없으면 돋움으로, 돋움이 없으면 굴림으로 적용*/② 웹 문서에서 사용할 글꼴 지정
③ <body>를 비롯해 <p>나 <h1> ~ <h6> 처럼 텍스트를 사용하는 태그에서 사용
④ 웹 문서에서 글꼴을 지정할시 한 가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우를 대비하여 두세 번째 글꼴까지 지정, 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분
⑤ font-family 속성은 상속되기 때문에 스타일에서 정의하면 문서 전체에 적용되고 자식 요소에 계속 같은 글꼴이 사용됨
⑥ 일부 태그에서 다른 글꼴을 사용하고 싶을 때는 태그 선택자, 클래스 선택자를 이용해 해당 요소에 다른 글꼴 지정.
2. @font-face – 글꼴 지정하기
① 웹 폰트(web-font) : 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시켜 사용하는 글꼴. 사용자 시스템에 없는 글꼴이더라도 웹 제작자 의도대로 텍스트 표시 가능
3. 무료 폰트 다운로드 사이트 이용하기
① 구글 웹폰트 사용하기 https://fonts.google.com/
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
② 눈누 웹폰트 사용하기 눈누 - 상업용 무료한글폰트 사이트 (noonnu.cc)
눈누 - 상업용 무료한글폰트 사이트
상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누
noonnu.cc
③ 구글 폰트 - 한글 폰트 검색
④ 웹 문서에 <style> 태그 안에 붙여 넣음
⑤ font-family 속성에서 웹 폰트 글꼴 이름사용
<예제 – webfont-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nanum+Pen+Script&display=swap');
.ng-font {
font-family: 'Nanum Pen Script', 돋움;
}
p {
font-size: 30px;
}
</style>
</head>
<body>
<!--p+p.ng-font-->
<p>브라우저 기본 글꼴 사용</p>
<p class="ng-font">구글 웹 폰트 사용</p>
</body>
</html>
4. 직접 웹 폰트 업로드해 사용하기
① 직접 사용할 웹 폰트 준비
② 컴퓨터에서 사용하는 폰트의 확장자는 *.ttf
③ ttf파일은 용량이 너무 크기 때문에 eot나 woff로 변환하여 사용
5. 웹 폰트 적용하기
① @font-face 속성을 사용해 웹 폰트 정의
② IE8버전 이하 버전을 위해 eot 파일 먼저 선언
③ 대부분의 모던 브라우저에서 지원하는 woff 파일 선언
④ 용량이 큰 ttf 파일을 마지막에 선언
⑤ 브라우저 자신이 지원하는 폰트 파일만 다운받기 위함
<예제 – webfont-002.html>
<!DOCTYPE html>
<html lang="ko">
<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>
<!--확인하는 법 : 웹 켜고 F12 -> networking -> F5 하면 trana가 뜬다.-->
<style>
@font-face {
/*사용할 웹 폰트의 이름 지정*/
font-family: 'trana'; /* 글꼴 */
src: local('trana'),
/*브라우저에서 지원하는 형식의 폰트만 다운*/
/*익스플로어 8 버전 이하를 eot 먼저 선언*/
url('trana.eot'),
/*모던 브라우저를 위한 woff 선언*/
url('trana.woff') format('woff'),
/*용량이 가장 큰 ttf 마지막에 선언*/
url('trana.ttf') format('truetype');
}
.w-font {
font-family: 'trana', sans-serif; /* 웹 폰트 지정 */
}
p {
font-size: 30px; /* 글자 크기 */
}
</style>
</head>
<body>
<!--p+p.w-font-->
<p>Using Default Fonts</p>
<p class="w-font">Using Trana Fonts</p>
</body>
</html>
6. font-size 속성 – 글자 크기 조절하기
① 글자 크기를 조절할 때 사용
② 사용할 수 있는 값 : 절대 크기, 상대 크기, 숫자, 백분율
③ 기본 값은 상대 크기인 medium이고 font-size 속성은 상속됨
④ 기본형 :
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>⑤ font-size에서 사용 가능한 속성 값
⑥ <크기> 값에서 사용할 수 있는 단위
7. px 단위 사용하기
① px 단위 사용 시 폰트 크기가 고정되고 작은 모바일 기기에서도 고정된 값이 표출됨.
8. em 단위 사용하기
① 사용하는 글꼴의 대문자 M기준으로 크기 조절
② 대문자 M 너비가 1em으로 지정돼 상대적인 값을 계산
<예제 – font-size-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>
/* em : 해당 글꼴의 대문자 M 너비를 기준으로 크기 조절 */
h1 {
font-size: 3em; /* 글자 크기 */
}
p {
font-size: 1em; /* 글자 크기 */
}
/* px : 폰트 크기가 고정됨 */
h2 {
font-size: 30px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 20px;
}
</style>
</head>
<body>
<!--h1+p+h2+h3+h4-->
<h1>3em의 크기를 가진 제목 M</h1>
<p>1em의 크기를 가진 단락 M</p>
<h2>30px</h2>
<h3>30px</h3>
<h4>20px</h4>
</body>
</html>
9. font-weight 속성 – 글자 굵기 조절하기
① 글자 굵기를 조절할 때 사용
② 기본형 :
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900③ font-weight에서 사용하는 속성 값
10. font-variant 속성 – 작은 대문자로 표시하기
① 영문 소문자 크기에 맞춰 대문자 표시
② 사용 가능한 속성 값
<예제 – font-vary-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>Font Varient & Weight</title>
<style>
.accent {
font-variant: small-caps; /* 작은 대문자 */
font-weight: bold; /* 굵게 */
}
.accent2 {
font-weight: 600;
}
.accent3 {
font-weight: 400;
}
</style>
</head>
<body>
<h1>세계 3대 미항</h1>
<p><span class="accent">시드니(Sydney)</span>, 호주</p>
<p><span class="accent2">리우데자네이루(Rio de Janeiro)</span>, 브라질</p>
<p><span class="accent3">나폴리(Naples)</span>, 이탈리아</p>
</body>
</html>
11. font-style 속성 – 글자 스타일 지정하기
① 글자를 이탤릭체로 표시할 때 사용
② font-style : normal | italic | oblique
③ font-style에서 사용하는 속성 값
<예제 – font-style-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>
p {
font-style: italic; /* 이탤릭체로 */
}
p#txt {
font-style: normal; /* p 요소 중 id=txt인 부분은 보통체로 */
}
p#txt2 {
font-style: oblique; /* 이탤릭체로 */
}
</style>
</head>
<body>
<h1>세계 3대 미항</h1>
<p>시드니(Sydney), 호주</p>
<p id="txt">리우데자네이루(Rio de Janeiro), 브라질</p>
<p id="txt2">나폴리(Naples), 이탈리아</p>
<p><i>시드니(Syeney), 호주</i></p>
<p><em>시드니(Syeney), 호주</em></p>
</body>
</html>
12. font 속성 – 글꼴 속성을 한꺼번에 묶어 표현하기
① 앞서 배운 글꼴 관련 속성들을 한 번에 정의할 때 사용
② 기본형 :
font: <font-style> <font-variant> <font-weight> <font-size / Line-height> <font-family> | caption | icon | menu | message-box | small-caption | status-bar③ 특정 키워드를 입력해 그것에 어울리는 글꼴 스타일로도 표시 가능
④ line-height는 줄 간격 조절 속성이지만 글자 크기와 줄 간격이 밀접한 관련이 있어서 font-size/line-height 로 하나의 속성처럼 사용하기도 함
<예제 – font-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>
p.txt {
font: italic 12px/24px 돋움; /*font-style: font-size/line-height font-family*/
}
p.txt2 {
font: icon;
}
</style>
</head>
<body>
<!--p.txt+p+p[style=""]*6-->
<p class="txt">여러 요소가 함께 사용된 웹 문서 안에서 텍스트가 눈에 띄게 하려면 내용에 맞는 글꼴과 글자 크기, 그리고 글자색을 선택하는 것이 중요합니다. </p>
<p>이럴 때 사용할 수 있는 것이 글꼴 속성입니다.</p>
<p style="font:caption"> [font:caption] 캡션에 어울리는 글꼴 스타일</p>
<p style="font:icon;"> [font:icon] 아이콘에 어울리는 글꼴 스타일 </p>
<p style="font:menu"> [font:menu] 드롭다운 메뉴에 어울리는 글꼴 스타일</p>
<p style="font:message-box"> [font:message-box] 대화 상자에 어울리는 글꼴 스타일</p>
<p style="font:small-caption"> [font:small-caption] 작은 캡션에 어울리는 글꼴 스타일</p>
<p style="font:status-bar"> [font:status-bar] 상태표시줄에 어울리는 글꼴 스타일</p>
<p class="txt2"> [font:icon] 아이콘에 어울리는 글꼴 스타일</p>
</body>
</html>
'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글
| [CSS] 02-3 문단 스타일 (0) | 2021.09.05 |
|---|---|
| [CSS]02-2 텍스트 스타일 (0) | 2021.09.05 |
| [CSS] 01-5 CSS3와 CSS 모듈 (0) | 2021.09.05 |
| [CSS] 01-4 캐스캐이딩 스타일 시트 (CSS : Cascading Style Sheet) (0) | 2021.09.05 |
| [CSS] 01-3 주요 선택자 (0) | 2021.09.05 |
댓글