사이드바 너비 조정 방법, 티스토리 본문과 사이드바 간격 조정 방법
제 스킨으로 설정한 사이드바의 기본 설정은 아래 화면과 같았는데요,
사이드바 폭이 좁다 보니, 본문과 간격이 벌어져 보기가 좋지 않아 사이드바 너비를 조정해보았습니다...
[사이드바 너비 변경 전]
[사이드바 너비 변경 후]
사이드바 너비 조정 방법
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; }
'티스토리 툭탁툭탁' 카테고리의 다른 글
| 워드 분수 입력 세 가지 방법 (0) | 2014.04.11 |
|---|---|
| 블로그(티스토리 포함) 네이버에 사이트 등록(검색 등록)되지 않는 이유 (0) | 2014.02.22 |
| 애드센스 복수계정 만들기가 안 된다면, 대안은? (8) | 2014.02.14 |
| 구글 애드센스 가입 방법(애드센스 가입 조건, 애드센스 종류) (0) | 2014.02.13 |
| 네이버 검색등록(사이트 등록 기준) (0) | 2014.02.12 |
댓글