티스토리 본문 넓이 넓히기 방법 설명 #content

블로그의 본문폭을 넓혀보자


블로그 본문폭을 넓히는 방법에 대해서 설명합니다. 티스토리 블로그는 XHTML + CSS 구조로 되어있습니다. CSS 를 조절하면 본문의 넓이 및 높이등도 조절이 가능합니다. 의외로 쉽게 조절이 가능하죠. 보통 스킨을 만들때 이름을 비슷하게 만듭니다. 본문의 경우는 id 를 사용해서 #content 로 보통 쓰죠. 이 부분에 대한 CSS 를 조절하면 본문의 넓이를 넓히거나 줄일 수 있습니다.




예전에 젤리빈님 블로그 본문 넓히는 것에 대해서 설명해주겠다고 했었는데 이번에야 글을 정리해서 올리네요. 동영상도 만든건 좀 되었는데 이제야 공개합니다.

파이어폭스의 부가 기능중 하나인 파이어버그를 이용하면 미리 스킨을 제어해서 수정해 볼 수 있습니다. style.css 에서 #content 부분에 width 를 조절하면 본문을 넓힐 수 있습니다. 만약 #content , #sidebar 가 다른 박스에 다시 묶여 있고 그 박스에도 크기가 지정되어있다면 #content 의 넓이를 조절한만큼 바깥쪽에 있는 박스의 크기도 같이 조절해줘야 합니다.


블로그의 본문폭을 넓혀보자 동영상 설명





사진으로 설명하는 것보다 동영상으로 설명하는것이 보기 더 편하겠죠. #content 의 스타일을 어떻게 조절하는지 유심히 봐주세요.


강좌 동영상 원본 다운로드




이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

s;s s;s

     이미지 업로드

  1. 러드브웹 2010.05.08 08:46 신고

    이거 헤드, 본문쪽에 배경이 이미지로 되어 있으면 폭파되는디 우쩔겨~~
    너가 AS 다해주는거냐? ㅋㅋ

    perm. |  mod/del. |  reply.
  2. 데니엘 2010.05.08 08:53 신고

    좋은 글 감사합니다 ^^

    perm. |  mod/del. |  reply.
  3. 나비오 2010.05.08 11:07 신고

    원하던 정보였습니다.
    그런데 그 외에 수정해야 될 부분이 생각보다는 많네요
    하기는 해야 할 텐데
    날 잡아서 해야 할 것 같습니다.

    감사합니다. 즐거운 하루 되세요

    perm. |  mod/del. |  reply.
  4. killerich 2010.05.08 11:27 신고

    아...저도 본문 사이즈 조금 손 보고 싶었는데;;
    그냥 포기했어요-,.-;;
    포스팅 하기도 바빠서..;;ㅎㅎㅎ;;
    씨디맨님 ~ 행복한 주말 보내세요^^

    perm. |  mod/del. |  reply.
  5. 웅이아뿌 2010.05.08 11:46 신고

    ㅎㅎㅎ
    항상 블로거들을 위한 좋은 정보 감사합니다.
    좋은 주말 되세요 ~

    perm. |  mod/del. |  reply.
  6. LiveREX 2010.05.08 16:44 신고

    크~ 역시 알토란 팁들 ㅎㅎ

    perm. |  mod/del. |  reply.
  7. 메이비 2010.05.08 22:41 신고

    동영상 강좌에 소스 공개까지!
    대단하고, 훌륭하시네요^^

    perm. |  mod/del. |  reply.
  8. Zorro 2010.05.09 05:20 신고

    이번에 스킨 바꾸면서 가로폭을 대폭 넓혀봤는데..
    이것저것 바뀌어서 정신이 엄네요;;

    perm. |  mod/del. |  reply.
  9. 젤리빈 2010.05.09 14:01 신고

    강의 감사합니다!! 동영상도 쭉 보긴했는데 이따 제 스킨 소스 열어놓고 한번 더 돌려봐야겠어요 ㅎㅎ 폭조절에 성공하면 보고하러 오겠습니다!!!

    + 이건 다른 질문인데 파이어폭스 어렵지않나요? 크롬에선 열리지 않는 페이지가 있어서 파폭으로 갈아타려니 복잡한 것 같더라구요. 옮기려니 왜이리 고민되는지ㅠㅠ

    perm. |  mod/del. |  reply.
  10. proof9 2010.08.04 23:09 신고

    감사합니다.

    동영상 강좌 덕분에 제 본문의 답답한 가로 넓이를 넓게 사용하고 있습니다.

    가로가 1200이 필요하거든요.

    너무 감사드립니다.!!!!

    perm. |  mod/del. |  reply.
  11. 2010.10.01 19:44

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.10.01 21:51 신고

      본문 내용중 파이어버그 라는 글자에 링크가 걸려있습니다. 그글을 먼저 보셔야 이해가 되실듯해요. ^^;

      perm. |  mod/del. | 
  12. 길탁 2010.10.01 22:32 신고

    저기..
    파이어버그를 어떻개 실행 시키나요?..

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.10.01 23:45 신고

      파이어폭스의 도구 > 부가기능 에서 검색에서 "firebug" 를 검색 후 설치해주시면 됩니다. ^^

      perm. |  mod/del. | 
    • 길탁 2010.10.02 11:50 신고

      그럼요 파이어폭스는 어떻개 다운받죠?.ㅠㅠ

      perm. |  mod/del. | 
    • 씨디맨 2010.10.02 12:32 신고

      검색사이트에서

      파이어폭스 < 라고 검색하면 한글판 나옵니다. 설치하시면 됩니다.

      perm. |  mod/del. | 
  13. ItsME 2010.11.06 23:54 신고

    티스토리 처음 시작해서 본문 늘리기 때문에 무척 고심했는데...덕분에 쉽게 해결했습니다. 감사합니다.^^

    perm. |  mod/del. |  reply.
  14. 김정하 2011.09.28 16:49 신고

    정말 가로 1200이 너무 필요한데.. 아무리 뒤져보고 해도 모르겠어서
    마지막으로 들른곳이 여기네요 ㅜㅜ 지금 파이어버그 설치중인데 꼭 성공했음 좋겠어요..
    이해가 안되면 물어봐도 되죠? ㅠ_ㅠ

    perm. |  mod/del. |  reply.
  15. 하남댁 2011.11.06 00:12 신고

    좋은 내용 잘 봤습니다. ^^

    perm. |  mod/del. |  reply.
  16. newsters 2012.02.01 11:27 신고

    저는 본문 넓이를 줄이려고 하는데 본문크기는 줄어드나 글씨와 이미지가 모두 짤리네요ㅜ 씨디맨님의 동영상에서 보듯이 본문 넓이를 줄이면 글자도 같이 움직이면서 줄어들게 되는데 전 글자와 이미지가 아예 짤려버리네요ㅜ 해결방법이 없을까요...ㅜ

    perm. |  mod/del. |  reply.
    • 씨디맨 2012.02.01 11:31 신고

      블로그에 들어가서 제가 .article 에 width 를 줘서 줄여봤는데요. 글자는 잘 줄어드네요. 이미지는 줄어들게 하려면 img width 를 일괄적으로 수정해줘야하구요. ^^

      perm. |  mod/del. | 
  17. ㅇㅇ 2013.01.16 13:41 신고


    사진 크기 1200으로 할려는데 이것은 어떻게 해야되는지 자세히 알 수 있을까요..
    넓이는 어떻게 넓힐 수 있을 거 같은데 넓혀도 사진은 잘리더라구요ㅜ.ㅜ

    perm. |  mod/del. |  reply.