구글 모바일 광고 부트스트랩 스킨에 넣는 방법

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

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

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

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

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

이유는 일단 접고.

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

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

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

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

그럼 코드가 나오겠죠.

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

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

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

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

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

그럼 끝입니다.

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

참고 팁.

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

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

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

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