본문으로 바로가기

[CSS]티스토리 CCZ-CROSS 스킨 본문 넓이 조절 하기

로딩중..
2016.04.09 00:03

안녕하세요. 오늘은 제가 사용하고 있는 스킨의 본문 넓이를 조절하는 방법에 대해서 알아보겠습니다.


지금은 줄이기 하는 방법을 알아 볼 텐데.. 조절하는 방법만 알면 본문 넓히기도 손쉽게 가능 할 것입니다.


그리고 이스킨만 아니라도 다른스킨도 쉽게 조절이 가능하구요.


우선 기본 구조를 파악 해야합니다.


반응형 웹스킨이기 때문에 그냥 무작정 고치게 되면 나중에 다 틀어지게 됩니다.

본문 좌우 배경을 없애 버리는 방법도 있긴한데 그건 다음포스팅으로!!

블로그 넓이 구조


우슨 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-leftpadding-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로 표시가 되는게 보이죠??


생각보다 간단한 작업이네요.


본인의 스킨의 구조를 파악하면 손쉽게 블로그의 구조 변경이 가능 할 것이라고 생각합니다.


그럼 다들 블로그 꾸미기 재밌게 하시길!!










신고

댓글을 달아 주세요

  1. BlogIcon 영표씨 2016.04.09 07:33 신고

    와우 정말 간단하게 설명해주셨네요! 이렇게 명쾌하다니 ㅠㅎㅎ 감사해요 ^^

  2. BlogIcon 첼시♬ 2016.04.09 16:22 신고

    매번 1번 방법으로만 폭을 줄였었는데 다양한 방법으로 너비를 설정할 수 있군요.
    코코님 글을 보면 무슨 마술 같아요. 신기합니다. +_+
    그리고 설현설현...ㅋㅋㅋ 투표소에 온 사진 봤는데 너무 예쁘더라고요. :D

    • BlogIcon COCOSOFT COCO Media 2016.04.09 22:10 신고

      마술이라니요!! 넵 감사합니다ㅎㅎ+_+ 쉽게 설명하려고 했는데 잘 전달 되었는지 모르겠네요ㅎㅎ 테스트용 사진으로 연예인 사진을 많이 사용해서요ㅎㅎ 저도 사전투표 원피스 사진을 봤어요. 오늘 사전투표도 했구요!! 봄날씨던데 좋은 주말보내세요!

티스토리 툴바