IT 인터넷 REVIEW

티스토리 블로그 본문 가로 폭 줄이기 반응형 스킨

Grandpassion 2016. 11. 9. 16:00
반응형

티스토리 블로그를 하다 보면 스킨의 본문 가로 폭을 줄이고 싶을 때가 있다. 그런데 관리자에서 글 설정에 들어가서 가로 폭을 줄이면 포스팅 할 때 글쓰기 모드 창과 업로드하는 이미지만 설정한 값으로 줄어들고, 글을 쓰고 난 후 블로그 홈으로 나와서 확인을 해보면 본문의 가로 폭이 줄어들지 않는다. 이럴 경우에  HTML/CCS에서 직접 수정을 해줘야 하는데 그 방법을 알아 보기로 한다.






티스토리 블로그 본문 가로 폭 줄이기 반응형 스킨



티스토리 블로그 본문 가로 폭 줄이기 반응형 스킨


필자의 티스토리 블로그 반응형 스킨의 본문 가로 폭 여백이다. 이 스킨은 전체 가로 폭이 큰 편이고, 본문 가로 폭의 여백도 상당히 좁게 디자인 되어 있어서 아쉬운 마음에 줄여 보기로 했다. 이 본문의 가로 폭은 관리자에서 가로 폭을 줄여도 줄어들지 않기 때문에 직접 HTML/ CCS에서 CCS로 들어가서 수정을 해줘야 한다.





티스토리 블로그 본문 가로 폭 줄이기 반응형 스킨


관리자 HTML/CCS - CCS로 들어가서 Ctrl+F를 치고 검색 창에서  * content 를 입력한다. 그러면 컨텐트 항목의 아래쪽에 #body { padding: 20px 20px 18px; background-color: #fff; border: 1px solid 가 있다. 여기에서 padding 가운데 있는 픽셀 값을 변경해 주면 된다.


티스토리 블로그 본문 가로 폭 줄이기 반응형 스킨


이렇게 본문의 가로 폭이 넓어진 것을 볼 수 있다. 다시 한 번 정리 하자면.

  • HTML/CCL - CCS

  • Ctrl+F

  • * content

  • #body { padding: 20px 20px 18px; background-color: #fff; border: 1px solid

  • 저장

티스토리 블로그 본문 가로 폭 줄이기 반응형 스킨


스킨 전체를 보면 이렇게 본문 가로 폭이 줄어든 모습을 볼 수 있다. 보여주기 위해서 조금 과장해서 줄여 보았는데 자신의 스타일에 맞게 수정을 해서 좀 더 쾌적한 본문 환경을 만들 수 있다.


티스토리 블로그 본문 가로 폭 줄이기 반응형 스킨