구글 폰트 적용하는 방법
이건 앞에서 했던 거에 비하면 굉장히 쉽다.
구글 폰트에 들어가서
자신이 마음에 드는 폰트를 하나 고른다.
그리고
그림에서 보는 바와 같이
1번을 클릭하고 2번을 복사해서 html의 style 부분에다가 붙여준다.
하지만 이것만 한다고 해서 웹사이트의 폰트가 바뀌지 않는다.
Use on the web 이라고 적혀있는 부분에서 스크롤바를 내리면
동그라미 친 부분을 복사하고
붙여주면 된다.
<!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>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gugi&family=Hahmlet:wght@400;500;600;700&family=Nanum+Brush+Script&display=swap');
* {
font-family: 'Gugi', cursive;
font-family: 'Hahmlet', serif;
font-family: 'Nanum Brush Script', cursive;
}
.mytitle {
background-color: green;
width: 300px;
border-radius: 10px;
color: white;
text-align: center;
padding: 30px 0px 0px 0px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
}
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
여기서 style 부분을 유심히 살펴보면 복붙하라고 한 부분이 보일거다.
근데 여기서 *{} 이렇게 돼있는 곳이 보일텐데
이건 폰트를 전체에 적용한다는 뜻이다.
그리고 코딩에서 *이 등장하면 모두 다 라는 뜻이니깐 참고하자.
그냥 부분 적용하고 싶으면
*{} 대신 .mytitle{} 치고 {} 안에 *{}의 {} 안에 넣을려고 했던 걸 넣으면 된다.
말이 어렵다. 그냥 보자.
<!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>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gugi&family=Hahmlet:wght@400;500;600;700&family=Nanum+Brush+Script&display=swap');
.mytitle {
background-color: green;
width: 300px;
border-radius: 10px;
color: white;
text-align: center;
padding: 30px 0px 0px 0px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
font-family: 'Gugi', cursive;
font-family: 'Hahmlet', serif;
font-family: 'Nanum Brush Script', cursive;
}
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
위의 사진과 아래 사진을 비교하면 확실히 차이가 난다.
'웹 > 웹개발 종합반' 카테고리의 다른 글
| html css 기본 + github 사용 (2) | 2023.03.09 |
|---|---|
| 웹개발 1주차 복습 (주석, 파일분리, 부트스트랩) (0) | 2023.03.07 |
| 웹개발 1주차 복습 (CSS) (1) | 2023.03.05 |
| 웹개발 1주차 복습 (웹 브라우저, HTML) (0) | 2023.02.27 |
| 웹개발 4주차 (2) (0) | 2023.02.13 |