Media Log

지난번 포스팅에서 언급한 것처럼 블로깅을 시작하면서 블로그 스킨을 조금씩 고쳐보려는 분들이 많으실텐데요. 저도 이리저리 HTML이나 CSS(스타일 시트) 수정 팁이 나와있는 포스팅을 보면서 스타일 시트 파일을 열어서 고치는데 재미를 느껴 여러번 시도했습니다. 하지만 막상 style.css 안에 담겨진 태그를 보면 도무지 뭐가 뭔지 헷갈릴 많아 수정하는데 어려움이 있었습니다.

우선 이 글을 읽으시는 분 중에 HTML이나 CSS가 생소하신 분들은 용의자님의 블로그를 방문해 보실 것을 추천합니다. 저도 용의자님의 일목요연한 태그 수정 강의를 통해 개념을 확실히 잡을 수 있었습니다.

그럼 일단 어느 정도 태그에 대한 기본지식을 갖추셨다는 가정하에 포스팅을 이어가도록 하겠습니다.

아래는 지금 티스토리 관리자 페이지>스킨>HTML/CSS 수정 메뉴에 들어가서 스타일 시트 파일을 캡쳐한 것입니다.


위 스타일 시트를 좀 더 보기 편하게 아래와 같이 적어봤습니다.

/*컨텐츠 내용 설정*/
.article {
              line-height:180%;
              padding:20px 10px;
              word-break:break-all;
              text-align: justify;
              clear: both;
              margin-top: 4px;
              overflow: hidden;
              width:/*@post-width=*/600px/*@*/;
             
/*@post-body-font-size=font-size:;*/font-size: 12px;/*@*/ /*@post-body-font-              family=font-family:;*/font-family: inherit; /*@*/ /*@post-body-color=color:#000000*/color:#000000/*@*/
               }

우선 이 부분은 블로그 스킨 가운데서 포스팅 내용이 표출되는 본문 안의 속성을 지정해준 부분입니다.

그런데 저는 처음에 빨간색으로 표시된 /*@post-width=*/ /*@*/ 이런 태그들이 뭔지 궁금했습니다. 제가 모르는 어떤 복잡한 명령어라고 생각했지요.

그래서 서점에 가서 스타일시트 교재를 뒤져 보니 /* ~ */ 가 HTML의 <!-- --> 주석 태그처럼 코멘트를 집어 넣는 태그라는 걸 알게 됐습니다.

/* 컨텐츠 내용 설정*/는 스킨에 영향을 주는 것이 아니라 이 부분이 컨텐츠 내용을 설정하기 위한 부분이라는 설명을 달아준 것이죠. 즉 width:/*@post-width=*/600px 경우 본문의 가로 길이를 600px로 지정한다는 의미겠지요. 

그럼 왜 저렇게 복잡한 태그가 만들어지는 걸까. 제 생각에는 <스킨위자드>과 연결이 돼 있기 때문에 본문 길이를 그곳에서 수정하는 과정에서 불필요한 태그가 붙은 것 같습니다.

나모 웹에디터로 HTML 문서를 작성할 때 줄바꿈을 할 때마다 불필요한 <P></P>태그가 생기는 것과 마찬가지인 셈이죠.   

결국 빨간색으로 복잡하게 된 태그들, 즉 /* */ 안에 둘러싸여 있는 내용들은 실질적으로 반영되지 않는 그저 설명에 불과해 지워도 스킨에 아무런 영향도 주지 않습니다.

결국 빨간색 부분을 싹 지워주면,

/*컨텐츠 내용 설정*/
.article {
              line-height:180%;
              padding:20px 10px;
              word-break:break-all;
              text-align: justify;
              clear: both;
              margin-top: 4px;
              overflow: hidden;
                  width:600px;
              font-size: 12px;
             
font-family: inherit;
             
color:#000000
               }

이렇게 되는 것이지요. 이렇게 불필요한 태그를 정리하면 보기 편해 수정하기 쉽습니다. 

물론 고수분들은 이미 다 아시는 내용이지만 독학으로 공부해가는 초보인 저는 저걸 발견하고 얼마나 기뻤는지 모릅니다. ㅠㅠ 마치 수학의 정석에서 안풀리는 미분 문제의 해답을 답지 보지 않고 맞춘 기분이랄까요;

한가지 더!
W3C CSS 검증 서비스 를 통해 불필요한 태그 및 문법 오류를 체크하세요.

세가지 옵션이 있는데 저는 직접 입력을 통해 style.css를 통째로 복사해 넣은 뒤 하단에 검사 버튼을 눌러봤습니다. 

그랬더니  아래 처럼 오류와 수정된 문법이 나옵니다.


