티스토리 반응형 스킨 | JB Skin 1 For Tistory > V0.2.0 이하 > 가로 크기 변경하는 방법

JB Skin 1 For Tistory는 JB Skin 103 For Tistory로 이름을 바꾸어 개발합니다.

전체적인 레이아웃은 style.css에 있는 다음의 코드로 만듭니다.

.jb-container {
  width: 1080px;
}
.jb-col-content {
  float: left;
  width: 770px;
}
.jb-col-sidebar {
  float: right;
  width: 310px;
}
.jb-col-copyright {
  float: left;
  width: 50%;
}
.jb-col-designed {
  float: right;
  width: 50%;
}
@media (max-width: 1079px) {
  .jb-container {
    width: 950px;
  }
  .jb-col-content {
    width: 640px;
  }
  .jb-col-sidebar {
    width: 310px;
  }
}
@media (max-width: 949px) {
  .jb-container {
    width: 750px;
  }
  .jb-col-content {
    width: 500px;
  }
  .jb-col-sidebar {
    width: 250px;
  }
}
@media (max-width: 767px) {
  .jb-container {
    width: 100%;
  }
  .jb-col-content {
    float: none;
    width: 100%;
  }
  .jb-col-sidebar {
    float: none;
    width: 100%;
  }
  .jb-col-copyright {
    float: none;
    width: 100%;
  }
  .jb-col-designed {
    float: none;
    width: 100%;
  }
}

전체 크기는 초록색 숫자로, 본문 영역과 사이드바 영역의 크기는 빨간색 숫자로 정합니다. 즉, 빨간색 숫자의 합이 녹색 숫자입니다.

의미는 다음과 같습니다.

  • 기본
    전체 크기 - 1080px, 본문 영역 크기 - 770px, 사이드바 영역 크기 - 310px
  • 950px 이상 1079px 이하
    전체 크기 - 950px, 본문 영역 크기 - 640px, 사이드바 영역 크기 - 310px
  • 768px 이상 949px 이하
    전체 크기 - 750px, 본문 영역 크기 - 500px, 사이드바 영역 크기 - 250px
  • 767px 이하
    전체 크기 - 100%, 본문 영역 크기 - 100%, 사이드바 영역 크기 - 100%

여백이 있으므로 실제 본문이나 사이드바 내용이 출력되는 크기는 숫자보다 작습니다. 예를 들어 본문 영역의 좌우 여백은 각각 21px로, 본문 영역 크기가 770px일 때 본문이 출력되는 부분은 728px입니다.

숫자를 적절히 변경하여 원하는 크기로 바꿀 수 있습니다. 숫자를 바꿀 때 본문 영역 크기와 사이드바 영역 크기의 합이 전체 크기가 되도록 해야 합니다.

예제 1

950px 이상 1079px 이하에서 본문 영역 크기를 늘리고 사이드바 영역 크기를 줄이고 싶다면

@media (max-width: 1079px) {
  .jb-container {
    width: 950px;
  }
  .jb-col-content {
    width: 640px;
  }
  .jb-col-sidebar {
    width: 310px;
  }
}

를 다음처럼 수정합니다.

@media (max-width: 1079px) {
  .jb-container {
    width: 950px;
  }
  .jb-col-content {
    width: 750px;
  }
  .jb-col-sidebar {
    width: 200px;
  }
}

예제 2

기본 크기를 더 크게 만들고 싶다면

.jb-container {
  width: 1080px;
}
.jb-col-content {
  float: left;
  width: 770px;
}
.jb-col-sidebar {
  float: right;
  width: 310px;
}
.jb-col-copyright {
  float: left;
  width: 50%;
}
.jb-col-designed {
  float: right;
  width: 50%;
}

를 다음처럼 수정합니다.

.jb-container {
  width: 1310px;
}
.jb-col-content {
  float: left;
  width: 1000px;
}
.jb-col-sidebar {
  float: right;
  width: 310px;
}
.jb-col-copyright {
  float: left;
  width: 50%;
}
.jb-col-designed {
  float: right;
  width: 50%;
}
@media (max-width: 1309px) {
  .jb-container {
    width: 1080px;
  }
  .jb-col-content {
    float: left;
    width: 770px;
  }
  .jb-col-sidebar {
    float: right;
    width: 310px;
  }
}

본문 영역 크기가 늘어났으므로, 이미지가 그 크기에 맞게 업로드되게 하려면, 티스토리 관리자의 [글 설정]의 '글쓰기 가로폭'을 늘려주어야 합니다.

Created on 2015-10-07 12:36 | Updated on 2017-04-04 11:56

이 글을 공유하기

Kakao

티스토리 스킨 by CMS Factory

Book navigation