티스토리 반응형 스킨 | JB All In One > 본문과 사이드바 가로폭 픽셀 단위로 조정하기

JB All In One은 JB Skin 3 For Tistory로 이름을 바꾸어 개발합니다.

JB All In One은 본문과 사이드바 가로폭이 대략 2:1입니다.

이 폭을 변경하는 방법은 여러가지가 있으나 픽셀 단위로 정확하게 폭을 만들고 싶다면 다음의 코드를 style.css 제일 아래 추가하세요.

/* 750px */
@media (min-width: 768px) {
  #jbContent {width: 500px;}
  #jbSidebarRight {width: 250px;}
}
/* 970px */
@media (min-width: 992px) {
  #jbContent {width: 720px;}
  #jbSidebarRight {width: 250px;}
}
/* 1170px */
@media (min-width: 1200px) {
  #jbContent {width: 920px;}
  #jbSidebarRight {width: 250px;}
}

IE8을 위해서 skin.html의 </s_t3></body> 위에 다음의 코드를 넣으세요. (IE8에서는 전체 가로폭이 970px로 고정되게 만들었습니다.)

<!--[if lt IE 9]>
  <style>
    #jbContent {width: 720px;}
    #jbSidebarRight {width: 250px;}
  </style>
<![endif]-->

태블릿과 PC에서 사이드바를 220px로 만드는 예제입니다. (250이라고 되어 있지만 여백이 30이므로 눈에 보이는 사이드바는 220px가 됩니다.)

그리고, 본문과 사이드바 폭의 합이 각각 750, 970, 1170이 되도록 맞춰야 합니다.

Created on 2014-05-26 12:38 | Updated on 2016-03-20 01:16

이 글을 공유하기

Kakao

티스토리 스킨 by CMS Factory

Book navigation