티스토리 스킨 수정 - 블로그 디자인 수정과 스킨 편집 (완전 초보용) > 웹제작/운영

티스토리 스킨 수정

블로그 디자인 수정과 스킨 편집

대부분의 블로그는 디자인 수정에 한계가 크다. 대표적인 것이 네이버 블로그 같은 것이다. 

반면 티스토리나 워드프레스는 좀 더 폭넓게 스킨 수정이 가능하다. 이 글에서는 티스토리의 스킨 편집 방법의 기본을 살펴 본다. (완전 초보용)

티스토리 스킨 수정 - 블로그 디자인 수정과 스킨 편집 (완전 초보용)

티스토리 스킨 수정 방법 준비

티스토리에서 스킨 수정을 하려면 우선 관리자 모드로 들어가야 한다. (PC로 들어가는 것을 추천함)

관리자 페이지에 들어간 후, 왼쪽에 나오는 메뉴 중에서 "스킨 편집"을 찾아 클릭하자.

그러면 새 창이 탭으로 열리면서 오른쪽 위에 "스킨 편집"이라는 제목이 보일 것이다.

이 화면의 왼쪽은 보이는 블로그 모양이고, 오른쪽은 스킨 편집창이다. 

왼쪽 화면 맨 위에는 모니터, 태블릿, 스마트폰 모양이 있으니, 크기에 따른 모양을 비교할 수 있다.

오른쪽 화면은 "홈 설정" 기능이 있으나, 실제 편집은 오른쪽 위에 있는 "html 편집"버튼을 눌러서 한다. 

티스토리 스킨 편집 방법 - HTML 부분

티스토리 편집은 두 가지를 기억해야 한다. HTML과 CSS다. 

위에서 말한 관리자 페이지의 "html편집"을 누르면 새 화면이 나타나는데, 여기에서 맨 위를 보면 HTML | CSS | 파일업로드 라는 분류를 볼 수 있다. 

먼저 HTML이 무엇을 하는지를 설명하자면... 위치와 크기, 내용 등이 들어가는 부분이다. 

여기서 스킨 편집을 하면 블로그에 요소가 생기거나 사라진다. 

예를 들어, 여기에 아래처럼 입력하면 새로운 요소가 생기게 된다.

[code]

<div class="newdiv">

   내용

</div>

[/code]

이런 식으로 해서 표든, 글자든, 이미지든 넣을 수 있게 되는 것이다.

티스토리 스킨 수정 방법 - CSS 편집

그런데 그냥 위처럼 끝내면 모양이 안 난다.

편집창 맨 위의 두 분째 분류인 "CSS"를 눌러서 아래와 같이 바꿔보자.

여기서 스킨 편집을 하면 블로그 요소의 모양을 결정하고 바꿀 수 있다. 

[code]

.newdiv { color:#ff0000; font-size:1.4em; }

[/code]

이 정도면 티스토리의 디자인 변경이 어떻게 이루어지는지 파악이 됐을 것이다.

다시 정리하자면, HTML 부분에 필요한 요소를 넣은 후, CSS에서 모양을 바꾸는 것이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

마지막으로 꼭 강조할 주의사항...

관리자 페이지의 메뉴 중 "스킨 변경"을 누르면, 맨 위에 "보관", "다운로드", "편집"이 버튼이 있다. 

중간 중간에 보관을 눌러서 날짜별로 저장해 두는 것이 낭패를 막는 방법이니 기억해 둔다. 백업과 복구도 이것으로 하는 것이다.