부트스트랩 기반의 스킨들에 적용할 수 있는 팁입니다.

    (Fastboot, 마크쿼리스킨 등)


    부트스트랩은 그리드시스템을 기반으로 하고있습니다.

    간단히 말해서 화면을 세로로 12분할하여 상자를 표현합니다.

    대부분의 부트스트랩 기반 블로그에서는 본문영역이 12중 9, 사이드바가 12중 3을 차지하고 있고, 가장 이상적인 비율입니다.


    그러나 이 비율상에서는 최근 등장한 애드센스 대형광고들을 적용할 수 없습니다.


    본문영역에 적용하기에 너무 큰 광고단위


    사이드바에 적용하기에 너무 큰 광고단위

    몇몇 이용자들은 본문영역을 8로 줄이고, 사이드바 영역을 4로 확장해 가로크기 300px짜리 대형광고를 적용하기도 합니다만, 본문영역이 줄어들면서 가독성이 줄어드는 단점이 있습니다.



    이제부터 소개드릴 수정 방법은 가로 해상도가 1400px이상인 모니터가 대상입니다.

    그리고 당연히 반응형 광고단위를 통해 구현할 것입니다.


    가로 해상도 1400px미만인 기기에서는 이전과 크기가 같지만, 1400px이상에서는 container의 가로크기가 늘어나, 본문영역에 970px광고, 사이드바에 300px광고를 삽입할 수 있게됩니다.



    부트스트랩 CSS 수정하기

    부트스트랩을 그대로 적용중이라면 다음파일을 업로드합니다.


    Fastboot 이용자는 다음 파일을 업로드합니다.


    혹은 부트스트랩 기반 CSS파일을 열어 다음과 같이 수정합니다.

    (압축된 파일 기준으로 설명합니다. 엔터가 많은 일반버전도 동일하게 수정하시면됩니다.)


    .container를 검색해 위치를 찾습니다.


    @media(min-width:1200px 부분을 찾습니다.


    1200px을 1400px로, 그 옆에 1170px을 1370px로 변경한 후 저장, 업로드합니다.



    .


    반응형 광고단위 작성하기

    http://nubiz.tistory.com/570

    위 링크를 클릭해 반응형 고급코드 도우미를 이용합니다.


    물론 직접 수정할 수 있으면 직접 수정하시면됩니다.


    본문광고의 경우 다음과같이 설정합니다.


    사이드바 광고의 경우 다음과 같이 수정합니다.


    적용을 누르면 아랫칸에 완성된 코드가 나오니 복사해서 이용하시면 됩니다.

    (본인의 상황에 맞게 수정해 사용하세요.

    참고로 완성된 코드에서 width를 px단위가 아닌 100%로 설정하면 고급코드도 스마트크기조정 단위처럼 가로가 꽉차게 사용할 수 있습니다.)

    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 토종감자
      2014.09.13 05:13 신고

      너무 유용하게 잘 씁니다.
      훌륭하네요! ^^

    • BlogIcon artautocare
      2014.11.10 20:03 신고


      안녕하세요 ! 고급정보 잘보았습니다.
      fast boot 이용자는 올리신 파일만 업로드 하면 되는것인가요?

      • BlogIcon 뭐하라
        2014.11.10 20:05 신고

        네 업로드하시고 적용이 안되시면 캐시삭제하시고 새로고침 해보세요~

    • BlogIcon artautocare
      2014.11.10 20:09 신고

      캐시를 삭제하라는 말씀이..?? ^^; 초보라..^^;

      • BlogIcon 뭐하라
        2014.11.10 20:23 신고

        이건 브라우저마다 다른데.. 잘 모르시겠으면 안하셔도 됩니다.
        만약 적용이 안된것 처럼 보여도 다른컴퓨터에서는 잘 적용되서 나타나고 있는겁니다

    • BlogIcon 소년처럼.
      2014.11.28 03:28 신고

      와 제가 딱 원했던 게 여기에!!
      감사하게 잘 쓰겠습니당ㅎㅎ

    • BlogIcon 퍼스나콘
      2014.12.11 18:49 신고

      제가 원했던게 여기있네요! 감사합니다
      잘 모르는상태에서 늘린다고 12값을 13으로 싹 다 바꿔봐도 안되던데 여기 이유가 있었군요 ㅠㅠ

티스토리 툴바