관리 메뉴

나나코노의 즐거운 일상 :)

"정보" 티스토리 꾸미기(웹폰트 적용편) 본문

나♡코 티스토리 관련

"정보" 티스토리 꾸미기(웹폰트 적용편)

나나코노 나나코노 2016.02.01 20:39

 

티스토리 꾸미기 두번째는 웹 폰트를 적용해 보는거에요.

 

포토샵을 이용해서 맘에드는 폰트를 적용하고,

디자인하는.. 작업은 한번정도 해보셨을꺼 같아요. 

그런 작업은 대부분

인터넷에서 폰트를 찾고 그걸 컴퓨터에 설치하면 사용할 수 있었조.

하지만 웹폰트는 살짝 적용방법이 달라요.

 

사실 웹폰트를 적용해 볼 일이 크게 없어요.

저야 직군이 웹퍼블리셔라서 항상 작업을 하니까 알고 있는 거지만....

그외 분들은 대부분 모르실꺼에요.

 

일단 폰트 적용 방법을 알려드리기 전에... 더 중요한게 있어요.

 

우리가 무엇을 바꾸던간에... 꼭 필요한 것이 있는데..

바로...어디 부분을 어떻게 바꿔야 하고,

소스는 어디에 있는지 위치를 찾을 수 있어야

어떤 작업이든 가능해요.

 

그 위치 찾는 방법이 여러가지가 있지만

그중 가장 손쉽게 찾을 수 있는걸 알려드릴께요.

처음엔 어렵다 느껴지지만 하다보면 정말 쉬워요.

 

 

 

 

일단 익스플로러를 이용해서 블로그로 접속하세요.

(다른 브라우저도 가능하지만 가장 많이 사용되는 익스플로러로 설명할께요~)

 

 

 

 

그런 다음 키보드에 있는 F12 버튼을 클릭~ 

그럼 DOM탐색기라는게 나올꺼에요.

 

 

 

 

화살표 아이콘을 누른 후 수정 원하는 부분에 마우스를 클릭하면 되요.

저는 티스토리 꾸미기! 라고 되어있는 본문 제목을 수정해 볼께요.

 

 

 

 

화살표가 있는 아이콘으로 제목 부분을 클릭하면 스타일이라는 부분에

이미지 처럼 소스들이 나올꺼에요.

내용을 보면 style.css:170 <<< 이라고 되어 있는 파란 글씨가 보이시조?

 

그 부분이 바로 소스의 위치에요.

티스토리 꾸미기! 라는 제목의 소스가

style.css 라는 파일의 170번째 줄에 있다 이런 말인거조.

 

이렇게 찾으니 생각보다 쉽조?

어렵게 느껴진다 해도 몇번 하다보면 쉬울꺼에요~ 걱정마세요!

눈에 익지 않으면 누구든 어렵게 느껴진답니다.

 

 

 

 

크롬의 경우는 이렇게 나와요.

파이어 폭스 등 다른 브라우저도 비슷한 형태로 나오니 참고하시면 되요~

 

 

 

 

소스의 위치를 찾았다면 블로그 관리자 페이지로 간 후

HTML / CSS 편집으로 접속하세요~

 

 

 

 

그럼 요런 화면이 나오조!

우린 구조(html)를 바꿀께 아니고 스타일(css)을 바꿀꺼니까

 

 

 

 

CSS 쪽으로 들어가면 되요.

그런 다음 아까 확인한 170번째 줄을 확인해 보는거조~

 

 

 

 

그럼 아까 확인했던 제목 부분의

 tit_post << 클래스 명이 170번째 줄있는게 보일꺼에요.

위치를 맞게 찾았네요.

 

 

 

 

tit_post 라는 클래스 명을 검색해서 찾을 수도 있겠지만...

초보인 경우... 위치로 찾는게 더 쉬울꺼에요.

쫌 익숙해지고 클래스가 무엇인가 라는것도 알게되면 그때는

검색을 통해 찾으면 되요.

 

우리는 티스토리에 한해 해볼꺼고 초보니까 그냥 위치로 찾는걸로 할께요~

 

 

 

 

위치도 알았으니 본격적으로 스타일을 바꿔봐야 겠네요.

젤 처음으로 할일은 원하는 폰트를 찾는거에요.

저의 경우 배달의민족 폰트가 요즘 괜찮더라구요.

저는 배달의 민족 폰트로 수정해볼께요!

 

무료로 제공 되는 폰트들이 많이 있으니 원하는 스타일을 찾은 다음

동일한 방법으로 적용하시면 되요~

 

