[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기

  웹폰트(Web Font)는 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도, 웹 페이지에서 원하는 폰트를 표시할 수 있게 해주는 기술입니다. 이를 통해 웹 디자이너와 개발자는 다양한 폰트를 활용하여 웹사이트의 디자인과 가독성을 향상시킬 수 있습니다. 

  구글 폰트(Google Fonts)는 무료로 제공되는 웹폰트 서비스입니다. 웹사이트에 폰트를 적용하면 디자인과 가독성을 개선할 수 있습니다.

  여기서는 구글 폰트(Google Fonts) 사용법에 대해서 알아보려고 합니다.

 

 

1. 구글 폰트 웹사이트 접속하기 

  1) 브라우저에서 "구글웹폰트"를 검색하여 Google Fonts 사이트에 접속합니다. (바로가기) 
  2) 원하는 폰트를 검색하거나 카테고리, 언어, 글꼴 속성을 기준으로 필터링하여 선택합니다.
  3) 여기서는 언어를  korean으로 선택하였습니다. 

   4) 사용할 수 있는 한글 폰트들이 보이는데 원하는 폰트를 선택합니다. 여기서는 가장 많이 사용하는  Noto Sans Korean를 선택합니다.
   5) Get font를 선택합니다. 

  6) Get embed code를 선택합니다. 

  7)  link방식과 import방식 둘 중 원하는 방식을 선택하여 원하는 코드를 복사해서 이용하시면 됩니다. 


※ 사용예시입니다.

<!DOCTYPE html>
<html lang="ko"> 
<head>
  <meta charset="UTF-8"> 
  <title>Document</title>

  <!-- CSS 스타일 정의 -->
  <style>
    /* Google Fonts에서 세 가지 글꼴을 가져옵니다. */
    @import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&family=Nanum+Gothic&family=Noto+Sans+KR:wght@100..900&display=swap');

    body {
      font-weight: 300; /* 기본 글꼴 두께를 설정 */
    }

    /* Noto Sans KR 글꼴을 적용한 클래스 */
    p.font1 {
      font-family: "Noto Sans KR", sans-serif;
    }

    /* Nanum Gothic 글꼴을 적용한 클래스 */
    p.font2 {
      font-family: "Nanum Gothic", sans-serif;
    }

    /* Nanum Brush Script 글꼴을 적용한 클래스 */
    p.font3 {
      font-family: "Nanum Brush Script", sans-serif;
    }
  </style>
</head>
<body>
  <h3>Noto Sans Korean</h3>
  <p class="font1">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다. 
  </p>

  <h3>Nanum Gothic</h3>
  <p class="font2">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다. 
  </p>

  <h3>Nanum Brush Script</h3>
  <p class="font3">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다. 
  </p>
</body>
</html>

♠ 결과 



 

 

'프로그래밍 > html+css+js' 카테고리의 다른 글

