티스토리 블로그 꾸미기 좌우이동이 되는 사이드바

티스토리 블로그 스킨의 장점은 사용하고 있는 블로그를 자유롭게 스킨을 변경하여 사용 할 수
있는 점이 좋습니다. 스킨의 큰 틀은 좌측에 사이드바가 있는 경우가 있고 우측에
사이드바를 넣는 경우가 있습니다. 이런 스킨을 2단형 스킨이라합니다.

1단형 스킨은 사이드바가 없거나 하단에 있는 경우이고 3단형 스킨은 본문이 중앙에 오고
좌우에 사이드바를 넣는 경우를 말합니다. 오늘은 2단형 스킨에서 사이드바를
좌측이나 우측으로 이동하여 바꾸는 방법을 알아봅니다.

티스토리 블로그 꾸미기에서 좌우이동이 되는 사이드바는 스킨을 어느정도 아는 분들은
어렵지 않게 적용하여 바꾸어 사용하기도 하지만 스킨적용에 숙달이 덜된
분들은 스킨의 내용을 바꾸면서 주의해야 하는 것은 기본적인
일입니다. 스킨 적용에 있어서 항상드리는 말씀은
저장하기 전 스킨에 이상이 있는지 미리보기를
반드시 해보아야 합니다.

좌우이동이 되는 사이드바를 바꾸어 보는 이유는 스킨을 내용을 크게 바꾸지 않고 전체적인
블로그의 분위기를 일시에 변화를 줄 수 있어 좋은 점도 있습니다. 그리고 애드센스의
위치를 바꾸어 주어 어떤 결과가 나타나는지 체크를 해볼 수 있습니다. 애드센스의
결과물은 오랜경험과 실험을 통해 아주 조금씩 변화되는 것을 봅니다.
그렇기 때문에 자신만이 실험을 통해 얻은 결과물은 타 블로그에서
그대로 적용하면 오히려 부실한 결과물을 얻기 쉽습니다.

좌우로 이동이 되는 사이드바를 티스토리 블로그에서 꾸미기는 먼저 style.css에서
ctrl+f로 블로그 스킨 검색창을 만들고 Content나 float로 이동을 합니다.
 Content나 float로 이동을 하면 아래와 같이 표시가 나타납니다.
여기에서 right, left를 바꾸어만 주면 좌우가 바뀐 스킨이
만들어 집니다. 여기까지는 별로 어렵지 않습니다.

#wrapContent { background: #fff url(images/sidebarbg_img.gif) fff; }
#content {
 float:right;
 padding: 30px 15px 50px 0px;
                  /*상,우,하,좌*/
 width:/*@post-width=*/725px/*@*/;
 overflow:hidden;
}
#sidebar { float:left; width: 370px; padding: 14px; background-color: #FFFFFF; }
#footer { clear:both; padding:20px 0 0 0; }

하지만 사이드바가 복잡하거나 본문이 단순하지 않으면 right, left를 바꾸어 주어도 작은
문제들이 발생합니다. 저의 경우 ( padding: 30px 15px 50px 0px; )본문 여백이
좌우이동이 되는 사이드바로 인해 많은 본문 여백을 수정하여 적용하였답니다.

본문 여백에서 한가지 알아두면 좋은 스킨수정방법은 style.css에서 주석처리 /*상,우,하,좌*/
하여 여백의 수정방향을 알 수 있게 넣어보았습니다. 즉  padding: 30px 15px 50px 0px;에서
순서 대로 본문 여백을 숫자를 수정하여 여백의 공간을 스킨에 적용하는 것입니다.

이렇게 스킨을 수정하여 만들어진 스킨은 이름을 알기 쉬게 만들어 저장하여 두면 좌우가 바뀐
사이드바를 쉽게 사용할 수 있어 언제든지 전체스킨을 바꾸지 않고 간단하게
블로그의 환경에 변화를 줄수 있습니다. 그렇더라도 스킨은 자주
 바꾸면 좋은 점보다 불리한 점이 많습니다.

 Content로 이동을 하면 아래와 같이 표시가 나타납니다.
여기에서 right, left를 바꾸어만 주면 좌우가 바뀐 스킨이
만들어 집니다. 여기까지는 별로 어렵지 않습니다.

float로 이동을 하면 아래와 같이 표시가 나타납니다. 여기서 right, left를 바꾸어만
주면 좌우가 바뀐 스킨이 만들어 집니다. 여기까지는 별로 어렵지 않습니다.

사이드바가 복잡하거나 본문이 단순하지 않으면 right, left를 바꾸어 주어도 작은
문제들이 발생합니다. 저의 경우 ( padding: 30px 15px 50px 0px; )본문 여백이
좌우이동이 되는 사이드바로 인해 많은 본문 여백을 수정하여 적용하였답니다.

우측사이드바가 좌측으로 이동된 현재 저의 블로그 화면입니다.

스킨을 수정하여 만들어진 스킨은 이름을 알기 쉬게 만들어 저장하여 두면 좌우가 바뀐
사이드바를 쉽게 사용할 수 있어 언제든지 전체스킨을 바꾸지 않고 간단하게
블로그의 환경에 변화를 줄수 있습니다.

※ 참고로 드리는 말씀 : 사이드바 좌우바꾸기는 반드시 필요하분 만 적용하시기 바라고 거듭드리는
말씀은 미리보기 후 검증이 된 상태에서 저장하시기 바랍니다.