티스토리 반응형웹 skeleton 스킨의 폰트 변경과 크기 변경하기

Tip!/티스토리

오랜만에 skeleton 스킨에 대해서 글을 작성 하는거 같네요.


지금까지 이것저것 꾸며 보면서 스킨을 대여섯번은 갈아 엎은거 같습니다. =_= 글쓴이가 이쪽으로는 지식이 많이 부족하다보니… 시간도 많이 소비되고, 고생도 많이 했지만, 그래도 하나하나 알아나가는 재미에 빠져 있고, 원하는 방향데로 수정이 될때마다 나름 뿌듯함(?) 을 느끼면서~ 지금도 수정중입니다. 언제 완성될런지… ㅡㅡ;


오늘은 방명록에 문의 주신 내용인 폰트의 크기 변경에 대해서 글을 작성 할려고 했으나, 기왕 적는거 폰트 변경부터 크기 변경, 줄간격 설정까지 한번 알아 보도록 하겠습니다.


관련글


Markquery 님께서 배포하시는 skeleton 스킨은 Bootstrap v3 를 기반으로 만들어져 있습니다. 티스토리에서 배포하는 일반적인 스킨은 폰트관리를 skin.html 과 style.css 에서 관리를 하고 변경이 가능하지만, skeleton 스킨은 그렇지가 않습니다. skeleton 스킨에서 skin.html 은 블러그의 레이아웃을 담당하고, style.css 는 Markquery 님께서 스킨을 만들면서 추가한 다양한 코드들이 들어 있고, 사용자가 자신의 블러그에 맞게끔 추가적인 코드들을 만들어 사용이 가능 합니다. 그리고 실질적인 폰트의 크기, 색상, 줄간격 및 다양한 태그의 설정은 images 폴더내에 있는 bootstrap.css 파일에서 수정을 하셔야 합니다.


Bootstrap 은 반응형웹 UI를 쉽게 구현해 주는 라이브러리 또는 도구 입니다. 트위터의 개발자인 Mark와 Jacob 이라는 사람들이 시작한 프로젝트라고 합니다. 현재 Bootstrap v3 가 배포되고 있고, 오픈소스로 공개되어 있어 많은 개발자들이 활용을 하여 웹사이트를 제작하고 워드프레스 스킨 제작에도 많이 활용을 하고 있지만, 티스토리 스킨으로 제작된 경우는 극히 드물어 아쉽습니다.


부트스트랩

바보들도 만들수 있는, 바보들을 위한, 도구라고 합니다. 글쓴이는 바보에 속하는거 같습니다…. =_=

위에서 잠깐 라이브러리 라는 용어를 사용 했는데요, Bootstrap 은 웹사이트를 만들기 위한 다양한 라이브러리 (레퍼런스)를 제공하기 때문 입니다. skeleton 스킨도 Bootstrap 을 이용하여 반응형웹을 구현하고 있기 때문에 Bootstrap 에서 제공하는 다양한 라이브러리 를 그대로 활용이 가능 합니다. 이부분은 스킨을 만들기 위한 요소이기도 하지만, 글쓴이가 블러그에 포스트를 작성하면서 가장 많이 활용하는 요소이기도 합니다. 표를 만들기 위해서 또는 특정 포인트를 주기 위한 아이콘이나 라벨, 버튼 같은 다양한 요소들이 포함되어 있어 복잡한 html 언어를 잘 모르더라도 쉽게 사용이 가능 합니다. 이부분에 대해서는 다음 포스트에 자세히 다루도록 하고~ 다시 본론으로 돌아가겠습니다.


서두가 너무 길었네요. =_= 일단 수정을 위해서 image 폴더내의 bootstrap.css 파일을 편집기로 엽니다.


Note

  • 윈도우 에서는 메모장으로 편집이 불가 하니 ‘EditPlus’ 같은 별도의 에디터 프로그램을 사용하셔야 합니다.
  • 항상 복사본을 만들어서 작업을 하는것이 좋습니다.

skeleton 스킨에서 폰트 변경은?


skeleton 스킨은 기본적으로 맑은 고딕, 나눔 고딕 같은 가독성이 좋은 폰트외에도 다음, 굴림, 바탕, 돋움 및 다양한 영문 폰트를 다양하게 지원 합니다. 거기다가 스크립트를 활용해서 블러그의 방문자가 임의로 폰트의 크기도 변경 가능하죠! 정말 좋은 기능이라고 생각 합니다. 하지만, 글을 작성하다 보면 글의 특성상 별도의 폰트가 필요할 경우가 있겠죠. 또는 개인의 취향에 따라서 이쁜 손글씨체 같은 폰트를 사용하고 싶은 경우도 있을거라 생각 됩니다.


