티스토리 반응형 스킨 | JB Simple White For Tistory > V0.3.1 이하 > 가로 크기 조정하는 방법

JB Skin 101로 이름을 바꾸어 개발합니다.

JB Simple White는 Bootstrap을 이용해서 만들었습니다.

따라서 Bootstrap의 Grid System을 이용하여 가로 크기를 변경할 수 있습니다.

하지만, 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: 1170px;} }

위 코드를 아래의 코드로 교체합니다.

/* 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: 1170px;}
  #jbContentColumn {width: 780px;}
  #jbSidebarColumn {width: 390px;}
}

교체를 해도 아무런 변화는 없습니다. 단지 수정하기 편하게 모양을 바꾼 것입니다.

.container는 전체 가로 크기, #jbContentColumn은 본문 가로 크기, #jbSidebarColumn은 사이드바 가로 크기입니다. 의미는 다음과 같습니다.

  • 767px 이하 - 전체 가로 크기 100%, 본문 가로 크기 100%, 사이드바 가로 크기 100%
  • 768px 이상 - 전체 가로 크기 750px, 본문 가로 크기 500px, 사이드바 가로 크기 250px
  • 992px 이상 - 전체 가로 크기 990px, 본문 가로 크기 660px, 사이드바 가로 크기 330px
  • 1200px 이상 - 전체 가로 크기 1170px, 본문 가로 크기 780px, 사이드바 가로 크기 390px

양쪽에 여백이 15px씩 있으므로, 실제 콘텐트가 들어가는 부분은 30px를 차감해야 합니다. 예를 들어 전체 가로 크기 750px, 본문 가로 크기 500px, 사이드바 가로 크기 250px일 때, 내용이 들어가는 본문 가로 크기는 470px, 사이드바 내용이 들어가는 가로 크기는 220px입니다.

숫자를 적절히 바꿔서 크기를 변경하시면 됩니다.

주의할 점은 .container의 값은 #jbContentColumn의 값과 #jbSidebarColumn의 값의 합과 같아야 한다는 것입니다. 즉, 빨간색 숫자의 합이 그 위에 있는 초록색 숫자가 되도록 맞추시면 됩니다. 같지 않다면 모양이 이상하게 나옵니다.

IE8 이하에서의 가로 크기

IE8 이하에서의 가로 크기는 skin.html에 있는 다음의 코드로 정합니다.

<!--[if lt IE 9]>
  <style>
    .container {width: 990px;}
  </style>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

다음과 같이 교체하고

<!--[if lt IE 9]>
  <style>
    .container {width: 990px;}
    #jbContentColumn {width: 660px;}
    #jbSidebarColumn {width: 330px;}
  </style>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

숫자를 적절히 변경하시면 됩니다.

IE8 이하에서는 고정폭으로 나오므로, 웹브라우저 가로 크기를 변경해도 레이아웃이 변하지 않습니다. (IE8 이하를 모바일 웹브라우저로 사용할 일은 없으므로 고정폭이어도 아무런 문제가 없습니다.)

요약

  1. style.css 코드 교체
  2. 전체 가로 크기 수정
  3. 본문과 사이드바 가로 크기 수정(합이 전체 가로 크기가 되로록)
  4. skin.html 코드 교체
  5. 전체, 본문, 사이드바 크기 수정

Created on 2015-07-31 16:05 | Updated on 2017-03-26 19:58

이 글을 공유하기

Kakao

티스토리 스킨 by CMS Factory

Book navigation