바다는 비에 젖지 않는다

[CSS] 웹페이지에 Google font 이용하기 본문

IT Technical Note/HTML | CSS

[CSS] 웹페이지에 Google font 이용하기

Soroya 2022. 10. 7. 20:10
728x90

https://fonts.google.com/?subset=korean 

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

  1. 폰트 선택하기

 

2. 선택 한 폰트 페이지에서 스크롤을 내려 style에서 thin, regular, bold 중 선택한다.

 

3. 선택 후 오른쪽 위 view selected families 누른다.

 

4. link 태그를 복사해서 <head> ~ </head>사이에, CSS를 복사해서 <style> ~ </style> 사이에 넣는다.

 

5. 폰트가 적용된 페이지

 

코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" rel="stylesheet">
  <style>
      *{
          font-family: 'Nanum Brush Script', cursive;
      }
    .mytitle{
        height: 200px;
        width: 300px;

        background-image: url("https://post-phinf.pstatic.net/MjAyMDAyMjlfMjY4/MDAxNTgyOTU0Nzg3MjQ4.PBMFV4WrSJmeSUJ56c4C7Vkz_SsQlJ1SByKU18kkJh0g.T7mQnadCWVtEZ448AGk_9kG1HFBAzdztXZcBjvSbduwg.JPEG/고양이_나이1.jpg?type=w1200");
        background-size: cover;
        background-position: center;

        border-radius: 10px;
        padding-top: 20px;
        text-align: center;
        color: yellow;
    }
    .wrap{
        width: 300px;
        margin: auto;
        background-color: green;
    }
  </style>
  <link rel="stylesheet" href="../../../Hanghae99/Frontend/prac.css">
</head>
<body>
  <div class="wrap">
    <div class="mytitle">
      <h1>로그인 페이지</h1>
      <h4>아이디, 비밀번호를 입력해주세요</h4>
    </div>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인 하기</button>
  </div>
</body>
</html>

 

728x90

'IT Technical Note > HTML | CSS' 카테고리의 다른 글

[CSS] Flexbox  (0) 2022.10.07
[CSS] Bootstrap  (0) 2022.10.07
[CSS] margin을 이용한 중앙정렬  (0) 2022.10.07
[CSS] CSS기초  (0) 2022.10.07
[HTML] HTML 기본 개념  (0) 2022.10.07
'IT Technical Note/HTML | CSS' Related Articles more