<티스토리 스킨 수정 Tip> 스타일 시트의 불필요한 태그 지우기
2010. 6. 29. 17:07 |
옛 블로그 글 자료
지난번 포스팅에서 언급한 것처럼 블로깅을 시작하면서 블로그 스킨을 조금씩 고쳐보려는 분들이 많으실텐데요. 저도 이리저리 HTML이나 CSS(스타일 시트) 수정 팁이 나와있는 포스팅을 보면서 스타일 시트 파일을 열어서 고치는데 재미를 느껴 여러번 시도했습니다. 하지만 막상 style.css 안에 담겨진 태그를 보면 도무지 뭐가 뭔지 헷갈릴 많아 수정하는데 어려움이 있었습니다.
우선 이 글을 읽으시는 분 중에 HTML이나 CSS가 생소하신 분들은 용의자님의 블로그를 방문해 보실 것을 추천합니다. 저도 용의자님의 일목요연한 태그 수정 강의를 통해 개념을 확실히 잡을 수 있었습니다.
그럼 일단 어느 정도 태그에 대한 기본지식을 갖추셨다는 가정하에 포스팅을 이어가도록 하겠습니다.
아래는 지금 티스토리 관리자 페이지>스킨>HTML/CSS 수정 메뉴에 들어가서 스타일 시트 파일을 캡쳐한 것입니다.
위 스타일 시트를 좀 더 보기 편하게 아래와 같이 적어봤습니다.
우선 이 부분은 블로그 스킨 가운데서 포스팅 내용이 표출되는 본문 안의 속성을 지정해준 부분입니다.
그런데 저는 처음에 빨간색으로 표시된 /*@post-width=*/ /*@*/ 이런 태그들이 뭔지 궁금했습니다. 제가 모르는 어떤 복잡한 명령어라고 생각했지요.
그래서 서점에 가서 스타일시트 교재를 뒤져 보니 /* ~ */ 가 HTML의 <!-- --> 주석 태그처럼 코멘트를 집어 넣는 태그라는 걸 알게 됐습니다.
/* 컨텐츠 내용 설정*/는 스킨에 영향을 주는 것이 아니라 이 부분이 컨텐츠 내용을 설정하기 위한 부분이라는 설명을 달아준 것이죠. 즉 width:/*@post-width=*/600px 경우 본문의 가로 길이를 600px로 지정한다는 의미겠지요.
그럼 왜 저렇게 복잡한 태그가 만들어지는 걸까. 제 생각에는 <스킨위자드>과 연결이 돼 있기 때문에 본문 길이를 그곳에서 수정하는 과정에서 불필요한 태그가 붙은 것 같습니다.
나모 웹에디터로 HTML 문서를 작성할 때 줄바꿈을 할 때마다 불필요한 <P></P>태그가 생기는 것과 마찬가지인 셈이죠.
결국 빨간색으로 복잡하게 된 태그들, 즉 /* */ 안에 둘러싸여 있는 내용들은 실질적으로 반영되지 않는 그저 설명에 불과해 지워도 스킨에 아무런 영향도 주지 않습니다.
결국 빨간색 부분을 싹 지워주면,
이렇게 되는 것이지요. 이렇게 불필요한 태그를 정리하면 보기 편해 수정하기 쉽습니다.
물론 고수분들은 이미 다 아시는 내용이지만 독학으로 공부해가는 초보인 저는 저걸 발견하고 얼마나 기뻤는지 모릅니다. ㅠㅠ 마치 수학의 정석에서 안풀리는 미분 문제의 해답을 답지 보지 않고 맞춘 기분이랄까요;
한가지 더!
W3C 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/*@*/
}
.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
}
.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를 통째로 복사해 넣은 뒤 하단에 검사 버튼을 눌러봤습니다.
그랬더니 아래 처럼 오류와 수정된 문법이 나옵니다.
이 사이트를 이용하면 쉽게 오류를 찾을 수 있어 불필요한 태그를 지울 수 있고 나아가 스타일시트를 독학하는데도 도움이 될 것 같네요.
혹시 제 설명이 이해가 안가시는 분들은 댓글로 질문 남겨주세요~ ^_^; 저도 초보지만 제가 아는 선에서 답변을 달아드릴게요.
'옛 블로그 글 자료' 카테고리의 다른 글
| 직접 만든 크램차우더 “완전 맛있다!” (4) | 2010.07.03 |
|---|---|
| 삶을 포기하고 싶은 그대들에게 하고 싶은 말 (3) | 2010.07.01 |
| <티스토리 스킨 수정 Tip> 스타일 시트의 불필요한 태그 지우기 (9) | 2010.06.29 |
| <티스토리 스킨 수정 Tip> 카테고리 트리 메뉴 항상 펼침 (0) | 2010.06.28 |
| 오래된 바게트로 만든 ‘프렌치 토스트와 베이컨’ (0) | 2010.06.27 |
| 깔끔한 동남아 음식 전문점 ‘오리엔탈 스푼’ (0) | 2010.06.27 |
html 소스 관련해서 능력자가 또 한분 계시네요 ^^;;
Reply능력자 아니에요! 그저 여러 블로거 고수님들을 통해 열심히 공부하고 있는 독학생일 뿐입니다. 방문해주셔서 감사해용. : ) 총알 답방이네요 ㅋㅋ
블로그가 참 이쁩니다. ^^
Reply감사합니다..두두맨 님 블로그 내용 재미있어요. 자주 놀러갈게요^^
블로그가 참 이쁩니다. ^^
Reply좋은 정보 감사합니다. 재미있게 읽고 엮인글(트랙백)을 추가하였습니다.(맞트랙백도 환영합니다.)
ReplyW3C CSS 검증 서비스는 저도 나중에 한번 들어가 봐야 겠군요.
행복한 하루 되세요.
앗 감사합니다..좋은 정보가 되었다니 다행이군요. ^^
구글링 하다 들렸는데..
Reply저렇게 주석처리된 부분은 브라우저마다 CSS 표준을 제대로 지원 안하는 경우가 있기 때문에...
최대한 crossbrowser 지원하기 위해 사용한 Hack 같아 보이네요..
아마 특정 브라우저에서는 스킨에 영향을 줄꺼에요..^^;
크롬, 사파리, 오페라, 버전별로 한번 체크해보세요~
CSS hack으로 검색하시면 대강 나올듯...^^
댓글 감사합니다~~^^