blog.d1p2.com Open in urlscan Pro
112.217.160.186 Public Scan

Back to summary

URL:
https://blog.d1p2.com/post_theme/%ED%85%8C%EB%A7%88-%EB%A7%8C%EB%93%A4%EA%B8%B0-part-1/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC...
Submission: On December 11 via manual (December 11th 2023, 11:52:43 am UTC) from DE — Scanned from DE

Form analysis
4 forms found in the DOM

GET https://blog.d1p2.com/

<form role="search" method="get" id="searchform" class="searchform" action="https://blog.d1p2.com/">
  <label class="screen-reader-text" for="s">Search for:</label>
  <input type="text" value="" name="s" id="s">
  <button id="searchsubmit" class="btn-search" title="Search">
    <i class="demo-icon icon-search"></i>
  </button>
</form>

GET https://blog.d1p2.com/

<form role="search" method="get" id="searchform" class="searchform" action="https://blog.d1p2.com/">
  <div>
    <label class="screen-reader-text" for="s"></label>
    <input type="text" value="" name="s" id="s">
    <button id="searchsubmit" class="btn-search" title="Search">
      <i class="demo-icon icon-search"></i>
    </button>
  </div>
</form>

POST https://blog.d1p2.com/wp-comments-post.php

<form action="https://blog.d1p2.com/wp-comments-post.php" method="post" id="commentform" class="comment-form">
  <p class="comment-notes">따뜻한 말한마디가 블로거를 춤추게 합니다. 이메일 주소는 공개되지 않습니다.</p>
  <p class="comment-field-wrap"><label for="comment">Let us know what you have to say:</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>
  <p class="p-privacy"><input id="privacy" type="checkbox" class="checkbox-privacy" checked=""><label for="privacy">사이트 개인정보 수집동의 및 이용안내 |
      <a href="#" class="aPopupModal" data-target="#popupModal" data-url="privacy-policy"><i class="demo-icon icon-doc-text"></i></a></label></p>
  <p class="comment-form-author"><label for="author">Name<span>*</span></label> <input id="author" name="author" type="text" value="" size="30" aria-required="true"></p>
  <p class="comment-form-email"><label for="email">Email<span>*</span></label> <input id="email" name="email" type="text" value="" size="30" aria-required="true"></p>
  <p class="form-submit"><input name="submit" type="submit" id="submit" class="zeein-button" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="315" id="comment_post_ID">
    <input type="hidden" name="comment_parent" id="comment_parent" value="0">
  </p>
  <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="46ac29e735"></p>
  <p style="display: none !important;"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="1702295556188">
    <script>
      document.getElementById("ak_js_1").setAttribute("value", (new Date()).getTime());
    </script>
  </p>
</form>

GET https://blog.d1p2.com/

<form role="search" method="get" id="searchform" class="searchform" action="https://blog.d1p2.com/">
  <div>
    <label class="screen-reader-text" for="s"></label>
    <input type="text" value="" name="s" id="s">
    <button id="searchsubmit" class="btn-search" title="Search">
      <i class="demo-icon icon-search"></i>
    </button>
  </div>
</form>

Text Content

Skip to content


ZEEIN

Primary Menu
 * blog
 * theme
 * about
 * contact
 * 
 * Search for:


Home / 테마 만들기 – Part 1 / 웹폰트 설치



웹폰트 설치

by zeein | Sat, Nov 11, 2017Sun, Nov 12, 2017

zeein-yellow 테마에서는

 * 한글 : 스포카 한 산스
 * 영문 : Open Sans

위의 웹폰트를 이용해 사이트 제작을 합니다.

--------------------------------------------------------------------------------

한글 폰트 : 스포카 한 산스

 

1. 폰트 다운로드 및 저장

다운로드 : https://spoqa.github.io/spoqa-han-sans/ko-KR/

사이트에서 KR 서브셋을 다운 받습니다.



압축을 풀고 파일을 zeein-yellow > assets > font 폴더에 저장 합니다.



2. SPOQAHANSANS-KR.CSS 파일 추가

저장 후에 해당 폴더에 SpoqaHanSans-kr.css 파일을 추가 해서 아래의 코드를 입력 합니다.

