티스토리 스킨을 꾸미면서

티스토리에 블로그를 처음 만들면서 마음에 안 들었던 것이 제공 스킨들이 거의 다 사이드바가 오른쪽에 있다는 것이었다. 대부분의 우리나라 사이트들이 주요 메뉴를 왼쪽에 두는 데 익숙해서 그런지, 메뉴가 오른쪽에 있는 것이 불편했다. 우선 그것부터 바꾸기로 했는데, 허허~~ 티스토리는 네이버 블로그처럼 리모컨만 요리조리 만지면 되는 것이 아니라 직접 html이나 css를 만져야 한다!! 레이아웃을 바꾸긴 바꾸고 싶고, 태그 같은 걸 전혀 모르는 상황에서 그저 난감하기만 했다. 그래서 그냥 무작정 봤다.

html은 알 수 없는 약어들로 도배되어 있어서 그냥 넘겼고, css를 보니 그래도 약어로 쓰인 건 별로 없었다. 이걸 보니 사이드바에 대한 정보는 그대로 sidebar로 적혀 있을 것 같아서 찾기 기능으로 한 번 찾아보니 중간 쯤에서 검색되었다.

#content {
  float:left;
  width:/*@post-width=*/ 610px /*@*/;
  overflow:hidden;

}
#sidebar {
  float:right;
  width:190px;

여기서 float:right 라고 되어있으니 이걸 left로 고치면 왼쪽에 뜨겠구나! 라고 생각하고 바꾼 뒤 미리보기를 해보니 약간 옆으로만 이동했을 뿐 완전히 바뀌지는 않았다. '분명히 이게 위치를 결정하는 요소일 건데…' 그 주변을 좀 둘러보니 #content가 있고 #footer가 있다. footer는 모르겠고, content는 분명히 포스트 내용이 들어가는 부분을 뜻할 것이라 판단하고 float 값을 right로 고쳤다. 그리고 결과를 띄워보니 성공!!!


배경이나 글자 색깔은 스킨 위자드를 사용했는데, 거기서는 바꿀 수 있는 게 한정되어 있었다. 예를 들면, 기본 스킨에서 사이드바의 항목 색깔이나 검색 틀의 색깔이 보라색인데, 이걸 파란색으로 바꾸고 싶은데 스킨 위자드에서는 바꿀 수 없었다. 이것도 css에서 바꿀 수 있었는데, 네이버 블로그에서 리모컨을 만지면서 색상 표시가 '#숫자'형식으로 쓰던 게 기억났다. css에서 #숫자 형태로 되어있는 부분은 전부 색깔을 결정하는 부분이라고 보고, 해당 영역을 찾아 하나하나 바꾸었다.

글을 막상 쓰고 보니 별로 어렵지 않게 한 것 같은 느낌이 드는데, 만약을 대비해 미리보기를 하나하나 다 해보면서 했기 때문에 시간이 많이 걸렸다. 또 중간에 티스토리 스킨이 깨지는 바람에(알고보니 티스토리 스킨의 고질적인 버그였다. 하루 정도 지나면 제대로 표시된다.) 스킨 초기화를 두 번 정도 시켰기 때문에 시간이 훨씬 더 걸렸다.

나처럼 아무 것도 모르는 초보들에게 도움되는 것이 있을 것 같아서 글을 남긴다. :)