CSS ⑤ 웹 폰트, 아이콘 폰트 사용하기 + 실습예제

구글 폰트 적용하기

🔵 글꼴은 시스템에 기본으로 설치된 것도 많지만 실무에서는 시스템에 없는 글꼴이면 웹 폰트 방식으로 추가해서 사용합니다.

https://fonts.google.com/

Google Fonts

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

fonts.google.com

<!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=Nanum+Pen+Script&display=swap');

        h1 {
            font-family: 'Nanum Pen Script', cursive;
        }
    </style>
</head>
<body>
    <h1>나눔 펜 스크립트 폰트 사용 하기</h1>
    
</body>
</html>

1. CSS 파일 내에서 폰트 파일 경로 지정

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

2. font-family 속성 지정

body {
  font-family: 'Open Sans', sans-serif;
}

아이콘 폰트 사용하기

🔵 일반 텍스트처럼 스타일링하고 조작할 수 있는 벡터 아이콘을 제공하는 웹 폰트 입니다.

🔵 이러한 아이콘 폰트는 확대/축소가 가능하며, 웹사이트에서 색상/크기/그림자 등 다양한 스타일을 적용할 수 있습니다.

🔵 대표적인 아이콘 폰트로는 Font Awesome, Google Material Icons, Ionicons 등이 있습니다.

그 중 Font Awesome 적용 방법을 예로 들겠습니다.

1. Font Awesome CDN 접속

https://www.bootstrapcdn.com/fontawesome/

Font Awesome

The recommended CDN for Font Awesome

www.bootstrapcdn.com

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-
    free@6.2.1/css/fontawesome.min.css" integrity="sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2W
    fOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm" crossorigin="anonymous">
</head>

2. 원하는 아이콘을 찾아 해당하는 클래스 이름을 사용하여 html에 추가

<i class="fa-brands fa-facebook"></i>
<i class="fa fa-search"></i>

3. 아이콘의 크기, 색상 여백 등을 변경할 수 있습니다.

.fa {
    font-size: 2em;
    color: blue;
}

기타 url

https://cdnjs.com/libraries/font-awesome

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make

cdnjs.com

https://fontawesome.com/icons

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

기본값 초기화

* {
  box-sizing: border-box;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
</head>

실습 예제(1)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
    .container {
      width: 304px;
      height: 390px;
      margin: 0 auto;
      border: 1px solid gray;
      padding: 28px;
      box-sizing: border-box;
    }
    .google {
      margin-left: auto;
      margin-right: auto;
      border: 1px solid black;
      width: 228px;
      height: 44px;
      line-height: 13px;
    }
    .google > p {
      text-align: left;
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
    }
    .google > i {
      float: left;
      margin-left: 39px;
      margin-top: 14px;
      margin-right: 7px;
      color: red;
    }
    input {
      width: 228px;
      height: 44px;
      border-style: none;
      background-color: #eaeaea;
      margin-bottom: 10px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .login {
      width: 228px;
      height: 44px;
      background-color: #373f3c;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
      margin-bottom: 30px;
      padding: 0.2px;
      box-sizing: border-box;
    }
    .login > p {
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      font-family: 'Roboto', sans-serif;
    }
    footer > p {
      text-align: center;
      font-size: 14px;
      color: #2c3432;
      font-family: 'Roboto', sans-serif;
    }
    .content > p {
      margin-top: 30px;
      margin-bottom: 30px;
      text-align: center;
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="google">
      <i class="fa-brands fa-google"></i>
      <p>Log in with google</p>
    </div>
    <div class="content">
      <p>or</p>
    </div>
    <input type="text" id="username" placeholder="Username">
    <input type="text" id="password" placeholder="Password">
    <div class="login">
      <p>LOGIN</p>
    </div>
    <footer>
      <p>Forgot your password?</p>
    </footer>
  </div>
</body>
</html>

실습 예제(2)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
    body {
      width: 1000px;
      margin: 0 auto;
      position: relative;
      font-family: 'Nanum Pen Script', cursive;
    }
    .box1 {
      width: 400px;
      height: 400px;
      padding: 18px;
      background-color: #ffff99;
      position: relative;
      overflow: hidden;
      left: 200px;
      top: 100px;
      transform: rotate(10deg);
    }
    .box1 > h1 {
      text-align: center;
      font-size: 44px;
      margin-bottom: 20px;
    }
    .box1 > p {
      text-align: center;
      font-size: 25px;
      margin-bottom: 20px;
    }
    .box2 {
      width: 400px;
      height: 400px;
      background-color: #ffffcf;
      position: absolute;
      left: 220px;
      top: 450px;
      transform: rotate(30deg);
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="box1">
    <h1>To. 남편</h1>
    <p>여보~ 오늘 급하게 먼저 출근해야 해서<br>
    인사도 못 하고 먼저 나가요~<br><br>
    아침 굶지 말고 냉장고에 있는 반찬<br>
    전자레인지에 데워서 챙겨 먹고 나가요~!<br><br>
    그럼 오늘 하루도 힘내고 이따 저녁에 봐요~<br></p>
    <p>화이팅~!</p>
    <div class="box2"></div>
  </div>
</body>
</html>

저작자표시 비영리 변경금지

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

CSS ⑦ 그리드(grid) 레이아웃 (0)	2023.03.20
CSS ⭐ ⑥ flex 박스 레이아웃 (0)	2023.03.16
CSS ④ 전환 효과 - (3) 변형 효과(transform) (0)	2023.03.16
CSS ④ 전환 효과 - (2) 애니메이션 속성 (2)	2023.03.15
CSS ④ 전환 효과 - (1) transition, 실습 예제(쇼핑몰 상품 목록) (2)	2023.03.15