skeleton 은 웹폰트를 활용해서 Markquery 님께서 스크립트로 폰트를 제어하게끔 만드셨는데… 한글의 경우 “맑은 고딕”, “나눔고딕”, “다음”, “굴림”, “돋움”, “바탕”을 설정할 수 있습니다. 나눔고딕과 다음체는 설치가 필요하며, 폰트 설치가 되어 있지 않은 PC 에서는 sans-serif 글꼴로 대체됩니다. 구글웹폰트를 활용해서 간단하게 폰트변경이 가능하지만, 로딩에 시간이 소요되는 부분도 있고, 아직 다양한 한글 폰트를 지원하는 것은 아니기에, 자신의 블러그에 직접 폰트를 등록해서 활용하는 방법에 대해서 설명을 드리도록 하겠습니다.


먼저 자신이 원하는 폰트를 구하셔야 겠죠! 글쓴이는 네이버의 나눔손글씨펜 을 사용하기로 하겠습니다. 다운로드 받은 파일을 설치하시고, C:\Windows\Fonts 에서 자신이 사용할 ‘폰트 이름.ttf’ 파일을 적당한 폴더로 복사 합니다. 그리고 확장자를 웹폰트 (.eof , .woff) 형식으로 변경을 해주셔야 합니다.


나눔손글씨펜은 구글웹폰트도 있습니다. 웹접근성 향상을 위한 글꼴 설정 페이지를 참고하시면 쉽게 활용도 가능 합니다.


네이버의 나눔 폰트는 인터넷 익스플로러 (IE) 를 위한 Embedded OpenType (EOT) 파일로 변환하여, 블로그나 웹페이지 등에 사용할 수 있습니다. 또한, Web Open Font Format (WOFF) 파일로 변환시켜 파이어폭스, 크롬 등에도 IE에서와 같이 웹폰트를 적용할 수 있습니다.


Important

PC 에 설치된 아무 폰트나 변환해서 블러그에 사용하는 것은 저작권에 문제가 될 수도 있으니, 주의 하시기 바랍니다.



글쓴이는 다양한 웹브라우저를 지원하는 woff 파일로 변환을 하기로 했는데, sfnt2woff 프로그램을 이용해서 간단하게 변환이 가능 합니다. 프로그램을 설치후에 실행파일 위로 변환할 폰트를 마우스로 가져다 놓으면 변환이 완료된 ‘폰트 이름.woff’ 파일이 만들어 집니다. 해당 파일을 HTML/CSS 편집 - 파일등록에서 자신의 블러그에 업로드 합니다.


skeleton 스킨에서 자신만의 폰트를 변경하는 방법은 크게 세가지가 있습니다. 첫번째는 body 태그에 적용시켜 전체 블러그의 폰트를 변경하는 방법과, 두번째는 skeleton 스킨의 폰트 변환 스크립트에 추가해서 필요할 경우에만 폰트를 변경하여 글을 읽을 수 있게끔 하는 방법과, 마지막으로는 코드를 만들어서 특정 태그에서만 적용이 되도록 하는 방법 입니다. 크게 어렵지 않은 부분이나 최대한 자세히 설명을 드리도록 하겠습니다.


body 태그에 폰트를 적용하는 방법


나눔손글씨 펜 body 태그에 적용

나눔손글씨 펜 body 태그에 적용 예시

bootstrap.css 파일을 편집기로 여시고, body 태그를 찾아서 자신이 업로드한 폰트의 한글 이름과 파일 명을 추가해주시면 됩니다. 한글 이름은 PC 에서 폰트.ttf 파일을 더블클릭하면 폰트 관리 프로그램을 통해서 알수 있습니다.


body {
  font-family: "나눔손글씨 펜", NanumPen, "맑은 고딕", "Malgun Gothic", "나눔고딕", NanumGothic, "돋움", dotum, "Georgia Pro", Arial;
  font-size: 16px;
  line-height: 1.8;
  color: #777777;
  background-color: #ffffff;
}

이렇게 변경을 하시고나면 수정된 bootstrap.css 파일을 파일 등록에서 업로드 시켜 주시고, 웹브라우저를 새로고침 (F5) 하시면 블러그의 전반적인 부분에 폰트가 변경 된것을 확인이 가능 합니다. 화면을 보시면 h 태그가 적용된 타이틀과 제목을 제외한 대부분이 변경 되었습니다. 다른 부분들도 변경을 하시고자 한다면 해당 태그를 찾아서 동일하게 변경을 하시면 됩니다.


