티스토리(TISTORY) 블로그 스킨 사이드바 위치 바꾸기(왼쪽, 오른쪽)

티스토리(TISTORY) 블로그 스킨 사이드바 위치 바꾸기(왼쪽, 오른쪽)

티스토리 기본테마스킨 - tisNote의 좌측 사이드바를 우측으로 바꾸는 방법 입니다.
블로그 스킨마다 약간의 차이가 있을 수 있으니 참고만 하세요.
많이 응용되고 있는 기본테마스킨의 경우 *style.css 에서 두줄만 바꿔주면 "좌측 사이드바"와 "본문"의 위치를 서로 바꿀 수 있습니다.

먼저 스킨 > HTML/CSS 편집 > style.css 에 들어가 "/* 블로그의 레이아웃 */" 부분을 찾습니다. .container 로 시작하는 부분 입니다.


*style.css

/* 블로그의 레이아웃 */ .container{ width:/*@post-width:440*/1060px/*@*/;}

*이미지를 클릭하면 크게 볼 수 있습니다.*

/* 블로그의 레이아웃 */ 안에 "content" 와 "sideinfo" 를 찾습니다.

*이미지를 클릭하면 크게 볼 수 있습니다.*

위 그림에 빨간줄로 표시된 두줄이 "본문"과 "좌측 사이드바"의 레이아웃 부분 입니다.
이 두줄만 바꿔주면 좌측의 사이드바를 우측으로 옮길 수 있습니다.

위 그림은 사이드바가 "우측"에 있는 경우 입니다.


*본문 레이아웃 부분

변경전: .content { float:right; ... <코드 생략> ... padding:0;} 변경후: .content { float:left; ... <코드 생략> ... padding:0;}

*좌측 사이드바 레이아웃 부분

변경전: .sideinfo{ float:left; ... <코드 생략> ... overflow:hidden;} 변경후: .sideinfo{ float:right; ... <코드 생략> ... overflow:hidden;}

변경전(좌측 사이드바)

변경후(우측 사이드바)

content, sideinfo 에 있는 "float" 부분의 left, right 만 서로 바꿔주면 좌측의 사이드바는 우측으로 본문은 좌측으로 이동 됩니다.