사이드바와 본문 크기/위치 조절하기 (Bootstrap 기반 스킨)

Posted by Readiz
2014.04.05 15:53 반응형 티스토리/FastBoot


사이드바와 본문 입맛대로 수정하기




  스킨 커스텀 관련해서 사이드바 크기 조절과 위치조절에 관해 질문하시는 분들이 많아 따로 포스팅합니다. Bootstrap은 기본적으로 한 줄의 Grid의 크기를 12로 계산하고 있습니다. 현재 FastBoot에서 적용된 본문과 사이드바 폭의 비율은 9:3입니다. 이를 변경하시려면 8:4, 10:2등으로 변경하시면 되는데, 물론 본문 폭의 크기에 영향을 받습니다. 사이드바 크기를 늘리게 되면 본문 폭이 줄어들고, 사이드바 크기를 줄이게 되면 본문 폭이 늘어나죠. 이것은 Bootstrap의 스펙이라 아예 전체를 유동적으로 하거나 구조를 바꿔버리지 않는이상 어쩔 수 없는 부분입니다. 아래코드는 FastBoot의 코드입니다만 Bootstrap기반 스킨의 대부분이 아마 아래처럼 구조가 되어 있을 것입니다.


<!-- FastBoot v1.5.1 by Readiz Responsive Tistory Skin http://readiz.com/ Open sources are copyright of their respective owners. --> ...생략... <s_t3> <div class="container" id="main"> <!--F 빅 사이즈 좌우 버튼 (1400px 이상 좌우 배치) --> <div id="outer_btn_left" class="hidden"></div> <div id="outer_btn_right" class="hidden"></div> <div class="row"> <div id="leftContent" class="col-md-9"> ...생략... </div> <!--F / content --> </div> <!-- /col-md-9 --> <aside><div id="sidebar" class="sidebar col-md-3"> <s_sidebar> <s_sidebar_element> <!-- 블로그 설명 모듈 --> <div class="panel panel-default">


사이드바와 본문 폭 조절하기

  class="col-md-9"과 class="col-md-3"으로 되어 있는 부분이 있습니다. 이 부분을 변경하시면 되는데 앞서 말씀드린 것처럼 총 합이 12가 되게 하시면 됩니다. 만약에 8:4의 비율로 하고 싶다면 col-md-8과 col-md-4로 하시면 되겠죠. 아래 스크린샷은 실제로 본문을 8, 사이드바를 4로 하신 FastBoot을 적용한 onasaju님의 블로그 모습입니다.



http://onasaju.tistory.com/


 