skeleton 스킨의 폰트 변환 스크립트에 추가


나눔손글씨 펜 폰트 변환 스크립트에 추가

나눔손글씨 펜 폰트 변환 스크립트에 추가 예시

<li><a href="javascript:changeFontFamily('맑은 고딕, Malgun Gothic, sans-serif');">맑은고딕</a></li>
<li><a href="javascript:changeFontFamily('나눔손글씨 펜, NanumPen, sans-serif');">나눔손글씨</a></li>
<li><a href="javascript:changeFontFamily('나눔고딕, NanumGothic, sans-serif');">나눔고딕</a></li>
<li><a href="javascript:changeFontFamily('다음_Regular, daum_Regular, sans-serif');">다음</a></li>
<li><a href="javascript:changeFontFamily('굴림, Gulim, sans-serif');">굴림</a></li>
<li><a href="javascript:changeFontFamily('돋움, dotum, sans-serif');">돋움</a></li>

skeleton 스킨의 폰트 변환 스크립트에 추가를 하실려면 이번에는 skin.html 파일에서 수정을 하셔야 합니다. changeFontFamily 로 검색을 하시면 폰트 변환 스크립트가 적용된 코드를 확인 할 수 있는데, 총 3군데가 있으니 모두 동일하게 수정을 하셔야 합니다. 방법은 그림과 같이 두번째나 세번째 줄에 내용을 추가해주시면 되는데, 아무거나 한줄 복사하신다음에 폰트 이름과 메뉴에서 표시될 이름 정도만 수정해 주시면 됩니다.


앞서 설명드린 bootstrap.css 수정은 원래데로 복구를 했습니다. 폰트 변환 스크립트에 ‘나눔손글씨’ 가 추가된 것을 확인 할 수 있고, 선택 했을시에는 본문의 내용에 적용되어 폰트가 변경 되었습니다. 물론, 폰트의 크기 변경도 가능 합니다.


style.css 에 별도의 코드를 넣어서 활용하는 방법


나눔손글씨 펜 특정 태그에만 적용

나눔손글씨 펜 특정 태그에만 적용 예시

.nanum-p { 
  font-family: '나눔손글씨 펜', 'NanumPen'; 
  font-size : 24px;
}

옆의 내용과 같이 별도의 코드를 만들어 style.css 의 적당한 곳에 추가 합니다. 그리고, 해당 폰트가 필요한 경우에는 class="nanum-p" 를 해당 코드에 추가하여 사용 할 수도 있습니다.


p 태그에 class="nanum-p" 를 추가한 부분만 폰트가 변경된 것을 확인이 가능 합니다.


skeleton 스킨에서 폰트의 크기 변경과 줄간격 설정은 어떻게 하나요?


스킨 전체를 감싸고 있는 body 태그를 찾아서 변경을 하시면 되면, 본문 및 일부 스킨의 영역까지 모두 변경이 가능 합니다. 에디터에서 검색을 하시다보면 아래와 같은 내용이 있을 겁니다. 여기서 font-size 는 글씨의 크기이고, 기본은 14px 로 설정되어 있습니다. line-height 줄간격 이고, color 는 폰트의 색상, background-color 는 폰트의 배경색 입니다. 색상은 HTML 색상 코드로 표시되어 있는데, 색상값은 이미지 프로그램이나 티스토리 에디터 또는 네이버 색상 팔레트 등에서 확인이 가능 합니다.


body {
  font-family: "맑은 고딕", "Malgun Gothic", "나눔고딕", NanumGothic, "돋움", dotum, "Georgia Pro", Arial;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}
기본 사이즈

[ font-size: 14px , line-height: 1.428571429 ]

폰트 사이즈 15_줄간격2.2

[ font-size: 15px , line-height: 2.2 ]

이렇게 변경한 부분은 본문의 p 태그로 감싸고 있는 부분은 적용이 되지만 다른 코드를 사용한 부분에는 적용이 되지 않을수도 있어 별도의 수정 작업이 필요 합니다. 예를 들어 인용문인 blockquote 태그를 사용할 경우에는 검색을 해보시면 font-size 는 17.5px 로 설정되어 있고, line-weight 글자간격은 300 으로 line-height 줄간격은 1.25 로 별도로 설정되어 있습니다. 처음 설명드린 부분에서 수정을 하셨다고 해도 태그에 별도로 사용된 폰트의 크기는 수정이 되지 않기 때문에 자신이 자주 사용하는 태그는 검색을 해서 별도로 수정을 하셔야 하고, bootstrap 에 없을 경우에는 style.css 에 내용을 추가해 주시면 됩니다.