저의 블로그에서 여러분이 입력하는 것이 무엇이 있나고 묻겠습니다. 그러면 여러분은 아마  댓글쓰기,검색하기,방명록에 글쓰기가 있다고 말할 것 같습니다. 이때 폰트는 나눔고딕으로 폰트의 크기는 크게 해 보겠습니다.  많은 분들이 저의 블로그에 댓글 입력시 글자가 커서 좋다고 하는데 그것에 대해 다루어 보고자 합니다. 간단히 여기서 말할 것 중에 하나만 말하면 간단히 아래 그림과 같이 댓글쓰기시 글자가 나눔고딕이 나오게 하고 크기를 크게 하는 것입니다. 참고로 저의 블로그의 댓글쓰기와 댓글 목록 크기의 폰트와 크기는 나눔고딕이고 폰트 크기는 15px입니다.

들어가기 전에 여러분이 아셔야 할 것은 환경은 이해해야 하는데 먼저 나눔고딕이 상대방의 컴퓨터에 있어야 나눔고딕으로 나옵니다.그리고 이것은 
http://min-blog.tistory.com/400 가 연결된 것인데 http://min-blog.tistory.com/400 에서는 블로그 전체를 나눔고딕으로 해 보는 것에 대한 설명이니 그 링크를 안 보고 나눔고딕 어쩌구 저쩌구 불평하지 마세요. 참고로  저의 시스템을 말하자면  나눔고딕이 설치된 윈도우 7 운영체제에 브라우저는 크롬 10으로 테스트 했습니다. 파이어폭스나 익스플로러 등에도 아무 이상이 없을 것입니다. 

수정해야 할 곳

 스킨의 다른 곳이 아닌 skin.html 부분 즉 스킨의 HTML 태그는  전혀 손대지 않고 블로그 디자인을 결정하는 style.css만 손댈 것인데 skin.html을 손대고 스킨을 저장안하고 편집한 후 블로그가 엉망이 되면 저한테 욕하지 마시고 자신에게 욕하세요. 스킨 메뉴에서 스킨 선택은 선택한 후 페이지가 나오면 아래 그림에서 나온 스킨 저장 버튼을 클릭하여 스킨을 먼저 저장한 후 스킨을 편집해야 나중에 블로그가 엉망이 되면 저장한 것이 있기 때문에 전으로 되돌릴 수 있습니다. 참고로 저는 스킨 이름을 날짜와 연관해서 짓는데 오늘이 2월 3일이니 23이라고 합니다. 


스킨을 저장했으면 HTML 태그를 어느 정도 아는 저는 댓글 입력과 방명록 입력은 HTML 태그에서 textarea이고 검색시 입력하는 대한 태그는 input이라는 것을 생각하여 style.css에서 이 부분을 수정하면 되겠다고 생각했습니다. 아마 제가 예로 든 스킨만 아니라 모든 스킨에서 입력하는 것은 input과 textarea일 것입니다.

수정하기 

 스킨 메뉴에서 HTML/CSS 설정은 눌러 페이지가 나오면 Ctrl과 F를 동시에 눌러(Ctrl+F) input, textarea라는 단어를 입력하는데 ,과 textarea는 사이 간격은 한칸이니 유의바랍니다. 텍스트를 찾는 것 외에  style.css에서 textarea 부분을 찾으시면 되고 찾으면 아래 그림에 아래와 같이 됐을 것입니다. 아래 그림에서 빨간박스를 보면 댓글과 방명록 입력하는 곳의 폰트를 전에 나눔고딕으로 했고 나눔고딕을 영어로 하면 NanumGothic이니 혼동하시지 마시고  폰트 크기는 1em 이라고 나왔는데 저는 em 단위에 대해 모릅니다. 참고로 pt.px,em 등의 단위의 차이점을 여러분에게 설명할 만큼 모르겠는데  기회가 된다면 이것에 대해 설명할까 합니다.


위 그림에서 댓글/방명록/검색 입력시 1em 됐는데 폰트의 크기를 크게 하기 위해 16px를 입력하면 아래 그림과 같이 되는데 그러면 댓글/방명록 입력과 검색시 큰 폰트크기가 나옵니다. 폰트는 왜 변화시키지 않는냐는 질문에 폰트 설정은 나눔고딕으로 됐다고 말하고 싶습니다.


