1. link를 붙인다
2. font-family에 해당 글꼴명을 넣는다.
그러면 적용 된다!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
<style>
div {
/* font-size: xx-small; */
/* font-size: small; */
/* font-size : 20px; */
/* font-size : 1.8em; */
font-size : 12pt;
font-family : 'Nanum Gothic', "나눔바른펜", "궁서"; /* 굴림체를 먼서 사용해. 만약 굴림체가 없다면 궁서체를 써 */
}
.class01 {
font-size : 16pt;
font-family: "고딕"
}
</style>
</head>
<body>
이것은 무엇일까요
<div>안녕하세용~~? SHOW ME THE MONEY</div>
<div>반갑읍니다.</div>
<div class = "class01">WELCOME 환영합니다@@@@ WOW</div>
</body>
</html>
import를 해서 적용할 수도 있다.
<style> 여기에 @import </style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Shadows+Into+Light&display=swap');
div {
/* font-size: xx-small; */
/* font-size: small; */
/* font-size : 20px; */
/* font-size : 1.8em; */
font-size : 12pt;
font-family : 'Nanum Gothic', "나눔바른펜", "궁서"; /* 굴림체를 먼서 사용해. 만약 굴림체가 없다면 궁서체를 써 */
}
.class01 {
font-size : 16pt;
font-family: "고딕"
}
.div02{
font-size : 16;
min-height : 200px; /* 최소한의 높이값을 지정하는 것 */
font-family: 'Shadows Into Light';
font-weight : 800; /* 글자 굵기 */
background-color: lightgray; /* div 배경의 컬러를 지정 */
}
</style>
</head>
<body>
이것은 무엇일까요
<div>안녕하세용~~? SHOW ME THE MONEY</div>
<div>반갑읍니다.</div>
<div class = "class01">WELCOME 환영합니다@@@@ WOW</div>
<div class = "div02">Black Sheep Wall</div>
</body>
</html>'웹 프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] img 태그 '파일명 조건'에 따라 값 지정하기(src $= , src ^= , src *=) (0) | 2020.06.15 |
|---|---|
| [CSS] 배경에 이미지 넣기 및 다양한 설정(body, img 태그) (0) | 2020.06.15 |
| [CSS] 박스모델 심화(#id, .class, display, float, visibility, padding, margin, border, text-align 등) (0) | 2020.06.15 |
| [CSS] 박스모델 (padding, text-align, border-style, border-color, border-width 등) (0) | 2020.06.12 |
| [CSS] 박스모델 : margin, padding 차이점 (0) | 2020.06.12 |
