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

 

 

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

 

 

 

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

 

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

 

 

 [사이드바 너비 변경 전]

 

 [사이드바 너비 변경 후]

 

 

 

사이드바 너비 조정 방법

 

 

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; }

 

 

 

지구별에
티스토리 툭탁툭탁 2014. 2. 14. 13:35

댓글을 달아 주세요

  1. 엑시아유틸 2014.03.17 13:11 신고  수정/삭제  댓글쓰기

    내용 잘 보았습니다. 근데 저는 우측사이드바와 본문이 붙어있는 것 같습니다. 실제 간격은 많이 벌어져있습니다.현재 우측사이드바정렬을 right로 해두었거든요. left로 하면 본문 왼쪽에 붙어버리고 본문은 아래로 내려가버려서요. 그리고 현재 좌측사이드바 185,wrap에 본문530,1151, 본문내용501,우측사이드바 305, 이렇게 되어있습니다. 185+530+305=1020입니다. margin과 padding이 잘못된 것인지 도무지 본문과 우측간격을 붙일수도 없고 content의 width 값은 없고 post width만 501로 표시되어있습니다.
    뭐가 잘못된 것인지 좀 알 수 있을 까요?

    • 지구별에 2014.03.17 14:13 신고  수정/삭제

      안녕하세요.... 말씀만 들어서는 어떤 부분을 수정해야하는지 저도 감을 잡기가 힘드네요..

      본문내용이 501, 그 위에 다시 본문이 530은 알겠는데
      1151른 무엇인지요?

      레이아웃 부분이 나와 있는 css 코드를 올려주시면

      다시 한 번 살펴 보겠습니다~

      그리고 어느 부분을 어떻게 수정하고 싶으신 건지도 같이 알려주세용...


  2. 엑시아유틸 2014.03.18 19:50 신고  수정/삭제  댓글쓰기

    저의 블로그레이아웃 부분의 css입니다.
    /* 블로그레이아웃 */
    #wrap {position:relative;width:/*@post-width:530=*/1151px/*@*/;overflow:hidden;margin:5px auto 0; background:url('./images/bg_body.gif') repeat-y 195px 0;}
    #container {float:left;margin-left:55px;background: url(./images/sbg.gif) right repeat-n;}
    #sidebar1 {float:left;width:185px;overflow:hidden; padding: 15px 0 0 5px;}
    #header {float:left;width:40px;overflow:hidden;margin:90px 0 0 0;}
    #content {float:left;width:/*@post-width=*/501px/*@*/;overflow:hidden;margin:0;padding:0 0px;background-color:#ffffff;}
    #sidebar2 {float:right;width:305px;overflow:hidden;margin:0 0 0 0;padding:20px 0 0 0;background-color:#ffffff;}
    #footer {clear:both;width:/*@post-width:-30=*/471px/*@*/;overflow:hidden;padding:15px 0;font-size:12px; text-align: center; background-color: #ffffff;}

    현재 문제는 본문과 우측사이드바의 간격을 조금 좁힐려고 합니다. 여러가지 margin,padding값을 바꿔봐도 이상하게 바뀌어버리니 변경하지를 못하겠습니다. 감사합니다.

    • 지구별에 2014.03.19 11:00 신고  수정/삭제

      지금 님 블로그에 들어가 보니까
      메뉴부분이 사이드바 형태로 되어 있네요...

      sidebar1 :사이드바 왼쪽
      content : 본문
      sidebar2 : 사이드바 오른쪽

      container: 메뉴?
      header : 메뉴?


      왼쪽 사이드바와 본문 사이의 너비를 좁히려면
      1. sidebar2 width를 더 적게 하거나 float:left 설정을 해보시고
      2. 두 가지도 같이 해 보시고
      그래도 안 되면
      3. #sidebar1 이나, #content , #header 부분의 width와
      #container의 margin-left:55도 같이 조정해 보세요..

      참고로 content width는 501입니다
      /*@post-width=*/는 주석 부분이라 실행화면과 관계 없구요

      이렇게 해도 안 될 경우

      4. #wrap width 1151px를 더 넓게 지정해 보세요.

      wrap이 실제로 어디서부터 어디까지인지 제가 계산하기는 어렵네요


      이래도 안 되시면 html 소스와 css 소스를 같이 보시면서

      레이아웃을 직접 그려보시면 너비값이(여백포함) 나올 거예요.

      html에서 ctrl+f 하셔서 wrap과 container, header 라고
      검색되는 부분을 보시면 범위가 대강 보이실 거예요

      넘 어렵죠 ㅠ.ㅠ

  3. 오렌지수박 2014.09.10 18:40 신고  수정/삭제  댓글쓰기

    덕분에 한동안 고민이었던 사이드바 메뉴 사이의 공백을 적절히 조정했어요. 글 감사히 잘 봤습니다.

Powerd by Tistory, designed by criuce