@font-face { font-family: 'Spoqa Han Sans'; font-weight: 700; src: local('Spoqa
Han Sans Bold'), url('./Spoqa Han Sans Bold.woff2') format('woff2'),
url('./Spoqa Han Sans Bold.woff') format('woff'), url('./Spoqa Han Sans
Bold.ttf') format('truetype'); } @font-face { font-family: 'Spoqa Han Sans';
font-weight: 400; src: local('Spoqa Han Sans Regular'), url('./Spoqa Han Sans
Regular.woff2') format('woff2'), url('./Spoqa Han Sans Regular.woff')
format('woff'), url('./Spoqa Han Sans Regular.ttf') format('truetype'); }
@font-face { font-family: 'Spoqa Han Sans'; font-weight: 300; src: local('Spoqa
Han Sans Light'), url('./Spoqa Han Sans Light.woff2') format('woff2'),
url('./Spoqa Han Sans Light.woff') format('woff'), url('./Spoqa Han Sans
Light.ttf') format('truetype'); } @font-face { font-family: 'Spoqa Han Sans';
font-weight: 100; src: local('Spoqa Han Sans Thin'), url('./Spoqa Han Sans
Thin.woff2') format('woff2'), url('./Spoqa Han Sans Thin.woff') format('woff'),
url('./Spoqa Han Sans Thin.ttf') format('truetype'); }

view raw SpoqaHanSans-kr.css hosted with by GitHub

3. MAIN.CSS 파일 추가

사이트 스타일을 지정할 파일 main.css 파일을 assets > css 디텍토리에 저장하고 기본 스타일을 입력합니다.

This file contains bidirectional Unicode text that may be interpreted or
compiled differently than what appears below. To review, open the file in an
editor that reveals hidden Unicode characters. Learn more about bidirectional
Unicode characters
Show hidden characters

@charset "utf-8"; /*
========================================================================== ì›¹
ì ‘ê·¼ì„±
========================================================================== */
.screen-reader-text { border: 0; border: 0; clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0;
position: absolute !important; width: 1px; word-wrap: normal !important; } /*
==========================================================================
í…ìŠ¤íŠ¸
========================================================================== */
body, button, input, select, optgroup, textarea { color: rgba(0, 0, 0, 0.65);
background-color: rgba(222, 222, 222, 1); font-family: "Spoqa Han Sans",
Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim,
sans-serif; font-size: 16px; font-size: 1rem; line-height: 1.6rem; font-weight:
300; } .font__eng { font-family: "Open Sans", Helvetica, Arial, "Apple SD Gothic
Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif; }

view raw main.css hosted with by GitHub

 

--------------------------------------------------------------------------------

영문폰트 : OPENS SANS

 

1. 폰트 다운로드 및 저장

다운로드 : https://fonts.google.com/specimen/Open+Sans



위의 사이트에 방문해서 폰트를 다운로드 받으 후 압축 해제를 하면 italic 폰트가 함께 있는데 italic 폰트는 삭제 하고

2.폰트 다이어트

사이트 방문하기: https://www.fontsquirrel.com

다운로드 받은 ttf 파일을 woff, woff2, eot 웹폰트로 생성해주는 사이트로



위의 설정으로 다운로드 받으면 파일 크기가 1/4 ~ 1/5 정도로 줄어 있습니다.

이 파일들 또한 zeein-yellow > assets > font > OpenSans 폴더 안에 모두 저장 합니다.

파일 중에서 stylesheet.css 내용을 아래의 코드로 대체 합니다.(font-family, font-weight 부분을 일부 수정)

This file contains bidirectional Unicode text that may be interpreted or
compiled differently than what appears below. To review, open the file in an
editor that reveals hidden Unicode characters. Learn more about bidirectional
Unicode characters
Show hidden characters

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 11,
2017 */ @font-face { font-family: 'Open Sans'; src:
url('opensans-light-webfont.eot'); src: url('opensans-light-webfont.eot?#iefix')
format('embedded-opentype'), url('opensans-light-webfont.woff2')
format('woff2'), url('opensans-light-webfont.woff') format('woff'),
url('opensans-light-webfont.ttf') format('truetype'); font-weight: 300;
font-style: normal; } @font-face { font-family: 'Open Sans'; src:
url('opensans-regular-webfont.eot'); src:
url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff2') format('woff2'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'); font-weight: 400;
font-style: normal; } @font-face { font-family: 'Open Sans'; src:
url('opensans-semibold-webfont.eot'); src:
url('opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-semibold-webfont.woff2') format('woff2'),
url('opensans-semibold-webfont.woff') format('woff'),
url('opensans-semibold-webfont.ttf') format('truetype'); font-weight: 600;
font-style: normal; } @font-face { font-family: 'Open Sans'; src:
url('opensans-bold-webfont.eot'); src: url('opensans-bold-webfont.eot?#iefix')
format('embedded-opentype'), url('opensans-bold-webfont.woff2') format('woff2'),
url('opensans-bold-webfont.woff') format('woff'),
url('opensans-bold-webfont.ttf') format('truetype'); font-weight: 700;
font-style: normal; } @font-face { font-family: 'Open Sans'; src:
url('opensans-extrabold-webfont.eot'); src:
url('opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-extrabold-webfont.woff2') format('woff2'),
url('opensans-extrabold-webfont.woff') format('woff'),
url('opensans-extrabold-webfont.ttf') format('truetype'); font-weight: 800;
font-style: normal; }

view raw stylesheet.css hosted with by GitHub

 

--------------------------------------------------------------------------------

STYLE.CSS, FUNCTIONS.PHP 파일 수정

테마 폴더의 function.php 파일을 수정합니다.

This file contains bidirectional Unicode text that may be interpreted or
compiled differently than what appears below. To review, open the file in an
editor that reveals hidden Unicode characters. Learn more about bidirectional
Unicode characters
Show hidden characters

<?php if ( ! function_exists( 'zeein_yellow_setup' ) ) : function
zeein_yellow_setup() { register_nav_menus( array( 'primary' => esc_html__(
'Primary', 'zeein-yellow'), ) ); } endif; add_action( 'after_setup_theme',
'zeein_yellow_setup' ); function zeein_yellow_scripts() { // css // style.css
wp_enqueue_style( 'zeein-yellow-style', get_stylesheet_uri() ); // css:
bootstrap wp_enqueue_style( 'zeein-bootstrap.min',
get_stylesheet_directory_uri() .
'/assets/bootstrap-4.0.0-beta.2-dist/css/bootstrap.min.css', array(),
'v4.0.0.beta2' ); // css: main.css wp_enqueue_style( 'zeein-main',
get_stylesheet_directory_uri() . '/assets/css/main.css', array(), 'v1.0' ); //
script // jquery wp_enqueue_script( 'zeein-jquery.min',
get_stylesheet_directory_uri() . '/assets/js/jquery-3.2.1.min.js', array(),
'v3.2.1', false ); // bootstrap wp_enqueue_script( 'zeein-popper.min',
get_stylesheet_directory_uri() .
'/assets/bootstrap-4.0.0-beta.2-dist/js/popper.min.js', array(), 'v 1.12.3',
true ); wp_enqueue_script( 'zeein-bootstrap.min', get_stylesheet_directory_uri()
. '/assets/bootstrap-4.0.0-beta.2-dist/js/bootstrap.min.js', array(),
'v4.0.0.beta2', true ); } add_action( 'wp_enqueue_scripts',
'zeein_yellow_scripts' ); ?>

view raw functions-1.php hosted with by GitHub

20: main.css 파일을 추가

 

테마 폴더의 style.css 파일을 수정 합니다.

This file contains bidirectional Unicode text that may be interpreted or
compiled differently than what appears below. To review, open the file in an
editor that reveals hidden Unicode characters. Learn more about bidirectional
Unicode characters
Show hidden characters

/* Theme Name: zeein yellow Theme URI: blog.d1p2.com Description: zeein yellow
theme Version: 1.0 Author: zeein Author URI: http://blog.d1p2.com */ @charset
"utf-8"; /* font : kor */ @import
url('./assets/font/SpoqaHanSans_subset/SpoqaHanSans-kr.css'); /* font : eng */
@import url('./assets/font/OpenSans/stylesheet.css');

view raw style-1.css hosted with by GitHub

사이트에 접속해서 한글, 영문 웹폰트가 제대로 로딩 되고 있는지 테스트 합니다.



지금까지의 작업이 정상적으로 되었다면 이미지 우측의 화면처럼 사이트에 폰트가 적용된 것을 확인 하실 수 있습니다.

Site link
 * 스포카 한 산스
 * Open Sans
 * Free Fonts! Legit Free & Quality » Font Squirrel

Share this





PREV

테마 만들기 - Part 1


NEXT

플러그인 추가하기


LEAVE YOUR QUESTION OR FEEDBACK CANCEL REPLY

따뜻한 말한마디가 블로거를 춤추게 합니다. 이메일 주소는 공개되지 않습니다.

Let us know what you have to say:

사이트 개인정보 수집동의 및 이용안내 |

Name*

Email*





Δ


카카오톡 오픈채팅

워드프레스 테마에 대해서 궁금하신가요?
카카오톡 1:1 채팅으로 궁금증을 해결하세요.

그룹채팅


SEARCH




THEME

 * zeein-yellow
   * 워드프레스 테마
   * 기본구조 및 Child 테마
     * style.css
     * functions.php
     * 템플릿 파일
 * 준비하기
   * 기본파일 생성
   * Bootstrap – 1
   * Bootstrap – 2
   * plugins
   * scripts
 * 테마 만들기 – Part 1
   * 웹폰트 설치
   * 플러그인 추가하기
   * 상단 메뉴
   * Slick Slider
   * grid 이해
   * [section] service
   * [section] about us
 * 테마 만들기 – Part 2
   * CPT & ACF
     * CPT 설정방법
     * ACF
   * [section] portfolio – 1
   * [section] portfolio – 2
   * [section] portfolio – 3A
   * [section] portfolio – 3B
   * [section] team
 * 테마 만들기 – Part 3
   * [section] GOAL
   * [section] contact – 1
   * [section] contact – 2
   * [section] contact – 3
   * [section] sns
 * 테마 만들기 – Part 4
   * 하단메뉴(footer.php)
   * 레이아웃 다듬기 – 1
   * 레이아웃 다듬기 – 2




Designed by Cloudfolder | Theme: zeein-blog by zeein.

MODAL TITLE

×
...

blog.d1p2.com Open in urlscan Pro 112.217.160.186 Public Scan

Form analysis 4 forms found in the DOM

GET https://blog.d1p2.com/

GET https://blog.d1p2.com/

POST https://blog.d1p2.com/wp-comments-post.php

GET https://blog.d1p2.com/

Text Content

blog.d1p2.com Open in urlscan Pro
112.217.160.186 Public Scan

Form analysis
4 forms found in the DOM