[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (1) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12
[HTML+CSS] icon(아이콘)이 필요할 때 - XE Icon사용하기  (1) 2025.01.01
[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기  (1) 2025.01.01
[HTML+CSS] a 태그를 이용하여 버튼 만들기  (0) 2024.12.29

 

XE Icon은 웹에서 다양한 아이콘을 손쉽게 활용할 수 있는 CSS 라이브러리입니다. 
웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷으로, 다양한 아이콘을 손쉽게 웹페이지에 적용할 수 있습니다.

 

 

※ XE Icon 설정하기


사이트에서 파일을 다운받아서 사용할 수도 있습니다. (사이트 바로가기)

여기서는 CDN 서비스를 이용하겠습니다. 

▶ link 태그를 이용하는 방법

    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css" />


▶  style를 이용하는 방법

  <style>
    @import url("//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css");
  </style>

둘 중 한가지 방법을 선택하면 됩니다. 여기서는 link 태그를 이용하겠습니다. 

※ 사용할 아이콘 선택하기

XE Icon 사이트로 이동해서 상단의 LIBRARY 메뉴를 선택합니다.  (사이트 바로가기)


검색창에 bar로 검색해서 bars를 사용해 보겠습니다. 

icon 이름(xi-bars)를 확인합니다. 

<i class="xi-bars"> <i>태그에 class을 xi-bars로 지정하면 아이콘이 표시됩니다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
  </head>
  <body>
    <i class="xi-bars"></i>
  </body>
</html>

>>> 결과 <<<

 

※ 아이콘 크기 변경하기

xi-로 시작하는 class를 추가하여 크기를 변경할 수 있어요

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
  </head>
  <body>
  <i class="xi-bars"></i> 기본크기 <br>
  <i class="xi-bars xi-x"></i> xi-x <br>
  <i class="xi-bars xi-2x"></i> xi-2x<br>
  <i class="xi-bars xi-3x"></i> xi-3x <br>
  <i class="xi-bars xi-4x"></i> xi-4x<br>
  <i class="xi-bars xi-5x"></i> xi-5x<br>
  </body>
</html>

>>> 결과 <<<

더 많은 사용법은 샘플 페이지를 참고하세요 (샘플페이지 바로가기)

※ 아이콘 내 맘대로 꾸미기 (class 추가하기)

class를 추가하여 내 맘대로 꾸밀 수 있어요 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
    <style>
      .close {
        color: red;
        background-color: #000;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;  
        box-shadow: 0 0 5px red;
      }
    </style>
  </head>
  <body>
    <i class="xi-close-thin close"></i>
  </body>
</html>

>>> 결과 <<<

※ 아이콘 내 맘대로 꾸미기 (다른 태그에서 이용하기)

XE Icon에서 제공하는 class를 이용하지 않고  unicode를 이용해서 커스터마이징이 가능해요 

▶ unicode 얻는 방법 

태그추가 방식으로 아이콘을 추가한 후 브라우저에서 확인합니다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
  </head>
  <body>
    <i class="xi-bars"></i>
  </body>
</html>

>>> 결과 <<<

F12 key를 눌러서 개발자 도구를 오픈합니다. 

아이콘 태그앞의 ▶ 표시를 누릅니다. 

오른쪽에 unicode를 확인할 수 있습니다.

오른쪽 마우스를 클릭하고  Copy declaration를 선택하면 unicode 복사할 수 있습니다.

unicode를 이용하여 아이콘을 추가합니다. 

<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css" />
  <style>
    .box:before {
      content: "\e91c";  /* 아이콘의 코드 값을 설정합니다. */
      font-family: "xeicon"; /* xeicon 폰트를 사용하도록 지정합니다. */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

>>> 결과 <<<

style를 추가하여 내맘대로 꾸밀 수 있어요

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
    <style>
      .box {
        border: 1px solid #000;
        width: 30px;
        height: 30px;
      }
      .box:before {
        content: "\e91c";
        font-family: "xeicon";
        font-size: 30px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

>>> 결과 <<<

 

 

'프로그래밍 > html+css+js' 카테고리의 다른 글

[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (1) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12
[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기  (0) 2025.01.02
[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기  (1) 2025.01.01
[HTML+CSS] a 태그를 이용하여 버튼 만들기  (0) 2024.12.29

[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기

Font Awesome은 웹에서 다양한 아이콘을 손쉽게 활용할 수 있는 CSS 라이브러리입니다. 

Font Awesome 6버전까지 출시가 되었어도 아직까지도 Font Awesome 4가 많이 사용되어 4.7버전을 이용하여 아이콘을 사용해 보려고 합니다.
버전마다 사용법 조금씩 차이가 있다는 점 알아두세요 

★ 중요사이트
Font Awesome 4.7 아이콘 
Bootstrap Cheat Sheets
Font Awesome 4.7 css 다운로드

 

※ Font Awesome 설정하기


사이트에서 파일을 다운받아서 사용할 수도 있습니다. (다운로드 사이트 가기)

여기서는 CDN 서비스를 이용하겠습니다. 

구글에서 [font awesome 4.7 cdn] 으로 검색해서 cdn를 선택합니다. 

여기서는 bootstrap CDN을 이용하려고 합니다. 

▶ link 태그를 이용하는 방법

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


▶  style를 이용하는 방법

  <style>
    @import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
  </style>

둘 중 한가지 방법을 선택하면 됩니다. 여기서는 link 태그를 이용하겠습니다. 

※ 사용할 아이콘 선택하기

구글에서 [fontawesome 4.7]로 검색해서 사이트로 이동합니다. (사이트 바로가기)


4.7 버전에서는 675개의 아이콘를 사용할 수 있다고 하네요 
검색창에 bar로 검색해서 bars를 사용해 보겠습니다. 

 

<i> 태그를 이용하여 아이콘을 표시하면 됩니다. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <i class="fa fa-bars"></i>메뉴 바로가기
  
</body>
</html>

 aria-hidden="true" 를 생략해도 됩니다. 

>>> 결과 <<<

 

※ 아이콘 크기 변경하기

fa-로 시작하는 class를 추가하여 크기를 변경할 수 있어요

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <i class="fa fa-bars"></i> 기본크기 <br>
  <i class="fa fa-bars fa-lg"></i> fa-lg <br>
  <i class="fa fa-bars fa-2x"></i> fa-2x <br>
  <i class="fa fa-bars fa-3x"></i> fa-3x <br>
  <i class="fa fa-bars fa-4x"></i> fa-4x <br>
  <i class="fa fa-bars fa-5x"></i> fa-5x <br>
</body>
</html>

>>> 결과 <<<

더 많은 사용법은 샘플 페이지를 참고하세요 (샘플페이지로 가기)

※ 아이콘 내 맘대로 꾸미기 (fa class 이용하기)

<i class="fa fa-bars"></i> 태그의 fa class를 이용하여 내 맘대로 꾸밀 수 있어요 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <style>
    .fa {
      font-size: 25px;
      color: crimson;
      transform: rotate(90deg);
      background-color: blue;
      padding: 5px;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      box-shadow: 0 0 5px black;

    }
  </style>
</head>
<body>
  <i class="fa fa-bars"></i>
</body>
</html>

>>> 결과 <<<

※ 아이콘 내 맘대로 꾸미기 (다른 태그에서 이용하기)

Font Awesome에서 제공하는 class를 이용하지 않고  unicode를 이용해서 커스터마이징이 가능해요 

▶ unicode 얻는 방법 

구글에서 [fontawesome 4.7]로 검색해서 사이트로 이동합니다. (사이트 바로가기)


검색창에 bar로 검색해서 bars를 사용해 보겠습니다. 

bars를 선택하면 unicode를 확인할 수 있어요 

아래와 같이 스타일을 지정하면 div를 이용하여 아이콘을 표시할 수 있어요 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .box::before {
      content:"\f0c9";   /* f0c9은 fontawesome에서 bars의 유니코드 */
      font-family: fontAwesome; /* fontAwesome는 fontawesome에서 사용하는 폰트 */
    }

  </style>
</head>
<body>
  <div class="box"></div>
  
</body>
</html>

>>> 결과 <<<

style를 추가하여 내맘대로 꾸밀 수 있어요

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .box {
      border: 1px solid #000;
      width: 50px;
      height: 50px;
      position: relative;
    }
    .box::before {
      content:"\f0c9";   /* f0c9은 fontawesome에서 bars의 유니코드 */
      font-family: fontAwesome; /* fontAwesome는 fontawesome에서 사용하는 폰트 */
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: black;
      color: #fff;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;

    }

  </style>
</head>
<body>
  <div class="box"></div>
  
</body>
</html>

>>> 결과 <<<

※ 좀 더 쉽게 아이콘 추가하기 

구글에서 fontawesome 4.7로 검색후 Bootstrap Cheat Sheets를 선택하세요

Bootstrap Cheat Sheets 바로가기

bar로 검색하세요

Copy 버튼을 누르면 3개의 메뉴가 표시됩니다.

HTML Tag를 누르고 붙여넣기( Ctrl-v)를 하면 태그가 추가됩니다. 

<i class="fa fa-bars"></i>

CSS Rule를 누르고 붙여넣기( Ctrl-v)를 하면  유니코드가 추가합니다.

content:"\f0c9"

 

Bootstrap Cheat Sheets를 이용하면 좀 더 쉽게 아이콘을 추가할 수 있습니다. 

'프로그래밍 > html+css+js' 카테고리의 다른 글

[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (1) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12
[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기  (0) 2025.01.02
[HTML+CSS] icon(아이콘)이 필요할 때 - XE Icon사용하기  (1) 2025.01.01
[HTML+CSS] a 태그를 이용하여 버튼 만들기  (0) 2024.12.29

 

이미지를 이용하지 않고 css를 이용하여 버튼 이미지 효과를 낼 수 있습니다.

<a> 태그를 이용하여 버튼 이미지효과를 만들어 보겠습니다. 

※ 먼저 a 태그를 이용하여 링크를 만들었습니다. 

<body>
  <a href="https://google.com">구글홈페이지로 이동하기</a>
</body>

>>> 결과 <<<

HTML의 <a> 태그는 브라우저마다 기본적으로 설정된 유형별 CSS 스타일을 가지고 있어요. 

이를 유저 에이전트 스타일시트(User Agent Stylesheet)라고 부릅니다. 아래는 대부분의 브라우저에서 <a> 태그에 기본적으로 적용되는 CSS 속성이에요.

a {
  color: blue; /* 텍스트 색상: 파란색 */
  text-decoration: underline; /* 밑줄 */
  cursor: pointer; /* 마우스 포인터가 손가락 모양으로 변함 */
}

우리가 어떤 css속성을 설정하지 않았지만, <a>를 사용하면 파란색에 밑줄이 표시됩니다. 

※ 상태별 기본 스타일

<a> 태그는 기본적으로 링크 상태에 따라 스타일이 다르게 적용됩니다.

  1. 기본 상태 ( :link)

  • 아직 클릭하지 않은 링크
a:link {
  color: blue;
}

 

  2. 방문한 링크 (:visited)

  • 이미 방문한 링크.
a:hover {
  text-decoration: underline;
}

 

  3. 호버 상태 (:hover)

  • 마우스를 링크 위에 올릴 때.
a:hover {
  text-decoration: underline;
}

 

  4. 활성 상태 (:active)

  • 링크를 클릭 중인 순간.
a:active {
  color: red; /* 빨간색 */
}

 

※ 기본 스타일 예제

<body>
  <a href="#">기본 링크</a>
  <a href="#" style="color: green;">스타일 덮어쓰기</a>
</body>

>>> 결과 <<<

  • 첫 번째 링크는 파란색과 밑줄이 적용된 상태로 보입니다.
  • 두 번째 링크는 color: green으로 기본 색상이 덮어씌워집니다.

※ 브라우저 기본 스타일 제거하기

<a> 태그의 기본 스타일을 없애려면, 아래처럼 CSS를 작성할 수 있어요

a {
  color: inherit; /* 부모 요소의 텍스트 색상 상속 */
  text-decoration: none; /* 밑줄 제거 */
  cursor: auto; /* 포인터 모양 변경 */
}

>>> 결과 <<<

 

※ 버튼 스타일 만들기 

css속성을 주면 버튼처럼 만들 수 있어요

a {
  display: inline-block; /* 링크를 인라인 블록으로 설정하여 크기와 여백을 설정 가능하게 함 */
  padding: 10px 20px; /* 내부 여백: 위아래 10px, 좌우 20px */
  background-color: #007BFF; /* 배경색을 파란색 계열로 설정 */
  color: white; /* 텍스트 색상을 흰색으로 설정 */
  text-decoration: none; /* 링크의 밑줄을 제거 */
  border-radius: 5px; /* 버튼의 모서리를 둥글게 설정 (5px 반지름) */
  transition: background-color 0.3s; /* 배경색 변경에 0.3초의 전환 효과를 추가 */
}

a:hover {
  background-color: #0056b3; /* 마우스를 올렸을 때 배경색을 더 어두운 파란색으로 변경 */
}

>>> 결과 <<<

둥글고 입체감 있는 버튼도 만들 수 있어요

    a {
      display: inline-block; /* 버튼 크기 지정 가능 */
      padding: 12px 24px; /* 내부 여백: 위아래 12px, 좌우 24px */
      background-color: #28a745; /* 녹색 배경 */
      color: white; /* 흰색 텍스트 */
      text-decoration: none; /* 밑줄 제거 */
      border-radius: 50px; /* 둥근 버튼 모양 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 입체감을 위한 그림자 */
      transition: transform 0.2s, box-shadow 0.2s; /* 클릭 시 애니메이션 효과 */
    }

    a:hover {
      background-color: #218838; /* 호버 시 더 진한 녹색 */
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 강조 */
    }

    a:active {
      transform: scale(0.95); /* 클릭 시 버튼이 살짝 작아짐 */
    }

>>> 결과 <<<

그라데이션 버튼도 만들 수 있어요

    a {
      display: inline-block; /* 버튼 크기 설정 */
      padding: 12px 24px; /* 내부 여백: 위아래 12px, 좌우 24px */
      background: linear-gradient(45deg, #ff6f61, #d84e2a); /* 45도 각도로 그라데이션 배경 */
      color: white; /* 흰색 텍스트 */
      text-decoration: none; /* 밑줄 제거 */
      border: none; /* 테두리 제거 */
      border-radius: 8px; /* 둥근 모서리 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 입체감을 주는 그림자 */
      font-weight: bold; /* 굵은 글씨 */
      cursor: pointer; /* 마우스 포인터가 손 모양으로 변경 */
      transition: transform 0.2s, box-shadow 0.2s, background 0.3s; /* 클릭, 그림자 및 배경 변화에 애니메이션 추가 */
    }

    a:hover {
      background: linear-gradient(45deg, #d84e2a, #ff6f61); /* 호버 시 그라데이션 방향 반전 */
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 호버 시 그림자 강조 */
    }

    a:active {
      transform: scale(0.98); /* 클릭 시 버튼이 살짝 작아짐 */
    }

>>> 결과 <<<

 

'프로그래밍 > html+css+js' 카테고리의 다른 글

[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (1) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12
[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기  (0) 2025.01.02
[HTML+CSS] icon(아이콘)이 필요할 때 - XE Icon사용하기  (1) 2025.01.01
[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기  (1) 2025.01.01

+ Recent posts

티스토리툴바