사이드바와 본문 좌우 위치 바꾸기


  만약 사이드바를 왼쪽에 놓고 싶다면? 간단합니다. Bootstrap의 class중에 col-md-pull-xx와 col-md-push-xx속성이 있기 때문이죠. 둘은 각각 당기다/밀다는 듯이있는데요, 사이드바를 당기고, 본문을 밀면 좌우 위치가 바뀌겠죠? 아래처럼 말입니다.





  만약에 기본값인 col-md-9과 col-md-3을 사용하고 계신다면, 본문은 3만큼 밀고 사이드바는 9만큼 땡겨와야 할 것입니다. 이 경우 class를 "col-md-9 col-md-push-3"과 "col-md-3 col-md-pull-9" 으로 해주시면 됩니다. class는 여러개의 값을 가질 수 있으므로 col-md-push와 col-md-pull 속성을 추가한 것입니다.


  만약 위에서 수정한 것처럼 col-md-8과 col-md-4를 사용한다면 어떻게 해야할까요? 간단합니다. "col-md-8 col-md-push-4"과 "col-md-4 col-md-pull-8" 로 해주시면 되겠죠. 크기만큼 밀고 당기면 된다고 말씀드리는 것입니다.


  Bootstrap으로 스킨을 제작하면 이렇게 큰 틀을 쉽게 바꿀 수 있다는게 장점이겠죠. 선호하는 방식에 따라 사이드바와 본문 크기와 배치를 한번 잘 바꿔보시기 바랍니다. ^^

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 이전 댓글 더보기
  2. 근데 좌우 여백의 크기를 줄일수는 없을까요? 여백이 줄지 않으니깐 합이 12를 넘어가니 사이드바가 아래로 내려가더라구요.
    • 글에 설명했지만 한 줄이 12입니다. 12가 넘어가면 당연히 한줄 더 내려갑니다.. 이건 여백과 상관없는 문제에요.
      이 스킨은 좌우 폭이 어느정도 고정된 스킨입니다. Bootstrap에서 지원하는 container를 쓰고 있기 때문에 그런거구요, 이에 관해서는 http://getbootstrap.com/ 참조바랍니다. CSS에 media-query를 이해하셔야 완벽하게 수정하실 수 있습니다. 이 부분은 따로 공부하시기 바랍니다. 제가 간단하게 답변드릴 만한 것이 아니기에 사이트 알려드리니 참고하시길..

      커스텀 관련해서는 다 알려드리고 싶지만 폭과 관련해서의 답변은 일단은 이정도로만 하겠습니다. 더 이상 얘기하면 이건 bootstrap/css강좌가 되어버리기 때문에..
  3. 앗 제 블로그가 소개 되었네요 ^^ 감사합니다. 이틀동안 블로그 접속을 못해서 얼마나 손이 근질근질 하던지 ㅎㅎㅎ 내일부터 다시 블로깅 열심히 해야겠어요 ^^ ....
  4. 사이드바요 1다에서6단까지있는걸로 알고있습니다.
    사이드바변경 스킨배포해주세요
    • 수정이 간단하지가 않습니다.. ^^;
      제가 전업 디자이너도 아니고 시간 쪼개서 스킨을 제작하고 있는 평범한 대학생을 뿐입니다.
      그래서 현재 만들고 있는 FastBoot 스킨의 바이레이션은 솔직히 말하면 배포하기가 부담되는 상황인 것도 맞구요.
      스킨 제작자 입장에서 이런 말 하면 좀 그렇지만 1단형 스킨을 지금 꼭 바로 쓰고 싶으시다면 다른 스킨도 많으니까요.. ^^; 지금으로써는 막바로 원하시는 스킨을 배포해드리기는 어렵습니다.

      나중에 1단형으로 수정 배포 계획이 없는 것은 아닙니다만 현재로서는 그렇다고 말씀드리는 겁니다.
    • 2014.04.05 16:38
    비밀댓글입니다
    • 뒤에 사이드바/본문 위치 변경하는 것 수정해서 올렸습니다. 새로 글 올리기에는 그렇게 큰 문제는 아니어서 수정으로 추가하였습니다.
    • ㅎㅎ
      시선이 Z형이랑 F형이 있어서 왼쪽사이드 사용도 하는거같아요
      저도 왼쪽에 사이드 사용중이구요
      음 ;;
      애드센스에 테두리 해주면 정책위반아니에요 ?
    • 저도 하기 전에 약관을 확인해봤는데 테두리 사용이 과도하게 눈에 띄게 하거나, 광고임을 모르게할 목적으로, 클릭 유도를 하게 되면 위반이더군요. 본 블로그에서는 광고라고 명시를 해두었으므로 위반으로 판단하기에는 무리가 있을 것입니다. ^^ 여러가지 테스트 중이라서 한번 넣어봤어요.
    • 마크쿼리님 스킨도 업데이트됏는데
      모바일부분에서 상단메뉴가 옆으로 밀리게
      Offcanvas 이거처럼 만드셧든데요 -0-
    • 기획은 아마 제가 먼저 한 것 같은데.. 사실 색다른 기능도 아니라서요 ^^;
      모바일 인터페이스를 기획한다면 한번 쯤 생각해볼 기능이죠..
      Ungki, H님의 마크쿼리 스킨은 저도 보면서 영감을 많이 얻고 있는 스킨이라서 감사할 따름입니다. 덕분에 제가 빨리 팔로잉 할 수 있었기도 하구요.. ㅎㅎ
      FastBoot이 ie8 문제 Fix에 Ungki, H님이 만든 ie.css가 도움이 많이 되었었습니다. 최근글 목록에 RSS를 쓰신 것을 보고 저는 RSS에서 이미지만 가져오는 방식으로 이번에 최근글 목록을 내보내는 방식을 구현하였구요.
      이외에도 Locator는 엑수시아님의 도움을 받았고, 갤러리형 구현에는 yongzz님의 ygal의 도움을 많이 받았습니다. 또한 최초 스킨 디자인에는 wincomi님의 스킨(현재는 활동 안하시는 것 같지만..)에 영감을 많이 받았구요.
      이래저래 많은 분들의 도움 속에 탄생한 스킨이 FastBoot입니다. 제 스킨이 거꾸로 다른 스킨에 영향을 미치고 싶은 것도 사실 제 요즘 속내이기도 해요.. ㅎㅎ

      그러고보니 도움 받은 것들에 대해 주석처리만 했지 따로 포스팅을 하지는 않았네요. 어떤 분들에게 도움을 받았는지 한번 포스팅을 해봐야겠습니다.
  5. 아하 이렇게 바꾸는 거였군요 ㅎㅎ 개인적으로 왼쪽 사이드바를 좋아하는데 감사합니다
    • 스킨 제작하면서 알게된 것인데, 우측 선호하는 분들이 많지만 좌측 선호하는 분들도 계시더라구요 ^^;
  6. col-md- * 여기 숫자 들어가는 부분에 3.5 이렇게 소수점 못 들어가나요?

    아니면 좀더 세밀하게 나눌 수는 없나요?

    제가 300 넓이로 맞추고 싶은데, 스킨 전체 넓이 넓혀도 애매하네요..

    9:3 하면 사이드바가 너무 좁고, 8:4하면 사이드바가 조금 넓고.. ㅠㅠ
    • 빈응형이라 사이드바 크기는 창크기에 따라 변하기 때문에 유의미한 의미는 없습니다.. 클라이언트에 따라 언제든 줄어드는 것이 사이드바 크기에요.
      이 문제는 유동형 그리드이기 때문에 스킨의 특성이라고 생각하셔야 할 것 같습니다.
  7. 와우~ 초보에게는 좀 힘들긴 했지만 실수하면서도 성공하니까 뿌듯하네요..
    도움이 많이 되었습니다.
  8. 안녕하세요.
    질문에 앞서 일단 스킨 정말 좋아요..정말 감사합니다!! 좋으신 일 하시는거 같아요!!ㅎㅎ
    그리고 스킨 적용하는 중에 궁금한점이 있는데요. 메인화면도 갤러리 형태의 화면으로 꾸미고 싶은데..
    어떻게 해야될까요?ㅜㅜ
    • 본 블로그의 티에디션 반응형으로 꾸미기 강좌 4부작 참조하시면 될 것 같습니다.. ^^
  9. Grid의 크기를 12로 계산되어 있다고 설명되었는데...

    티에디션 갯수를 하나로만 설정이 가능한가요?

    col-md-12 col-sm-0 요렇게 하니까... 되는데 3개 이상 줄어들지가 안았습니다.
    • 음.. 그냥 col-md-12만 넣으셔서 적용이 안되나요?
      블로그 가보니까 하나로 잘 나오는 듯 한데요.
      한 줄에 더 넣으시는걸 말씀하시는 거면
      col-md-2 처럼 더 작은 숫자를 넣으셔야 합니다.
    • 초코땡
    • 2014.06.09 02:45 신고
    안녕하세요 ^^

    1. 제 본문 밑에 작은 공간이 생겨버렸는데요... 그 사이에 위젯을 넣고 하였었는데요
    공간 갭을 줄이는 방법을 알려주셨으면 합니다,.

    2.그리고 본문 글을 작성하면 우측 에 세로로 빈공간이 발생하는데요..
    이부분이

    .articles{width:100%;position:relative;max-width:658px;height:auto;margin:15px 0 30px 0;float:left;border:1px solid #e0e0e0;background:#fff}
    .articles li .post-thumbnail{width:658px;height:300px;overflow:hidden}

    .article-container{width:618px;height:auto;margin:-60px 20px 0 20px;position:relative;background:#fff;-ms-box-shadow:0 -22px 40px -30px #000;-moz-box-shadow:0 -22px 40px -30px #000;-o-box-shadow:0 -22px 40px -30px #000;-webkit-box-shadow:0 -22px 40px -30px #000;box-shadow:0 -22px 40px -30px #000}

    article 과 container 가 width 길이가 달라서 그런건지요?

    꼬옥 답변 부탁드립니다

    감사합니다.
    • 부트스트랩인데 고정폭으로 하셨나요? 이 글은 부트스트랩 관련 글입니다. 부트스트랩의 경우 고정폭으로 하면 안됩니다.. 유동형이기 때문이죠.
  10. col-md-12 를 나눠먹기 하는 구조라고 하셨는데,
    전체를 15로 설정하고 해도 안되더라고요,
    container 부분을 늘리는 방법은 없을까요???
    • .container의 폭을 넓히면 되긴 합니다만, 이게 참 힘드네요.. ㅎㅎ
      한번 다뤄보기는 하겠습니다. ^^
  11. Readiz님, 배포 받아서 잘 쓰고있고 또 수정하려고 노력중입니다 ㅎ
    다름이 아니라 제가 본문과 사이드바를 10:2로 수정했는데
    수정 후 사이드바의 글씨들이 너무 크더라구요^^;; (폰트크기가 커진게 아니라 사이드바의 사이즈가 줄면서 폰트크기를 줄여야겠다고 생각했습니다)
    이 부분은 수정할 방법이 있을까요?
  12. 사이드바 위치 바꾸는거 해보았는데요.
    본문 글 하나 하나에선 잘 되는데
    메인화면에 사이드바를 나오게 해놨더니
    메인화면에서만 왼편에 겹쳐서 나오네요. ㅠ.ㅠ
    그래서 안하는걸로... ^^*
  13. 비율을 8:4로 변경했더니
    포스트 내용 보는 화면에서는 괜찮은데
    메인화면에서만, 우측 사이드바가 밑으로 내려가 버립니다...

    메인에서도 사이드바를 나타내도록 수정했는데(포스팅하신 대로)
    그것 때문일까요?
    • 초보자
    • 2014.09.07 21:51 신고
    안녕하세요. 정말 예쁘고 가벼운 반응형디자인 스킨을 찾게 되서 정말 기뻤습니다. 지금 하나씩 적용해보면서 스킨을 수정하는 중인데 반응형은 처음 수정해봐서 잘 모르는 것이 많습니다.

    전체크기가 1400px까지 커지는 듯 한데 전 가장 큰 스크린에서도 총 넓이는 950정도로 고정을 하고 싶어요. 본문은 630, 사이드바는 300정도로 고정하고 싶은데 ㅠㅠ 전체 폭 자체를 줄이는 방법은 어디를 수정해야하는지 가르쳐주실 수 있나요? 이 글대로 9:3 -> 8:4로 본문과 사이드바 비율은 적절하게 맞췄는데 전체적인 본문 폭 자체는 어디서 수정하는지 가르쳐주세요ㅠㅠ
  14. 사이드바 영역을 늘리고싶은 분들이 꽤 많네요.
    Container 크기를 늘리는 방법 트랙백 걸고갑니다~
      • 초보자
      • 2014.09.11 12:48 신고
      컨테이너 크기 변경방법에 대해서 알고 싶었는데 트래백타고 가서 참고했습니다ㅠㅠ 감사합니다. 전 확대가 아닌 축소하는 방법으로 수정해보면 될 것 같네요ㅠㅠ
  15. 제가 fastboot 스킨을 쓰다가 사이드바를 넓히고 싶어서 방법을 찾은 결과를 포스팅했습니다.
    혹시나 사이드바 넓히고 싶으신분들은 참고하세요..
    http://nightsky21.tistory.com/153
  16. col-md-push-3와 col-md-pull-9 을 이용해서 바꿀 수 있다니 ㅎ
    덕분에 쉽게 수정했습니다. 고맙습니다.
    • 2015.11.06 03:53
    비밀댓글입니다
  17. 메인에서 사이드바를 나타나게 한상태에서는 안되네요. ㅠ 우측사이드바가 전부 밑으로 내려가 버립니다. 방법좀 알려주시면 감사드립니다 꾸벅~

티스토리 툴바