위는 댓글을 쓸 적이고 이번에는 댓글을 쓴 후 리스트의 상태에 관해서 말씀드리겠습니다. 댓글 리스트와 관련된 것은 .comment ol li라는 것을 알고 아래 그림처럼 폰트의 크기를 16px로 해서 크게 했습니다.


제가 블로그에 하지도 않고 한 것 같지만 결과를 확인할 수 있는 http://study3.tistory.com/ 에서 확인하시기 바랍니다.그리고 확실한 확인을 위해 댓글/방명록을 써 보시고 블로그에서도 검색해 보시기 바랍니다. 댓글이나 방명록 쓰실 때 111이라는 말도 안 되는 말은 쓰시지 마시고 '안녕하세요.' 등의  말 같은 말을 쓰시기 바랍니다. 글을 쓰실 때 폰트가 나눔고딕이라는 확실히 알기 위해서 영어나 숫자보다 한글이 좋습니다. 참고로 저는 111,dfdd 등과 같은 단어를 싫어합니다.

저의 블로그의 내용 부분은 폰트와 크기는 나눔고딕/14px, 댓글/방명록 입력 폰트와 크기는 나눔고딕/15px, 검색시 입력 단어의 폰트와 크기는 나눔고딕/15px, 댓글 목록의 폰트와 크기는 나눔고딕/15px입니다. 혹시 나눔폰트가 아니라도 설정에서 나눔고딕이 없으면 맑은 고딕으로 나오게 했는데 없으면 나눔고딕으로 나오지 않습니다. 아마 나눔고딕처럼 보이는 것은 맑은 고딕인데 나눔고딕과 맑은 고딕이 비슷하거든요.

