3 June 2020 / JEKYLL

Jekyll 기반의 GitHub Page 생성(3)

Jekyll 기반의 GitHub Page 생성은 여러 절로 구성되어 있습니다.

영상설명

블로그를 운영할 때 가장 신경써야 하는 부분 중 하나는 readability입니다. Jasper2는 영문일 경우 상당히 가독성이 좋은데 한글을 사용하니 폰트때문에 가독성이 많이 떨어지더군요. 그래서 폰트를 좀 바꾸어봤습니다.

이번 영상은 생성한 블로그의 가독성을 높이기 위해 웹폰트를 설정하는 방법에 대한 내용입니다.

Jekyll 기반의 GitHub Page 생성(3) - 웹폰트 설정 영상

웹 폰트 설정

먼저 사용할 웹 폰트를 물색해야 합니다. 구글에서 찾아보면 원하시는 웹 폰트를 쉽게 찾을 수 있습니다. 만만한 나눔고딕 폰트를 이용해 보겠습니다.

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">

나눔고딕 폰트에 대한 링크입니다.

이제 _layout/default.html 파일을 열어서 해당 폰트 링크를 넣어줍니다. 다음과 비슷하게 되겠네요.

<!DOCTYPE html>
<html>
<head>

    <!-- Document Settings -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- Base Meta -->
    ...
    ...

    <!-- 웹 폰트 설정 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">

이제 css파일을 수정해서 특정 class에 대한 font-family에 나눔고딕 폰트를 추가해 주면 되겠네요.

Jasper2에서 일반적인 포스트는 모두 .post-full-content css class의 영향을 받습니다. 다른 theme를 이용하시는 분은 포스트들이 어떤 css class에 영향을 받는지를 확인하셔서 그 class를 찾아 수정하시면 됩니다.

assets/css/screen.css 파일을 열어서 .post-full-content 부분을 찾아 다음과 같이 수정합니다.

Georgia는 영문폰트이기 때문에 영문은 일단 이 폰트를 먼저 이용하게 되고 한글 부분은 Nanum Gothic을 사용하게 됩니다.

.post-full-content {
    position: relative;
    margin: 0 auto;
    padding: 70px 100px 0;
    min-height: 230px;
    font-family: Georgia, 'Nanum Gothic', serif;
    font-size: 2.2rem;
    line-height: 1.6em;
    background: #fff;
}

css가 변경되었으니 gulp를 이용하여 css task를 수행합니다. 이전 포스트에 gulp 수행에 대한 내용을 참고하시면 될 듯 합니다.

이제 다시 bundle exec jekyll serve을 수행하면 새로 만들어진 css를 이용하여 블로그가 생성될 것이고 한글로 쓴 내용의 폰트가 나눔고딕으로 변경되는 것을 볼 수 있습니다.

End.

Jekyll 기반의 GitHub Page 생성(3)

Jekyll 기반의 GitHub Page 생성(4)

Jekyll 기반의 GitHub Page 생성(2)

Search IT Technical Training