티스토리 반응형 스킨 | JB Magazine For Tistory > Tips > 가로폭 변경하는 방법

웹브라우저 가로폭에 따른 JB Magazine 스킨의 기본 가로폭은 다음과 같습니다.

  • ~767px
    1단, 웹브라우저 가로폭 - 30px
  • 768px ~ 991px
    본문 500px, 사이드바 250px
  • 992px
    본문 660px, 사이드바 300px

Bootstrap 기반으로 만들었으므로 Bootstrap의 그리드 시스템을 이용하여 폭을 변경할 수 있습니다.

픽센단위로 정교하게 폭을 조정하고 싶으면 다음과 같이 합니다.

style.css에 다음과 같은 코드가 있습니다.

/* Bootstrap Grid */
@media (min-width: 768px) { .container {width: 750px;} }
@media (min-width: 992px) { .container {width: 990px;} }
@media (min-width: 1200px) { .container {width: 990px;} }

다음과 같이 변경합니다.

/* Bootstrap Grid */
@media (min-width: 768px) {
  .container {width: 750px;}
  #jbContentColumn {width: 500px;}
  #jbSidebarColumn {width: 250px;}
}
@media (min-width: 992px) {
  .container {width: 990px;}
  #jbContentColumn {width: 660px;}
  #jbSidebarColumn {width: 330px;}
}
@media (min-width: 1200px) {
  .container {width: 990px;}
  #jbContentColumn {width: 660px;}
  #jbSidebarColumn {width: 330px;}
}

기본 설정을 수치로 다시 한 번 정리한 것입니다.

.container가 전체폭, #jbContentColumn가 본문폭, #jbSidebarColumn이 사이드바폭입니다.

빨간 숫자를 변경하여 폭을 조정하면 되고, 빨간 숫자에서 30을 뺀 값이 폭이 됩니다.

빨간 숫자의 합은 파란 숫자가 되어야 하고, 파란 숫자는 갈색 숫자보다 작아야 합니다.

갈색 숫자는 변경하지 않습니다.

Created on 2015-02-17 14:24 | Updated on 2016-03-23 20:02

이 글을 공유하기

Kakao

티스토리 스킨 by CMS Factory

Comments

가로 포스트 영역(글 영역)을 현재 630px 정도에서 728x90 에드센스가 들어갈 정도로 넓히고 싶은데 어떻게 해야 할지 감이 잘 않오는 것 같아요 

다음처럼 해보세요.

/* Bootstrap Grid */
@media (min-width: 768px) {
  .container {width: 750px;}
  #jbContentColumn {width: 500px;}
  #jbSidebarColumn {width: 250px;}
}
@media (min-width: 992px) {
  .container {width: 990px;}
  #jbContentColumn {width: 660px;}
  #jbSidebarColumn {width: 330px;}
}
@media (min-width: 1200px) {
  .container {width: 1088px;}
  #jbContentColumn {width: 758px;}
  #jbSidebarColumn {width: 330px;}
}

Add new comment

Guest

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
구글이 제공하는 스팸방지 기능입니다. '로봇이 아닙니다'에 체크해야 글을 등록할 수 있습니다.

Book navigation