티스토리에 등록한 애드핏, 애드센스 광고 배너 크기로 인하여 페이지의 틀이 깨질 때 사용하는 방법입니다.
티스토리의 '블로그 관리 홈'에서 2가지 광고를 연동시켰을 때 사용하는 것입니다.
티스토리와 연동시키지 않고 광고 배너 코드를 직접 소스 페이지에 입력하는 경우는 적용되지 않습니다.
이미지 2개를 예제로 등록하였습니다.
현재 티스토리에 연동된 배너 광고의 크기는 고정형입니다.
웹브라우저의 높이와 폭의 크기를 변동시키면 배너가 있는 문단의 크기에 맞게 변경되지 않습니다. 그래서 왼쪽 캡처 이미지와 같이 페이지의 다른 구역을 침범하여 전체적인 페이지의 디자인이 깨지는 현상이 발생합니다.
다행스러운 것은 구글 애드센스, 카카오 애드핏 배너 광고의 HTML 코드가 "<div>" 태그를 사용하고 "revenue_unit_wrap"이라는 Class 명칭을 동일하게 적용하였습니다.
※ 나중에 변경될 가능성도 있습니다.
같은 이름의 Class를 사용하니까 관련 코드를 CSS 파일에 추가하면 일단 문제는 해결됩니다.
.revenue_unit_wrap {
overflow: auto;
}"overflow: auto;"를 사용하면 배너의 크기가 해당 블록의 크기에 맞게 감춰지지만 스크롤바가 생깁니다.
감춰진 부분을 보려면 스크롤바를 드래그하면 됩니다.
.revenue_unit_wrap {
overflow: hidden;
}"overflow: hidden"을 사용하면 블록의 크기를 넘어서는 배너 부분이 감춰집니다. 스크롤바 생기지 않습니다.
선택하여 사용하세요.
티스토리에서 제공하는 북클럽 스킨의 경우에는 "style.css" 파일에 추가하는 것입니다.
코드를 CSS 파일에 추가할 때,
"@media screen and (max-width:1080px)"
이런 구문은 모바일 기기나 태블릿을 위한 코드이므로 그 윗부분, 모든 기기에 적용되는 코드 모음에 추가해야 합니다.
댓글