이 사이트를 이용하면 쉽게 오류를 찾을 수 있어 불필요한 태그를 지울 수 있고 나아가 스타일시트를 독학하는데도 도움이 될 것 같네요. 

혹시 제 설명이 이해가 안가시는 분들은 댓글로 질문 남겨주세요~ ^_^; 저도 초보지만 제가 아는 선에서 답변을 달아드릴게요.

  1. 윤뽀 at 2010.07.01 22:18 신고 [edit/del]

    html 소스 관련해서 능력자가 또 한분 계시네요 ^^;;

    Reply
    • 까만달팽이 at 2010.07.01 22:23 신고 [edit/del]

      능력자 아니에요! 그저 여러 블로거 고수님들을 통해 열심히 공부하고 있는 독학생일 뿐입니다. 방문해주셔서 감사해용. : ) 총알 답방이네요 ㅋㅋ

  2. 두두맨 at 2010.07.06 15:02 [edit/del]

    블로그가 참 이쁩니다. ^^

    Reply
  3. 두두맨 at 2010.07.06 15:02 [edit/del]

    블로그가 참 이쁩니다. ^^

    Reply
  4. Kata Pro at 2010.07.27 23:59 [edit/del]

    좋은 정보 감사합니다. 재미있게 읽고 엮인글(트랙백)을 추가하였습니다.(맞트랙백도 환영합니다.)
    W3C CSS 검증 서비스는 저도 나중에 한번 들어가 봐야 겠군요.
    행복한 하루 되세요.

    Reply
  5. Lindsey at 2010.09.23 00:59 [edit/del]

    구글링 하다 들렸는데..
    저렇게 주석처리된 부분은 브라우저마다 CSS 표준을 제대로 지원 안하는 경우가 있기 때문에...
    최대한 crossbrowser 지원하기 위해 사용한 Hack 같아 보이네요..
    아마 특정 브라우저에서는 스킨에 영향을 줄꺼에요..^^;
    크롬, 사파리, 오페라, 버전별로 한번 체크해보세요~
    CSS hack으로 검색하시면 대강 나올듯...^^

    Reply

submit

티스토리를 만들고 스킨을 구경하다보면 마음에 딱 드는 스킨이 잘 찾아지지 않습니다. 전체적인 구성이 마음에 들면 폰트의 크기나 색깔이 마음에 안들고 혹은 그 반대인 경우가 많더군요.

물론 블로깅에서 가장 중요한 건 겉모습(스킨)보다 알맹이(컨텐츠)겠지만 독자들이 원하는 컨텐츠를 보다 쉽고 빠르게 찾을 수 있도록 스킨을 만드는 것도 중요하다는 생각이 듭니다.

블로그 일지를 통해 직접 스킨을 수정하는 과정에서 얻은 팁을 공유하고자 합니다.

일단 저는 티스토리 스킨 2단형 4페이지에 있는 Simple White Daisy를 선택했습니다.

누구야 님의 블로그(티스토리, 텍스트큐브 등) 카테고리 트리 메뉴 구조 항상 펼침 상태 만들기
  글을 참고해 카테고리 하위 메뉴가 항상 펼쳐지도록 수정했습니다.

기본형 스킨은 아래 그림과 같습니다.


요리에 관한 내용을 주로 올리기로 했기 때문에 요리와 관련이 없는 다른 주제의 포스팅은 <사는 이야기> 카테고리 안에 분류했습니다. <사는 이야기> 메뉴에는 블로그 일지, 책, 음악, 고함, 탐험, 사진으로 총 6개의 하위 분류가 있는데요. 자바스크립트를 이용해 블로그에 접속했을 때 하위메뉴까지 아예 다 펼쳐 보이도록 수정했습니다. 누구야님이 제시한 방법 중 두번째 방법입니다.  

   <script language="JavaScript">try { expandTree(); } catch(e) { }</script>

관리자 페이지에서 스킨 > HTML/CSS 편집 > Skin.html 파일에서 Ctrl+F 를 눌러 Category로 검색한 뒤 아래 처럼 위의 자바스크립트를 삽입하면 되는데 삽입하는 위치는 어디든 상관없지만 사이드바 카테고리 태그가 있는 부분에 껴 넣어주었습니다.

<div class="td_info" id="block2" style="display:block;">
<div>[##_category_##]</div>
<script language="JavaScript">try { expandTree(); } catch(e) { }</script>
</div>

그럼 아래처럼 블로그 접속시에 모든 메뉴가 펼쳐 보이게 됩니다.


이렇게 하면 방문자가 모든 메뉴를 한번에 확인할 수 있기 때문에 불필요한 클릭을 하지 않아도 됩니다.

submit