단 상업적으로 사용될때는 반드시 무료 폰트인지 유료 폰트인지를 확인한 후 사용해야되요.

상업적인 공간에 유료폰트를 맘대로 쓰면 나중에 어마어마한 벌금을 내야 한답니다.

 

 

 

 

제가 사용할 배달의 민족 폰트를 찾으니 저렇게 확인이 되네요.

웹폰트는 인터넷에서 찾으시면 되요.(예 나눔고딕 웹폰트, 나눔고딕 구글 웹폰트 등.. )

그리고 구글 웹폰트로 적용하시는게 가장 대중적이고 문제없이 사용하기 좋아요~

 

저 많은 내용 중 빨간 표시가 된 부분만 우리는 사용할꺼에요.

 

 

 

 

웹 폰트는 (https://www.google.com/fonts/) 사이트로 접속해서

맘에 드는 폰트가 있는지 확인 후 사용해도 되고,

리스트에 없는 폰트는 검색을 통해 찾으면 되요~

 

 

 

 

일단 웹 폰트를 내 블로그로 불러와야 사용이 가능한건데

아까 찾은 내용을 css소스에 적어주는게 웹폰트를 불러오는 작업을 하는거에요.

 

 

 

 

이미지와 같이 젤 첫 줄에 있는 @charset "UTF-8"; << 내용 밑에 작성해 주면 되요~

굳이 타이핑 할 필요 없이 복사 + 붙여넣기~ 

 

이미지 처럼 작성이 됐다면 일단 웹폰트를 블로그로 불러오는 것 까지는 성공한거에요.

그럼 이제 블로그에 적용을 해야겠조??

 

각각의 폰트에는 이름이라는게 있어요.

그 폰트 이름을 소스에 작성해 주면 되는데..

우리가 불러온 배달의 민족 폰트 이름은 무엇일까요???

 

@import url(http://fonts.googleapis.com/earlyaccess/hanna.css); http로 시작되는 url보이시조?

그 url을 브라우저 주소창에 넣고 엔터~ 누르면 메모장이 하나 열릴꺼에요.

 

 

 

 

메모장에서 우리가 확인 할 내용은

font-family: 'Hanna'; 라는 부분이에요.

'Hanna' 라는 이름이 제가 적용할 폰트의 이름이였네요!

 

폰트 이름을 알았으니 이제 소스에 작성해줘야겠조?~

 

 

 

 

원래 작성 된 소스에 font-family: 라는게 있다면 그걸 수정해주거나 추가해주면 되지만...

소스에 아예 font-family: 라는게 없으니 >> font-family: 'Hanna'; << 요렇게 넣어주면 되요.

이것도 복사+붙여넣기 하시면 됩니다~

(폰트입력 시 한글이거나 공백이 있는경우 '' << 감싸주는게 좋습니다.)

 

소스에 넣으실 때는 반드시 { 내용 } 대 괄호 안에 작성이 되야만 하고,

이미지를 잘 보고 똑같이 넣으면 됩니다~

 

그런 후 저장버튼을 클릭~

 

 

 

 

오호~ 확인해 보니 폰트가 바뀌어 있네요..ㅋㅋ

만족 스럽군요 ㅎㅎㅎ

 

 

 

 

폰트 스타일만 바꾸니 먼가.. 밍밍한 느낌이에요.

이미지 처럼 색도 바꾸고 크기도 좀더 크게 하고 싶네요.

 

그렇다면 다시 170번 줄로 가서 소스를 좀더 추가해 넣으면 되요.

일단 폰트 색상을 변경하는 속성은 color 이고,

폰트 사이즈를 변경하는 속성은 font-size 라고 해요.

 

170번째 줄 소스를 일단 확인합니다.

.tit_post { font-family: 'Hanna'; color:red; font-size:40px; padding:5px 0 10px; font-weight:normal; line-height:43px; }

일단 {} 대 괄호 안에 모든 내용이 입력되어 있조? 반드시 확인해 주세요~

기존 소스에 color / font-size 라는게 있다면 내용을 수정을 해주면 되고

없다면 아까처럼 추가를 해주면 되요.

 

 

 

 

일단 원하는 컬러를 적용하려면 컬러의 이름을 알아야 하조.

색상의 이름은 포토샵에서 컬러 추출을 해보면 알수 있어요.

#까지 포함해서 #64696c << 이렇게가 컬러 이름이 되는거에요. 

아님 그냥 yellow , red, 요런 값으로 넣어도 되구요.

 

포토샵에서 추출한 값을 넣을때는 #을 함께 작성해 주면 되구요. ( color:#64696c; )

그냥 red 이렇게 넣을때는 # 없이 그냥 작성하면 되요~ ( color:red; )

 

이번엔 색상이 아닌 폰트 크기 조절을 할께요!

font-size:40px; 라는건데..

24px , 30px... 뭐 요런식으로 원하는 크기 뒤에 px만 넣어주면 되요.

 

px 말고도 em등등 단위가 있지만...

설명하려면 한도 끝도 없고 우리는 초보니까 그냥 px로~

 

여기서 중요한건...

color 다음에는 : 나오고 #64696c 나오고 ; 마무리 한다는거에요.

color 는( : ) #64696c 이걸로 할께 ( ; ) 끝 이라는 뜻이조.

font-size 는( : ) 40px 로 할께 ( ; ) 끝 이렇게 : , ; 는 매우 중요해요.

 

; 이것이 있어야만 color 다음에 폰트 크기를 쓸수 있다는 것만 알고 계시면 되요.

그리고 이 모든 내용은 {  } 안에 작성이 되야 한다는 점!

 

.tit_post { font-family: 'Hanna'; color:red; font-size:40px; font-weight:normal; line-height:43px; }

.tit_post << 이것에 대한 스타일 작성은 { 속성:값; 속성:; 속성:값; } 이다

이런 개념 이에요.

스타일의 이름은 : 이거야 ; 스타일작성 끝 이런 구조라고 이해하시면 되요.

 

 

 

 

최종적으로 위 내용대로 다 수정하면 이미지처럼 바뀌에 되는 것이조~

 

엄청 먼가 복잡하조?? ㅎㅎㅎ

저도 어떻게든 풀어서 쉽게 쓴다고 썼지만

처음 보는 분들인 경우 복잡해 보일꺼 같다는 생각이 들어요.

 

이럴땐 그냥 그대로 넣어보는게 가장 빨리 이해할 수 있는 방법이니까

일단 소스에 추가하고 저장해 보세요!

 

color:#000000; 또는 color:red; 컬러 바꾸기 (색상 코드는 포토샵에서 확인 가능)

font-size:11px; 글자 크기 바꾸기 (숫자에 따라 글자 크기가 지정)

font-weight:normal; 또는 font-weight:bold;  글자 굵기 바꾸기 (글자 굵기가 굵게/bold ,얇게)

line-height:150%; 글자 간격 바꾸기 (문장이 두줄로 나올때 글자 라인 간격)

font-family:'Hanna'; (폰트 스타일 지정)

font-style:italic; 또는 font-style:normal; 글자 기울기 바꾸기 (비스듬하게 눕히기/italic, 기본 글자체)

 

보통 많이 쓰는게 이정도인거 같네요.

 

만약 내용을 맞게 입력했는데도 원하는데로 수정이 안된경우.

color:red!important; << !important 라고 작성해 주세요.

 !important는 ; < 바로 앞쪽에 쓰여지면 되요~

 

!important 라고 쓰는 이유는 해당 부분 스타일을 무조건 이 내용으로 지정한다.

다른곳에 작성된 내용보다 지금 내용을 최우선으로 적용한다. 라는 뜻이에여.

 

소스를 직접 작성 한게 아니다 보니

어딘가에 동일한 내용이 약간 다르게 중복으로 작성되어 있을수도 있거든요.

그로인해 가끔 맞게 작성을 했어도 적용이 안되는 경우가 있어요.

 

tit_post 이것에 대한 스타일 지정을 170번 줄에 했는데

180번 줄에 약간 틀린 내용으로 tit_post 스타일이 또 작성되어 있는 경우

나중에 작성 된 내용 (180번째 줄)이 적용되어 지기 때문에 (나중에 작성 된 순서대로 적용)

가끔 적용이 안되는 경우가 있어요.

그런경우 !important 를 써주게 되면 180번째 줄 내용은 무시하고

170번줄(!important 가 작성된 내용) 컬러를 우선 적용한다.

이렇게 선언이 되는거조.

 

글로는 어렵지만.. 나중에 써볼일이 있다면 바로 이해가 갈거에요~

 

 

 

 

 

참 블로그 전체 폰트 스타일을 한번에 바꾸고자 할 경우..

 

css 상단에 /* reset */ << 요렇게 써있는 부분이 있을꺼에요.

그 부근 내용을 확인하다 보면

body,th,td,input,select,textarea,button { } << 요렇게 써있는 부분이 확인 되는데

해당 부분의 font-family를 수정해 주면 됩니다.

 

만약 저곳을 수정했는데 안된다 하면

body * {font-family:'hanna'!important;}
body a {font-family:'hanna'!important;} 
 

 /* reset */ << 요 부분 위에 해당 내용을 써주면 되구요~

 

 

 

 

그럼 소스 하단에 별도 처리가 되어있지 않는 한

이미지처럼 블로그 전체 폰트가 바뀔꺼에요!

 

 생각처럼 글로 쉽게 풀어 설명하는게 어렵네요..ㅋ_ㅋ

그래도 최대한 쉽게 쓴다고 썼는데....ㅠ_ㅜ

반복적으로 해보면 충분히 이해할 수 있으니 꼭 도전해보세요~

 

* 궁금한 부분이 있으면 댓글 남겨주세요.

포스팅을 통해 최대한 알려드리겠습니다. *

 

 

 

나나코노 티스토리

티스토리 꾸미기, 웹폰트적용,웹폰트

19 Comments
  • BlogIcon 최찌니 2016.02.02 11:15 신고 나나코노님, 혹시 제 블로그 전체 글씨체를 변경하고싶으면 어떻게 적용해야하는지도 알수있나요? ㅠㅠ
  • BlogIcon 최찌니 2016.02.02 12:00 신고 나나코노님 비밀댓글은 왜 안보이죠 ㅜ 티스토리 이 어려운녀석 ㅜ
  • BlogIcon 나나코노 나나코노 2016.02.02 14:07 신고 몰랐는데 비밀댓글로 달면 댓글에 대한 답글인데도 안보이네요.. -0-
    저도 찌니님 댓글보고 테스트 해보니 그러네요
    오늘알았어요 ㅎㅎㅎㅎㅎㅎ

    오류인것도 같고...
    어떤글 보니 비밀글은 운영자와 본인만 볼수 있다 되어있기도 하고
    그러네요... 제가 티스토리에 문의는 했는데 혹시 답변오면 공유드릴께요 ㅎㅎㅎ
  • BlogIcon 최찌니 2016.02.02 14:32 신고 완전친절하세요 ㅜ ㅜ♡ 고맙습니다
  • BlogIcon 나나코노 나나코노 2016.02.02 16:08 신고 만약 웹 폰트 불러오실 꺼면 css상단에
    @charset "UTF-8";
    @import url(http://fonts.googleapis.com/earlyaccess/hanna.css); << 요런식으로 작성해주고

    /* reset */ << 요렇게 되어있는데 보면
    body,th,td,input,select,textarea,button {} << 요렇게 된 곳에 font-family가 있거든요
    거기 바꿔주시면 되요~
    css쪽 아무것도 추가 안하셨으면 12번째 줄 정도에 있을꺼에요.
    사실 요부분만 바꿔주면 폰트가 다 바뀌는데 혹시 안바뀌면

    /* reset */ << 요 부분 바로 위에
    body * {font-family:'hanna'!important;}
    body a {font-family:'hanna'!important;}
    이런식으로 써주시면 되요~

    소스 하단에 별도 처리가 되어있지 않는한 저렇게만 쓰면 다 바뀔꺼에요 ㅋ_ㅋ
    포스팅 하단에 이미지로 올려놧어요~
  • BlogIcon 최찌니 2016.02.02 15:27 신고 나나코노님 덕분에 바꿨는데 이게 제 컴터에서만 보이는건지 다른 분들 컴터에서도 그렇게 보이는건지.. ㅋㅋ 아무튼 제가 보기엔 바뀌어서 너무 좋아요 ㅋㅋ 이제 글씨 크기들 좀 수정해야겠어요 ~~~ 감사해요~~:)
  • BlogIcon 나나코노 나나코노 2016.02.02 15:40 신고 제가 들어가 봤는데 바뀐 폰트로 보여요
    웹폰트 불러온거라 다른 컴퓨터에서도 잘 보일꺼에요.
    (긍대 어제도 폰트 바뀌어 보였어요 바꾸신거 아니셨나요?)

    긍대 폰트 작성시 HY바다M << 한글이 있거나 맑은 고딕 << 이렇게 공백이 있거나 하면 'HY바다M' << 이렇게 감싸서 써주시는게 좋아요.
    안그럼 간혹 익스 버전을 타거나.. 컴퓨터를 타거나 하는 경우도 발생해요~
  • BlogIcon SONYLOVE 2016.02.02 17:59 신고 나나코노님 블로그 볼때마다 너무 예뻐요.
    다음에 바꾸면 저도 이걸로 할까봐요. ㅎㅎㅎ
  • BlogIcon 나나코노 나나코노 2016.02.02 20:40 신고 흐흐 감사해요~
    티스토리에서 새로 나온 반응형 써봤는데 갠춘한거 같아요 ㅋ_ㅋ
  • BlogIcon ME + 4U 2016.02.10 23:02 신고 나나코노 님 블로그 덕분에 어찌어찌 야매(?)로 처음 티스토리를 꾸며봤어요 너무 감사해요 ㅠㅁㅠ
    근데 영 폰트 부분에서 막히네요 ㅠㅠ 본문 제목 설정하는 거 하며... 소스를 하나도 모르니 뭐가 뭔지 몰라서 도움을 청하려고 댓글 답니다
    요것 조것 만져보니
    }

    .titlepost {
    color: #e7e7e7;
    background-color: #ffffff;
    font:10px Trebuchet MS;
    letter-spacing: 0px;
    word-spacing: 0px;
    margin: 20px 1px 40px;
    padding: 0px 3px 0px;
    text-align:center;
    }
    이 부분이 바뀌는 부분인 것 같은데... 끙 ㅠㅠ 티스토리 넘 어렵네요
  • BlogIcon 나나코노 나나코노 2016.02.11 02:04 신고 댓글을 늦게 확인해서 도움을 못드렸네요~ㅜ
    나눔고딕으로 되어있던데 잘 바꾸신 듯 해서 따로 답 안드려도 될꺼 같아요!! 블로그가 굉장히 독특하네요~ 하트 뿅뿅
  • BlogIcon 쭌E 2016.02.11 10:09 신고 전 어제 글씨체 바꾸겠다고 낑낑대다가 그냥 자버렸는데 왜 오늘 바뀐거같죠? 혹시 제 블로그 가서 나눔고딕체로 보이는지 한번만 확인해주심 안될까요?ㅠㅠ 아 그리고 스킨이 바뀔때마다 글씨체가 바뀌는데 이건 왜그런건가요? 티스토리 넘나 어렵네요ㅜ
  • BlogIcon 나나코노 나나코노 2016.02.11 10:59 신고 스킨이 바뀌면 소스가 해당 스킨에 맞춰 전부 바뀌는거기 때문에
    다시 작성해주셔야 되요. 스킨바꾸면 초기화 개념이조~
    지금 스킨은 바꾸시고 아직 폰트 안 불러 오신거 같네요~

    @charset "UTF-8";
    @import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css'); << 요런식으로 상단에 폰트 불러오시고 작성해주고

    /* reset */ << 요렇게 되어있는데 보면
    body,th,td,input,select,textarea,button {} << 요렇게 된 곳에 font-family가 있거든요 거기 바꿔주시면 되요~
    css쪽 아무것도 추가 안하셨으면 12번째 줄 정도에 있을꺼에요.
    사실 요부분만 바꿔주면 폰트가 다 바뀌는데 혹시 안바뀌면

    /* reset */ << 요 부분 바로 위에
    body * {font-family:'Nanum Gothic'!important;}
    body a {font-family:'Nanum Gothic'!important;}
    이런식으로 나눔고딕 써주시면 되요~

    소스 하단에 별도 처리가 되어있지 않는한 저렇게만 쓰면 다 바뀔꺼에요 ㅋ_ㅋ
    포스팅 하단에 이미지로 올려놧어요~
  • BlogIcon 날으는꽃돼지 2016.02.11 22:29 신고 티스토리는 너무나 어려운거 같아요 ㅠㅠ
  • BlogIcon 나나코노 나나코노 2016.02.11 23:23 신고 천천히 따라하다 보면 잘 될꺼에요 ㅜ
  • BlogIcon ROSA0729 2016.02.17 15:51 신고 설명 정말 잘해주세요ㅠㅠ 감사합니다 많이 배우고가요!!!
  • BlogIcon 나나코노 나나코노 2016.02.17 16:43 신고 감사합니다~ 블로그 이쁘게 꾸미세요~*^^*
  • BlogIcon 박에힌 2016.09.09 10:39 신고 덕분에 블로그 스킨 쉽게 변경할 수 있었습니다 ㅠ_ㅠ
    정말 감사합니다!

    그리고, 머릿속으로 정리할 겸
    나나코노님의 설명을 바탕으로 짜집기 포스팅을 했는데 괜찮을는지요?
    확인하시고 댓글로 알려주셔요!
    안된다 하시면 비공개로 돌리겠습니다 ^_^
    그럼 날씨 선선한데 감기 조심하세요.
  • BlogIcon 나나코노 나나코노 2016.09.09 18:12 신고 전혀 상관없어요 더 잘 풀어 설명해주시면 다른분들께는 좋은 정보가 되는건데요!!
댓글쓰기 폼