안녕하세요. 오늘은 제가 사용하고 있는 스킨의 본문 넓이를 조절하는 방법에 대해서 알아보겠습니다.
지금은 줄이기 하는 방법을 알아 볼 텐데.. 조절하는 방법만 알면 본문 넓히기도 손쉽게 가능 할 것입니다.
그리고 이스킨만 아니라도 다른스킨도 쉽게 조절이 가능하구요.
우선 기본 구조를 파악 해야합니다.
반응형 웹스킨이기 때문에 그냥 무작정 고치게 되면 나중에 다 틀어지게 됩니다.
본문 좌우 배경을 없애 버리는 방법도 있긴한데 그건 다음포스팅으로!!
블로그 넓이 구조
우슨 main 영역은 1321px 1322px
content 영역은 999px
마지막으로 본문 post-content 영역은 857px입니다.
즉 본문 영역인 post-content 영역을 720px로 줄여보겠습니다.
총 3가지의 방법이 있습니다.
1. 티스토리 자체 설정을 사용하는 방법
2. 전체 폼은 그대로 둔체로 본문 여백만 조절해서 본문영역을 줄이는 방법
3. 전체 폼 자체를 줄여버리는 방법입니다.
개인적으로 1번 + 3번을 해주는 것이 깔끔하게 보이고 권장을 해드립니다.
만약 본문영역의 줄이는 폭이 크지 않을 경우는
1번 + 2번 방법만 해주시는 것도 괜찮습니다.
선택은 본인에게!!!
(※ 2번, 3번은 동시에 적용하지마세요. 중복으로 줄어들게 됩니다.)
첫 번째 블로그 본문 영역 줄이기 - 티스토리 설정 이용하기
우선 간단하게 기존의 폼을 전부 유지하고 단순히 post-content 부분만 줄이는 방법은 다음과 같습니다.
가장 간단하게 설정하는 방법은 글쓰기 가로폭 글쓰기 환경을 지정해주는 것입니다.
다만 이 방법은 기존에 발행한 포스팅의 내용에는 영향을 주지 않습니다.
두 번째 블로그 본문 영역 줄이기 - CSS 수정(블로그 본문 내용 폭만 줄이기)
@media (min-width: 768px) {
.content-width {
padding-left: 71px;
padding-right: 71px;
}
}
content 부분의 좌우 여백을 조절해서 줄이는 방법입니다. padding는 안쪽 여백을 의미합미다. 좌우 71px의 인쪽여백이 잡혀있죠??
71px + 857px +71px = 999px 입니다.
padding-left 및 padding-right 값을 71px 에서 139.5px로 수정을 해주면
본문영역이 720px로 고정되겠죠?? ( 139.5px + 720px + 139.5px = 999px)
수정할 때 꼭 @media-min768 쿼리 안에 있는 클래스를 수정해줘야합니다.
아래와 같이 수정하면 되겠죠???
여백을 조정하면 기존 발행한 포스팅도 모두 영향을 주게 됩니다.
@media (min-width: 768px) {
.content-width {
padding-left: 139.5px;
padding-right: 139.5px;
}
}
또는 이런식으로
@media (min-width: 768px) {
.content-width {
padding: 0 139.5px;
}
}
세 번째 블로그 본문 영역 줄이기 - CSS 수정(블로그 전체 구조 줄이기)
마지막 세 번째 방법입니다. 전체 구조를 줄이는 방법 입니다.
아까 메인 영역 전체를 줄이면 되겠죠?? 1322px 이부분을 줄여주면됩니다.
CSS 편집에 들어가면 다음 부분을 찾아서 수정해주시면 됩니다.
#main {
width: 100%;
max-width: 1322px;
margin: 0 auto;
}
아까 위에서는 border 1px을 못봐서.. 1321이라고 적었는데.. 1322px이였네요 흠흠 ㅎㅎ
857px - 720px = 137px이니
1322px - 137px은 1185px 로 고쳐주면 되겠죠?
#main {
width: 100%;
max-width: 1185px;
margin: 0 auto;
}
자 그럼 깔끔하게 정리가 완료 되었습니다.
본문 영역이 720px로 표시가 되는게 보이죠??
생각보다 간단한 작업이네요.
본인의 스킨의 구조를 파악하면 손쉽게 블로그의 구조 변경이 가능 할 것이라고 생각합니다.
그럼 다들 블로그 꾸미기 재밌게 하시길!!
