페이지

2010년 1월 4일 월요일

텍큐닷컴 블로그의 가독성을 높였습니다.

 저는 글자크기 12로 글을 씁니다. 그러나 이렇게 글자크기를 키우면, 줄이 상하로 너무 다닥다닥 붙어있어서 읽기 불편한것 같더군요.

 그래서 그동안 줄간격을 늘려서 여유를 줄 방법이 없을까 생각했습니다. 오늘 방법을 알아낸것 같습니다.

블로그 관리하기->꾸미기->스킨편집으로 갑니다.
style.css 파일을 수정합니다. 맨 처음부분에 이런내용이 나옵니다.

 @charset "utf-8";

* {

  padding: 0;

  margin: 0;

  border: 0;

  line-height: 1.6em;(추가한 줄)

}

 
 이렇게 " line-height: 1.6em; " 라는 줄을 처음부분에 추가하면 블로그의 모든 줄간격이 글자크기의 1.6배로 맞춰지게 됩니다. 2.0이면 2배로 맞춰지는 식입니다.

 바뀌기전과 후를 비교해볼까요?
  줄간격을 주기전의 포스트 입니다. 너무 글자들이 위아래로  붙어있죠.

 줄간격 1.6em을 주면 이렇게 여유를 가지고 글자들이 배치됩니다. 읽기 쉽겠죠. 이렇게 수정한 줄간격은 전에 올린 포스트 모두에 적용됩니다.

그러나. 중대한 문제가 하나 있습니다.


 수정한 다음에는 블로그 제목과 메뉴바의 글자들이 위로 솟구쳐서 찰싹 붙어버립니다!


 그럼 이방법은 못쓰는거 아니냐! 고 생각하실지 모르겠습니다. 처음에는 저도 이문제 때문에 블로그 줄간격 조정하지 말고 그냥 되는대로 살까 생각했습니다.

 하지만 해결방법이 있습니다. 저렇게 제목이 위로 찰싹 붙었다면, 공간을 주어서 떼어내어 다시 중간쯤에 맞춰주면 되는거 아니겠습니까?

  일단 블로그 메뉴바의 글자들부터 상하중간을 맞춰볼까요?
  브라우저에서 컨트롤+F를 누르면 찾기창이 뜹니다. " .menu .inner " 찾아보세요.
style.css파일의 마지막쯤에서 이런 내용이 있습니다.

 .menu .inner { padding-top:5px; padding-bottom:0; padding-left:20px; padding-right:20px; }



 이게 메뉴바 글자위치를 설정해주는 줄입니다. 처음에는 "padding-top:0;" 라고 되어있을 겁니다. 이 옵션을 " padding-top:5px" 라고 수정하면 위에서 부터 5px 거리만큼 글자를 띄어 주게 됩니다. 자신의 블로그 메뉴바의 두께에 따라 띄우는 거리를 조정해서 가운데로 맞춰주세요.

 다음으로 제목을 가운데로 옮겨봅시다.
역시 컨트롤+F를 누르고 이번에는 " .header .inner " 를 찾아보세요.

 .header .inner { padding-top:75px; padding-left:0px; padding-right:0px; }


 
처음에 찾으면 " padding-top:75px; "라는 내용이 없을겁니다. 이 내용을 추가해주면 위에서부터 제목글을 75px 만큼 거리를 띄어 줍니다. 이것도 블로그 제목그림의 상하두께에 맞춰서 거리를 조절하세요. 제목이 상하기준으로 가운데 쯤에 오도록 맞춰주세요.

 그럼 모두 적용한후에 확인을 해봅시다.

 제목과 메뉴바 글자 모두 가운데에 왔습니다. 이제 완벽하게 완료 됐습니다!

 이렇게 하면 텍스트큐브 닷컴 블로그 글을 쓸때, 줄간격 조정을 못한다는 문제가 해결 됩니다. 텍큐닷컴을 쓰시는 분중에 줄간격을 변경해서 가독성을 높이고 싶으신분들은 참고하세요.

 다만 제가 쓰는 스킨에서만 해봣기 때문에 스킨종류에 따라 다른점이 있을수도 있습니다. 거의 비슷할거라 생각합니다만.....

그럼이만.