'블로그' 관련된 글

  1. 이전 댓글 더보기
  2. BlogIcon 티비의 세상구경 2011.02.03 09:50 신고  댓글주소  수정/삭제  댓글쓰기

    나눔고딕도 계속 보니..
    깔끔하고 너무 좋아보이는데요 ^^;
    즐거운 설연휴 보내세요 !

  3. BlogIcon 맥컬리™ 2011.02.03 10:09 신고  댓글주소  수정/삭제  댓글쓰기

    아흠... 이 글씨체 너무 탐나는데, 근래 최고로 갈등되는 부분입니다.
    주변 지인분들이 익스6 사용하시는 분들이 많은데, 화면이 겹쳐서 나오더라구요.
    음.. 그건 맑은고딕이던가요~
    음.... 현재 제가 익스7을 사용하는데, 요거 설치해도 괜찮겠죠?
     
    항상 유용한 정보 잘 보고 있구요, 맛있게 배우고 있슴다.. 고맙습니다..
    남은 설연휴도 즐겁게 보내시길 바래요.. ^^'

    • BlogIcon 맥컬리™ 2011.02.03 22:16 신고  댓글주소  수정/삭제

      나눔고딕 설치하기로 결정했습니다.. ^^;
      수정 중인데 머리에 쥐나요~~;;

    • BlogIcon . 백전백승 2011.02.03 22:42 신고  댓글주소  수정/삭제

      글꼴을 가독성있게 하는 클리어타입에 대해 조사해 보았는데 클리어타입은 윈도우 XP 부터 적용되는 것 같은데 자세한 설명은 내일 보실 수 있고 글꼴이 겹쳐 보이는 것은 맑은 고딕과 아무 상관없는 것 같습니다. 저는 윈도우 2000,익스플로러6 등을 전혀 신경을 안씁니다. 그러면 머리가 아파오거든요.

    • BlogIcon 맥컬리™ 2011.02.04 11:20 신고  댓글주소  수정/삭제

      댓글 리스트에서 보여지는 글씨들~ 줄간격은 어디서 바꾸면되나요?

  4. BlogIcon HS다비드 2011.02.03 10:35 신고  댓글주소  수정/삭제  댓글쓰기

    아앗. 그러고보니 저도 이전에 댓글 폰트 수정하기로 했는데...

    지금보니까 아직도 안해놓고 있었네요^^

    구정이 끝나면 빨리 가독성 좋은 걸로 수정해놔야 겠습니다^^

    • BlogIcon . 백전백승 2011.02.03 22:44 신고  댓글주소  수정/삭제

      그때지나면 생각해 보세요. HS 다비드님의 사용하는 스킨의 글꼴 수정에 대해서 적으려고 했는데 글꼴에 대한 글이 많아 귀찮아서요.

  5. BlogIcon 체리보이 2011.02.03 12:37 신고  댓글주소  수정/삭제  댓글쓰기

    글자가 큼지막해야 보기도 좋고 잘 읽히는 것 같아요

  6. BlogIcon 심플게임 2011.02.03 13:29 신고  댓글주소  수정/삭제  댓글쓰기

    아침에 떡국은 맛있게 드셨는지요?
    좋은 팁 감사드립니다.
    이글 읽고 바로 댓글 작성창에 글씨 키워놨어요.

  7. BlogIcon mistyblue 2011.02.03 14:19 신고  댓글주소  수정/삭제  댓글쓰기

    앗...이런 팁이 있었군요. 좋은 정보 감사합니다.
    새해 복 많이 받으세요..~

  8. BlogIcon 레이니아 2011.02.03 14:19 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요... 잘 나오네요^^;
    댓글 폰트도 수정을 해줘야겠다는 생각이 들었습니다.
    가독성을 고려해야죠~:)

    아, 그리고 새해 복 많이 받으세요!

  9. BlogIcon Shain 2011.02.03 15:42 신고  댓글주소  수정/삭제  댓글쓰기

    전에도 한번 적었지만... 어떻게든 가독성 높이는 쪽으로 스킨을 수정하거나
    새로 만들고 싶은데 귀찮은 마음만 굴뚝같습니다..
    일단 댓글 폰트라도 좀 늘여놔야겠어요
    올해도 좋은 일 많이 생기시고
    새해 복 많이 받으세요 ^^

  10. BlogIcon 버섯공주 2011.02.03 20:10 신고  댓글주소  수정/삭제  댓글쓰기

    캬! 너무 유용한 팁을... +_+ 할 게 너무 많아요.

  11. BlogIcon 아이S'티 2011.02.03 20:34 신고  댓글주소  수정/삭제  댓글쓰기

    항상풍부한 지식을 가지고 가니까 정말 좋아요 ㅎ

  12. BlogIcon rimo 2011.02.03 21:15  댓글주소  수정/삭제  댓글쓰기

    백전백승님 댓글 볼때마다 시원시원해서 좋다고 생각했는데, 댓글도 바꿀수 있었네요^^
    이번에도 좋은 정보 알아갑니다^^

    즐거운 연휴 보내세요~^^

  13. BlogIcon 저수지 2011.02.04 00:01 신고  댓글주소  수정/삭제  댓글쓰기

    안그래도 댓글 입력란 글씨크기 크게하고 싶었는데,
    백전백승 님 글 덕분에 수월하게 했습니다.
    고맙습니다.

    새해 소원성취 하시고
    복 많이 받으십시오.

  14. BlogIcon 참좋다 2011.02.04 00:43  댓글주소  수정/삭제  댓글쓰기

    확실히 글씨 크기가 크면 보는 사람들은 편한것 같아요. 백전백승님 댓글 창은 왜 크지? 했는데 그렇게 하는거군요. 전 네이버 블로거라서 적용하기 어렵겠지만 유용한 정보네요. 흠~!!

  15. BlogIcon 뻘쭘곰 2011.02.04 04:31 신고  댓글주소  수정/삭제  댓글쓰기

    아... 이런 방법도 있군요..!!
    저도 나중에 활용해봐야겠습니다..!!
    좋은 정보 감사드립니다~!

    늘 건강하시고 새해 복 많이 받으세요~!^^

  16. BlogIcon 설보라 2011.02.04 16:19 신고  댓글주소  수정/삭제  댓글쓰기

    저도 댓글창에 바이러스 위험때문에 아이콘을 삭제를 했더니
    가독성이 너무 안 좋아서 구분이 안되네요!
    필명하고 글의 색이 똑 같고 크기가 같아서인지..
    바꾸고 싶어도 어디로 어떻게 해야될지 모르겠어요~?
    궁금합니다.??
    초보블로그들을 위해서 힘쓰시는데, 올해도 좋은 글 많이 부탁드리고
    하시는 일도 다 잘 되시길 기원해요~^^

    • BlogIcon . 백전백승 2011.02.04 16:29 신고  댓글주소  수정/삭제

      저의 스킨에서 말하겠습니다. 코멘트의 댓글 이름이니 대부분 comment와 name이 들어갔을 것입니다. 저도 이번에 댓글 이름을 굵게 했는데 굵게하는 것이 font-weight이거든요. 색을 다르게 하는 것은 아마 color일 것입니다.

      아래는 저의 스킨에서 입니다.

      .commentList ol li .name{
      margin-bottom:5px;
      color:#2290ff;
      font:16px NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", AppleGothic,Gulim, 굴림;
      font-weight:bold;
      }

    • BlogIcon . 백전백승 2011.02.05 00:07 신고  댓글주소  수정/삭제

      아까 설보라님 스킨에서 적용해 보았는데 Ctrl+F로 .comment .name a을 찾은 후 color:#ccc;를 color: #FFD228;font-weight:bold;font-size:14px;으로 하면 되네요.

      시험한 것은 http://gallery1.tistory.com/entry/%EB%B3%B8%EB%AC%B8%EC%97%90-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-%EC%B6%95%EC%86%8C 를 보시고 익었다는 답변 주세요.

    • BlogIcon 설보라 2011.02.05 02:11 신고  댓글주소  수정/삭제

      제가 글을 좀 늦게 봐서 지금 했어요! 그대로 하니
      좀 두껍고 글자가 커서 12px로 했어요!
      너무 좋네요 이제 표시가 나서 눈에 띄어 보기 좋아요!
      수고하셨어요! 항상 감사드려요!!^^*
      좋은 밤 되세요!

  17. BlogIcon 레종 Raison. 2011.02.05 16:18 신고  댓글주소  수정/삭제  댓글쓰기

    16포인트이상 써야지 가독성이 좋군요...
    늦었지만 새해 복 많이 받으세요...

  18. BlogIcon 최재선 2011.08.20 14:31 신고  댓글주소  수정/삭제  댓글쓰기

    티에디션 제목부분에 나눔고딕 적용하려면 어떤 포스팅을 봐야 도움이 될까요?

    • BlogIcon . 백전백승 2011.08.20 14:51 신고  댓글주소  수정/삭제

      티에디션에 제목 부분에 나눔고딕이 나오게 한 것은 여기에도 없고 다른 블로그에도 설명된 것을 본 적이 없습니다. 이것은 어려워서 제가 설명을 하지 않았습니다. 인라인스타일시트에 대해 알아야 하고 티에디션에 제목 설정 부분의 코드로 알아야 되니 설명하지 않았습니다. 저는 어려운 것을 설명하지 않습니다. 저에게 적는 것이 고생이거든요.

      ps.저의 블로그에서 한 것 처럼 모든 것을 나눔고딕으로 하는 것은 어렵습니다.

  19. BlogIcon 최재선 2011.08.20 16:45 신고  댓글주소  수정/삭제  댓글쓰기

    답변감사합니다. ㅎㅎㅎ 실은 그것때매 검색하다가 이렇게 좋은 블로그를 방문할수 있게 되었답니다. ㅎㅎㅎㅎ

    솔직히 티에디션 제목부분을 그냥 이미지로 대체할까 했는데 대체해도 상관은 없지만 그래도 궁금한건 해결해봐야 겠기에 이렇게 질문드렸었습니다. ㅎㅎㅎ

    같이 검색해보시다가 나중에라도 찾게되면 알려주실수는 있죠?

    • BlogIcon . 백전백승 2011.08.20 17:13 신고  댓글주소  수정/삭제

      간단히만 말하면 티에디션 코드에서 타이틀은 <span class="tt-item-title-inner" style="font-family:나눔고딕,맑은 고딕"> 했습니다.

      제목 하나만 <a href="[#*#_article_rep_link[0]_#*#]" style="font-family:나눔고딕,맑은 고딕"> 했습니다. 아마 머리가 아플 것입니다. #*#는 ## 입니다. 중간에 무엇을 삽입하지 않으면 읽어서 ## 사이에 * 을 삽입한 것입니다.

  20. BlogIcon 최재선 2011.08.21 18:54 신고  댓글주소  수정/삭제  댓글쓰기

    헐 됩니다. 감사합니다. ㅠ_ㅠ;
    잘 됩니다. 감사합니다. 에고~ 즐거운 주말 되세요~

  21. BlogIcon 비밀병기 2012.02.03 18:17 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 포스트 감사합니다. 저도 보고 댓글 크기만 좀 늘려보려고 했는데요.

    .comment ol li { padding: 10px 5px 10px 0; border-bottom: 1px dotted #ccc; }
    { font: 14px; }

    등으로 입력을 해봐도 그대로이네요. ;; 폰트가 꼭 들어가야 하나요?