[HTML+CSS+JavaScript] CSS font-family 사용법
font-family는 CSS에서 텍스트의 글꼴을 지정하는 데 사용하는 속성입니다. 이를 통해 텍스트를 원하는 글꼴로 스타일링할 수 있습니다. 아래는 font-family의 사용법과 관련된 자세한 설명입니다.
|
※ 기본문법
font-family: <font1>, <font2>, <generic-family>;<font1>, <font2>, ...: 우선순위에 따라 <font1> 글꼴을 설정합니다. <font1> 글꼴이 사용 불가능하면 다음 순서인 <font2>글골을 지정합니다.
<generic-family>: 브라우저가 지원하지 않는 글꼴이 모두 실패했을 때 사용하는 기본 글꼴 계열을 지정합니다.
※ 글꼴 이름 작성 규칙
단일 단어인 글꼴 이름: 따옴표 없이 사용.
예: Arial, Verdana
공백이 포함된 글꼴 이름: 따옴표로 묶어야 함.
예: "Times New Roman", "Comic Sans MS"
※ Generic Family 종류
serif: 각 글자의 끝에 장식이 있는 글꼴 계열.
예: Times New Roman, Georgia
sans-serif: 장식이 없는 깨끗한 글꼴 계열.
예: Arial, Helvetica
monospace: 모든 글자가 동일한 너비를 가짐.
예: Courier New, Consolas
cursive: 필기체 스타일.
예: Comic Sans MS, Pacifico
fantasy: 장식적이고 장난스러운 글꼴 계열.
예: Papyrus, Jokerman
※ 웹 폰트 사용
▶ 웹 폰트를 사용하면 다양한 글꼴을 추가로 사용할 수 있습니다. 다음은 구글 폰트 사용 예시입니다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
body {
font-family: "Noto Sans KR", serif;
}
</style>
▶ 사용 예시입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");
.type01 {
font-family: "Noto Sans KR", sans-serif;
}
.type02 {
font-family: "Georgia", Times, serif;
}
.type03 {
font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>
<div class="type01">font-family Noto Sans KR 사용 예제입니다.</div>
<div class="type02">font-family Georgia 사용 예제입니다.</div>
<div class="type03">font-family Courier New 사용 예제입니다.</div>
</body>
</html>♠ 결과
※ font-family는 웹 디자인의 기본 요소로, 사용자 경험에 큰 영향을 미칩니다. 가독성을 고려하여 적절한 글꼴 계열과 대체 글꼴을 설정하는 것이 중요합니다. 필요한 경우 웹 폰트를 활용해 더 많은 옵션을 제공할 수도 있습니다.
'프로그래밍 > html+css+js' 카테고리의 다른 글
| [HTML+CSS+JavaScript] CSS font-face 사용법 (0) | 2025.01.19 |
|---|---|
| [HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기 (1) | 2025.01.19 |
| [HTML+CSS+JavaScript] CSS 텍스트(text) 관련 속성 (0) | 2025.01.17 |
| [HTML+CSS+JavaScript] CDN URL 모음 (1) | 2025.01.16 |
| [HTML+CSS+JavaScript] side bar(사이드바) 보이고 감추기 (2) | 2025.01.12 |