반응형
구글 웹폰트 : https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
1) 마음에 드는 폰트를 클릭한다
2) [ + Select this style ]을 클릭한다
3) 우측 상단의 모음 아이콘을 클릭한다
4) Embed 탭을 클릭한다
5) link 태그를 복사해서 <head> ~ </head>사이에, CSS를 복사해서 <style> ~ </style> 사이에 넣는다
Single Day이라는 폰트를 예제로 추가해보면, 아래와 같다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아무것도 모르고 시작하는 코딩 | 지노스</title>
<!-- 아래에 추가했지 -->
<link href="https://fonts.googleapis.com/css2?family=Single+Day&display=swap" rel="stylesheet">
<!-- 위에다 추가했지 -->
<style>
/*아래에 추가했지(전체적용할 때 *{})*/
* {
font-family: 'Single Day', cursive;
}
/*위에다 추가했지*/
.login-title {
color: white;
width: 300px;
height: 200px;
background-image: url('https://i.imgur.com/CBNb9fM.gif');
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding-top: 100px;
}
</style>
</head>
<body>
<div class="login-title">
<h1>유노나띵 존스노우</h1>
<h5>아무것도 모르고 시작하는 코딩</h5>
</div>
<div>
<p>
ID: <input type="text"/>
</p>
<p>
PW: <input type="password"/>
</p>
</div>
<button>로그인하기</button>
</body>
</html>
적용한 화면을 보면 아래와 같다
공감 부탁 드려요 :)
반응형
'아무것도 모르고 시작하는 코딩' 카테고리의 다른 글
| Bootstrap 사용하기(프론트엔드 프레임워크) | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.04 |
|---|---|
| CSS 파일 분리하기 | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |
| MARGIN 과 PADDING | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |
| HTML 주석 달기, 파이참 코드정렬 단축키 | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |
| CSS란? 선택자(selector)란? 클래스(class)란? | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |