[블로그팁]티스토리 스킨크기(본문, 사이드바)를 변경할 때 주의해야 할 점!!

<티스토리 블로그의 스킨크기(본문, 사이드바)를 변경할 때 반드시 주의해야 할 점은 뭘까요?>

주말은 잘 보내셨나요?
한동안 블로그관련 글이 없었던 것 같은데 오랜만에 블로그 스킨에 대한 글을 써볼까 합니다.

감사하게도 가끔씩 제가 배포한 스킨을 사용하게 되었다는 글을 남겨주시는 분들이 계시는데요.
얼마전 이웃분 중에 스킨을 바꾸셨다고 문의를 남겨주신 분이 계셨습니다.

스킨의 크기 변경에 대한 질문

스킨 크기 변경에 대한 질문

이 질문에 대한 답을 하려다가 이 내용을 다른 분들에게도 소개하는 것이 좋을 것 같아서 포스팅 주제로 글을 쓰게 되었습니다.

이미 얼마전 블로그 스킨의 크기변경에 관련된 글을 소개한 적이 있었습니다.
티스토리 블로그 스킨 설명 - 1. 각 부분의 크기 조절

이번에는 크기조절과 더불어서 주의해야 할 점에 대해 같이 소개를 해볼까 하는데요.

스킨 크기조절을 위해 살펴봐야 할 것

우선 제가 사용하고 배포하는 스킨을 기준으로 각 부분의 크기는 어디서 찾아야 하는지 살펴보겠습니다.

① 스킨 전체의 가로크기
② 본문영역 중 본문 가로크기
③ 본문, 사이드바 사이 여백
④ 사이드바 가로크기

큼직한 요소들만 살펴보면 위와 같은데요. 위의 해당 크기를 변경하려면 어떻게 해야 할까요?


우선 관리자페이지의 HTML/CSS 편집 페이지의 style.css로 찾아가시구요.

스킨마다 명칭이 다르지만 제 스킨을 기준으로 한다면 layout -> wrapper가 스킨 전체 가로크기에 해당합니다.

contentcolumn이 본문영역, 본문 가로크기는 width(670px)로 지정하구요. 사이드바와의 사이 여백은 margin-right(30px)로 지정되어 있습니다.
그리고 rightcolumn은 사이드바를 나타냅니다. width(210px)로 사이드바의 가로크기가 지정되어 있죠.

본문크기 변경 테스트

자 그럼 본문의 크기를 늘리고 싶다면 어디의 크기를 변경해야 할까요?
고민 할 필요도 없이 ②contentcolumn - width의 크기를 변경하면 되겠죠? 670px로 지정되어 있는데요 100px을 늘려서 770px로 변경해보겠습니다.

보시다시피 본문크기만 100px을 늘려봤습니다. 그 결과를 한번 보실까요?

아하... 이런!! 본문크기가 늘어나는 바람에 사이드바가 제 자리를 잃고 아래쪽으로 쭉 떨어지고 말았습니다.

도대체 문제가 뭘까요?

문제 해결(크기 변경시 주의사항)

위에서 한가지 간과한 사실이 있었습니다.
본문크기를 늘리기 위해서 다른 것은 생각하지 않고 그저 본문의 크기만 키웠다는 것이죠.

중요한 것은 스킨의 전체 가로크기를 생각하셔야 합니다.

스킨 전체크기 = 본문영역 크기 + 사이드바 크기 + 사이 여백 + 좌우 여백

즉, 오른쪽 항의 본문영역 크기를 100px 늘리기 위해서는 왼쪽 항의 스킨 전체크기도 100px이 늘어나야만 한다는 것입니다.

마찬가지로 사이드바, 여백 등을 키우고 싶다면 늘어나는 수치만큼 전체크기의 수치도 늘려줘야 한다는 것이죠.

어때요? 도움이 좀 되셨나요? 블로거들은 각자의 개성에 맞게 다양한 스킨을 사용하고 있죠.
또한 같은 스킨을 사용하더라도 자신의 입맛에 맞게 수정을 하기도 하구요. 이번에 소개해드린 것처럼 스킨의 크기를 변경하고 싶다면 한가지만 기억하세요. 한가지 항목의 크기를 바꾸시려면 스킨의 전체크기도 같이 바꾸셔야 한다는 것을요...

오늘의 팁은 제 스킨을 기준으로 설명드렸습니다.
스킨의 종류가 너무나도 다양하기에 한가지를 기준으로 설명드리는 것은 무리가 있다는 것도 인정합니다.
위에 설명드린 wrapper, contentcolumn, rightcolumn등은 다른 스킨에서는 또 다른 용어로 표시되기도 한답니다.

다음번에는 많이들 사용하시는 기본스킨의 크기 변경에 대해서도 다뤄보겠습니다.