아시다시피 부트스트랩은 그리드 시스템을 사용하는 반응형 프레임워크입니다.

제가 제작한 부트스트랩도 반응형으로 작동합니다.

좀더 완벽하기 위해서는 추가적으로 마크업한 것(티스토리 내용물들)은 미디어쿼리를 사용해서 좀더 완벽하게 스타일을 줘야 합니다.

티스토리에서는 모바일로 접속하면 강제적으로 모바일 스킨으로 접속을 하게 됍니다.

그래서 따로 미디어쿼리를 작성하지 않았습니다.


이유는 일단 접고.

구글의 모바일 광고를 만들어서 부트스트랩 스킨에 적용하는 방법을 알려드립니다.

다른 광고도 해당되는 부분이 있으니 부트스트랩 스킨을 사용하는 분들은 눈여겨 보시기 바랍니다.


먼저 모바일용 광고단위를 만들어야 합니다.

아래 그림처럼 300-50짜리 광고를 만듭니다.



그럼 코드가 나오겠죠.

부트스트랩에서는 반응형 클래스를 미리 만들어두었습니다. 이걸 활용해보겠습니다.

http://twitter.github.com/bootstrap/scaffolding.html#responsive 에 가시면 아래 그림처럼 클래스가 나옵니다.


모바일에는 .visible-phone 라는 클래스를 지원합니다.

그럼 모바일의 너비에서만 보이고 다른것(타블릿과 데스크탑)에는 안보인다는 말입니다.



아래처럼 visible-phone 클래스를 가지는 div 를 생성해서 그 안에 구글 모바일 코드를 넣습니다.





그럼 끝입니다.

다로 설정을 않해도 됩니다.


참고 팁.

테스크탑에서 사용하는 구글 광고는 아래처럼 부트스트랩에서 지원하는 .hidden-phone 클래스를 사용하면 더욱 좋습니다.

보시면 아시겠지만 테블릿과 데스트탑에서는 보이고, 모바일에서는 안보입니다.



그러니 아래처럼 클래스를 넣어서 사용하면 됩니다.



이코드 밑에는 바로 모바일용 구글 코드가 있지요.

신고

댓글

  1. 2012.12.04 03:12  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 대문 demun 2012.12.11 21:48 신고  댓글주소  수정/삭제

      저건 부트스트랩에만 해당이 되는겁니다.
      다른분들과 비슷하게 만들수 잇나요???라고 물어보셨는데.....
      글세요.....ㅎㅎㅎㅎㅎ

  2. 2013.02.08 12:33 신고 BlogIcon 그린81  댓글주소  수정/삭제  댓글쓰기

    저두 한번 테스트 해봐야 겠네여
    좋은 정보 감사합니당

    • BlogIcon 대문 demun 2013.02.08 12:40 신고  댓글주소  수정/삭제

      참고로 티스토리는 모바일 스킨을 따로 제공해서...모바일 스킨에는 해당되지 않습니다. 테스트크 탑에서 보여지는것만 가능합니다.

  3. 2014.03.04 13:32 신고 BlogIcon Readiz  댓글주소  수정/삭제  댓글쓰기

    근데 이게 결국 display:none;을 먹이는거라 문제가 안생길지 걱정이네요. 정책상 안보이게 하면 안될텐데..

    • BlogIcon 대문 demun 2014.03.04 23:00 신고  댓글주소  수정/삭제

      display:none 을 해야지요.어차피 모바일에서는 테블릿이나 테스크탑에서 안보여줘야 할것들만 설정하는것이니까요...

    • BlogIcon Readiz 2014.03.05 00:23 신고  댓글주소  수정/삭제

      네 그래서 걱정되는 것이랍니다 ^^;

      허용되지 않는 광고
      다음과 같은 행위는 허용되지 않습니다.
      어떤 경우이든 광고 단위를 숨기는 것(예: display:none)

      class로 숨기는 것도 결국 display:none이니까요.. 반응형이라서 봐줄 수도 있겠다는 생각은 듭니다만 저 약관이 계속 걸리는군요.
      구글 애드센스 도움말에 있는 내용이라 링크걸려고 하는데 주소 링크거니까 차단됐다고 뜨면서 첨부가 안되네요
      구글에서 '애드센스 display none'으로 검색하시면 관련내용이 나옵니다.

    • BlogIcon 대문 demun 2014.03.10 23:03 신고  댓글주소  수정/삭제

      반응형에는 된다는 구문도있는것 같은데....흠.....

      비동기 코드로 사용해야 한다고 하는군요....
      비동기 코드도 완전하지는 않은것 같은데....테스트를 좀 해봐야할것 같네요....

      좋은 정보 감사합니다.