본문 바로가기
티스토리 툭탁툭탁

사이드바 너비 조정 방법, 티스토리 본문과 사이드바 간격 조정 방법

by 지구별에 2014. 2. 14.

 

 

사이드바 너비 조정 방법, 티스토리 본문과 사이드바 간격 조정 방법

 

 

 

제 스킨으로 설정한 사이드바의 기본 설정은 아래 화면과 같았는데요,

 

사이드바 폭이 좁다 보니, 본문과 간격이 벌어져 보기가 좋지 않아 사이드바 너비를 조정해보았습니다...

 

 

 [사이드바 너비 변경 전]

 

 [사이드바 너비 변경 후]

 

 

 

사이드바 너비 조정 방법

 

 

TISTORY관리 -> HTML/CSS 편집 화면으로 이동.


skin.html과 style.css 영역 중, style.css에서 Ctrl+F로 'sidebar'를  찾습니다.

(스킨마다 이름이 다를 수 있습니다.)

 

여기서 width를 원하는 넓이로 조정합니다.

 

.sidebar {width:250px;}-->sidebar {width:280px;}

 

 

 

 

 

 

 

사이드바가 밑으로 내려갈 때 방법

 

 

위에서 본 방법은 아주 간단한데요,  티스토리 스킨에 따라 조금씩 다를 수 있어서,

 

이해를 돕기 위해 추가 설명을 해 보겠습니다. 

 

보통 티스토리나 블로그에서 사용하는 화면은 아래의 구조(layout)을 하고 있는데요,

(사이드바가 왼쪽에 있는 경우도 있음 )

 

예를 들어 B를 1000px로 설정하면,

 

본문+사이드바+여백(margin, padding, border) 포함 1000px이 되어야 합니다.

*margin, padding, border의 차이는 본문 맨 아래 참조

 

[주의] IE8과 IE 이전 버전에서는 width 값에 padding과 border 값이 포함되어 있습니다.

이 문제를 해결하기 위해 <!DOCTYPE html>을 선언해 주어야 한다고 합니다!

 

본문과 사이드바만 생각해서 너비를 조정하다 보면, 사이드바가 밑으로 내려가는 현상이 발생함...

 

 

예)

B=1000px일 경우

C=700px , D=300px, 여백=50px 이라면(700+300+50=1050), 사이드바가 정상적으로 나오지 않습니다..

 

 

 

 

 

티스토리 본문 너비 변경 방법

 

 

위 그림에서 본문 내용을 답고 있는 부분(C)은 style.css 에서,

contents 혹은 container란 이름을 씁니다....

제 티스토리 스킨 같은 경우, contents가 바로 그림 C 영역인데, 본문 너비는 여기서 조정하면 됩니다...


#mainBox
#main {width:1020px;}

.contents {width: 720px;}

 

본문 너비 조졍할 때 역시, 사이드바 너비와 여백 너비까지 함께 고려해야 합니다~

 

 

 

 

 

 

[참고: margin(마진), border(보더), padding(패딩)의 차이]

 

 

padding: 본문 내용과 border 사이의 여백

border : 선 (선 굵기를 다양하게 지정할 수 있으며, 선을 그리지 않을 수도 있음)

margin : border와 바깥과의 여백.

 

보통 아래처럼 표시합니다

{margin: 100px 40px 10px 70px;}    :  top, right, bottom, left 순

{padding: 20px 20px 20px 80px;}    :   top, right, bottom, left 순

{border: 1px solid blue;}              :  굵기, 선 형태, 색깔 순

 

코딩 예)

 

#main {width:1020px;}

.contents {width: 720px; margin 10 10 10 10; }

 

 

 

반응형

댓글6