티스토리 블로그 스킨 분석해보자 - 처음편

티스토리 블로그 스킨 분석해보자 - 처음편

Posted by 씨디맨 Posted in " 유용한_팁/블로그_팁 "   

2009.04.21 14:40

출처 : https://cdmanii.com/833

* 개요

티스토리 스킨에 대해서 분석해보면서 자신의 블로그도 스킨을 수정할 수 있는 기술을 배워보도록 하겠습니다.
그 첫번째 시간으로 스킨을 수정할때 주의해야할 점과, 관리 , 수정하는 방법들을 설명합니다.

[잘못 쓰여진 글이 있거나 기술적으로 문제가 있는부분은 테클을 걸어주시면 감사하겠습니다. 수정을 받아들여 수정하겠습니다]




* 파일설명

티스토리 스킨은 테터툴즈에서 따온것이기 때문에 일정한 규격에 맞추어서 만들어져 있습니다.

skin.html - 뼈 골조가 되는 스킨파일
style.css - 살을 붙여주는 부분




* 스킨수정시 주의할 사항

티스토리 스킨 관리를 보면 Skin.html 과 Sytle.css 를 수정할 수 있습니다.
(티스토리 > 관리자 > 스킨 > HTML/CSS 편집)

보통의 경우 이 편집창을 뛰어놓고 여기에서 직접 내용을 추가하거나 빼거나 할겁니다. 하지만 그 방법보다는
전문 편집툴을 사용하는게 좋습니다.



# 전문편집툴을 이용할때의 장점

1. 코드를 정갈하게 잘 관리할 수 있다.
2. 따로 문서화해 둘 수 있다.
3. 추가 및 삭제를 했을때 정리가 되기때문에 다음에 다시 보더라도 쉽게 내용을 찾을 수 있다.



# 전문 편집툴을  이용한 수정 방법 

1. skin.html 또는 style.css 내용을 모두 복사한다.

2. editplus 등의 전문 편집툴에 붙여넣기 후 편집을 한다.

3. 편집을 한뒤 수정된 내용을 복사를 한다.

4. 수정된 내용을 HTML/CSS 편집의 해당파일에 기존의 내용을 지우고 붙여넣기 한 뒤 저장한다.

* 스킨 수정시 지켜주어야 할 사항 (권장)
1. 그림을 뛰우는 부분은 style.css 에서 지정한다.
2. 태그입력시 대문자를 쓰지 않는다.
3. skin.html 에 따로 style 를 지정하지 않는다. 
4. 치환자를 활용하자.
5. IE(Internet Explorer) 이외에 FF, Crom , Opera 등 에서도 작동을 하도록 가능한 javascript 는 피하자.
6. 주석을 잘 활용하자. 형식: <!-- 주석으로 쓰일 글 --> (뛰어쓰기 유의) 
7. 들여쓰기를 꼭 하자.
8. XHTML 형식을 지켜서 태그를 열면 꼭 닫는다. 예: <strong></strong>, <img src="./image/test.png" border="0" alt="그림" />




#티스토리 블로그 스킨 분석해보자 

- 스킨수정 편에서는 실제 1개의 스킨을 설정하여 내용을 살펴보면서 설명드리도록 하겠습니다. (글작성중)

------------------------------------------------------------------

본인이 사용을 하기 위하여, 원문의 내용을 스크랩 및 내용을 추가 하였습니다.  

원문 작성자의 삭제 요구가 있을 경우, 즉시 삭제 조치를 하겠습니다.

------------------------------------------------------------------

<< Yuotube : Click >>

TiStory blog : https://sosmt.tistory.com

Afreeca TV : http://bj.afreecatv.com/sosmt1004/vods

문제의 소지가 될 수 있는 부분에 대해 

말씀을 주시면 바로 시정하도록 하겠습니다.