댓글 15개:

  1. 삽군난무붑샤님께서 Popeye님이 비운 자리를 이제 채우시겠군요.. ^^

    잘 부탁드립니다. 그리고 줄간격 팁! 아주 좋았습니다.

    많은 도움이 되었구요.. ^^



    고맙습니다. 삽군난무붑샤님.. (_ _)

    답글삭제
  2. @그별 - 2010/01/05 17:18
    ^_^ 칭찬 감사합니다.

    답글삭제
  3. 눈물이 찡할만큼 엄청난 수고와 노력에 박수를 보냅니다.

    엄청나군요.

    답글삭제
  4. @이정일 - 2010/01/06 18:07
    반갑습니다^^; 텍큐닷컴 사용자분들이 알아두면 좋을것 같아서 트랙백 걸었어요.

    답글삭제
  5. @평화청년 - 2010/01/05 18:19
    ^^; 고맙습니다. 사실 별로 복잡한건 아닌데, 간단하고 확실한 방법을 알아내기까지 시행착오가 좀 있더군요.

    답글삭제
  6. 안녕하세요 간만에 또 들립니다.

    위와 같이 해도 좋으나 팁을 조금더 알려드리면...

    본문의 시작과 끝은

    <div class="article">본문</div>

    이렇게 됩니다.

    여기서 article 에 위와 같이 " line-height: 1.6em; " 를 추가 하시면 되는데

    style.css에서 article 을 찾으면...



    /* Article Basic Style */

    .article { padding:10px 0 20px 0;}

    .article p { }

    .article a:link { color:#f60; text-decoration:none;}

    .article a:visited { color:#f60; text-decoration:none;}

    .article a:hover { color:#f30; text-decoration:underline;}

    .article a:active { color:#f60; text-decoration:none;}



    ........................ 생략



    위와 같이 나옵니다. 그리고,

    .article { padding:10px 0 20px 0;}

    여기에 추가하시면 됩니다.

    .article { padding:10px 0 20px 0;line-height: 1.6em;}

    이런식으로 하면 본문에만 적용됩니다.

    즐건하루되세요...^^

    답글삭제
  7. 비밀 댓글 입니다.

    답글삭제
  8. 이런 방법이 있었군요. 잘 보고 갑니다.

    답글삭제
  9. trackback from: 텍스트 큐브 줄 간격 조정으로 가독성 높이기
    드디어 블로그 꾸미기는 어느정도 완성된 듯 합니다. 어제부터 정말 처음보는 이 이상한 용어들을 가지고 씨름하고 있었네요. 좀 전에 포스트 내용부분의 줄 간격을 조정하느라 애를 먹었는데, 혹시라도 도움 받으실 수도 있는 분들이 있을 것 같아서 한 번 포스팅 해봅니다. # [블로그 관리] -> [스킨 편집] 간단하게 설명해 드리도록 하겠습니다. 블로그 관리 메뉴에서 스킨 편집으로 들어간 다음 여기 style.css 에서 아랫쪽으로 스크롤을 얼마 내리지..

    답글삭제
  10. @Soodaa - 2010/01/09 01:04
    어서오세요~! 음호호호.

    답글삭제
  11. @아이구 - 2010/01/10 12:47
    ^^; 멋적 부끄 히죽 뒹굴~ 반갑습니다.

    답글삭제
  12. @뮤즐 - 2010/01/08 09:58
    좋은 정보 감사합니다.

    저도 그쯤이 본문영역이 아닐까 짐작만 하고 확신을 못해서 이방법을 썼거든요. 왠지 제블로그는 본문 줄간격 설정이 잘안먹히는것 같은 느낌도 들고요. 문단과 문단사이는 띄워지는데 어째 문단내에서는 줄이 잘 안띄워지더라고요.

    답글삭제
  13. trackback from: Daum 블로그, 스타일을 깨우다. (베타테스터 신청 완료)
    티스토리 인수에 이어 블로그 개편을 위한 다음의 새로운 도전이 시작되나 보다. 이벤트 페이지를 보니 블로그 디자인이 깔끔해보인다. 호기심에 베타테스터 신청해 보았다. 과연... 당첨될까? 그나저나, 네이버는 블로그와 모바일쪽에 더딘 행보를 보이는 것 같다. 나중에 물량공세(핵심인력 스카웃, M&A 등)로 밀어부치지 않을까 싶다. 최근 네이트의 성장 등 2010년 포털 3강의 변화가 기대된다. 바로가기

    답글삭제