16. 사이드바 위치 바꾸는 방법(티스토리 스킨) - Cooltime의 블로그 초보탈출 설명서

안녕하세요. 쿨타임입니다.

이번글은 티스토리 스킨에서 사이드바 위치를 변경하는 방법에 대해서 적어보도록 하겠습니다.

사실 사이드바 변경하는 방법은 초급보다는 중급정도의 수준이지만, 룬뚜님께서 요청하셔서 이렇게 리뷰 해봅니다.

사이드 변경방법은 style.css를 변경해서 가능하며, 

스킨마다 다르기 때문에 표준화를 만들기는 어렵지만,

하나 하나 소스를 수정하면서 한번 시도해보시길 바랍니다.

* 스킨 소스를 변경할때는 꼭 스킨저장 혹은 HTML과 style.css를 메모장에 저장한 후 수정하시길 바랍니다.

* 만약 잘못되었을 경우 간단하게 복구 가능합니다.

사이드바 위치 바꾸는 방법

 

룬뚜님의 블로그입니다.

사이드바가 오른쪽으로 되어 있습니다.

룬뚜님께서는 이 사이드바를 왼쪽으로 옮기고 싶다고 하시더군요.

티스토리는 팀블로거라는 시스템으로 여러명이 한 블로그를 운영가능한데,

그 시스템을 이용해서 룬뚜님의 블로그 관리자에 접속하여 style.css를 수정하기로 했습니다.

* 팀블로그 초대를 받아야 가능합니다.

일단 관리 화면에서 사이드바를 확인해봅니다.

3단형으로 되어있지만(사이드바 2개) 티스토리 자체 스킨이 아니라,

외부 스킨을 입힌것이라 사이드바 2개로 구분되어 있어도 한개로 나열되어 표시되도록 되어 있는 스킨임을 확인했습니다.

즉, 사이드바 1,2 구분없이 사이드바 전체를 오른쪽에서 왼쪽으로 수정하면 됩니다.

* 3단형의 경우 사이드바 1,2 구분하여 스킨 소스를 변경하여야 합니다.

관리 모드 -> 꾸미기 -> HTML/CSS 편집 화면에서

style.css 화면을 살펴보도록 합니다.

style.css는 간단히 말해서 HTML에서 정해주는 틀을 꾸미거나 위치를 변경해준다고 생각하시면 됩니다.

우리는 사이드바를 옮길것인데, 이런 틀을 정해주는 것을 '레이아웃'이라고 합니다.

다행히 style.css에 '블로그 레이아웃' 이라고 힌트가 삽입되어서 아주 간단하게 레이아웃 소스를 찾을 수 있었습니다.

레이아웃 소스 밑에 보면 header, content, sidebar, foot 라고 나눠져 있는것을 볼 수 있습니다.

header는 블로그 상단을 설정하는 곳입니다.

content는 블로그 본문쪽을 설정합니다.

sidebar는 사이드바를 설정하며,

foot는 블로그 하단을 설정하는것이니 참고바랍니다.

룬뚜님의 style.css 소스를 보시면 content는 왼쪽, sidebar는 오른쪽으로 설정된것을 볼 수 있습니다.(빨간줄)

우리가 원하는것은 sidebar를 왼쪽, content(본문)을 오른쪽으로 변경하고 싶으니,

float 항목을 아래와 같이 변경해줍니다.

이렇게 설정하면 본문은 오른쪽, 사이드바는 왼쪽으로 바뀌게 됩니다.

주의 할점은 content가 우선순위가 높기 때문에 content의 float를 변경하지 않고, sidebar만 변경하면 위치가 변경안되니

꼭 두 개다 변경하셔야 됩니다.

조금 응용을 하면 width 라는 항목을 변경하면 크기가 변경됩니다.

지금 위 소스를 보면 본문은 540px, 사이드바는 190px 인것을 확인 할 수 있습니다.

만약 이 본문 폭과 사이드 폭을 조절하실때는 꼭 container폭도 조절해야 되니 참고하시길 바랍니다.

자 설정하셨다면, 미리 보기를 하지 마시고 저장을 눌러서 

블로그 새로고침(F5)를 눌러서 확인하시길 바랍니다.

그 이유는 style.css 편집은 미리보기로 적용이 안되는 경우가 있기 때문입니다.

짜짠~

간단하게 사이드바가 오른쪽에서 왼쪽으로 이동하였습니다.

다행스럽게 룬뚜님의 블로그 스킨이 간단하게 되어 있어서 쉽게 변경하였지만,

스킨에 따라서 조금더 복잡하게 되어 있는 경우도 있습니다.

하지만 기본은 위와 같은 방법이니 사이드바 위치를 변경하실분은 하나 하나 변경하면서 시도해보시길 바랍니다.

간단하지만 유익한 정보 되기를 바랍니다. 아참 공감(♥)하나 해주시면 더욱 감사하겠습니다. ^^