티스토리 다음(카카오) 애드핏 광고 중앙정렬 방법
카카오애드핏 광고를 본문이나 사이드바에 배치 시 중앙정렬이 되도록 하는 방법 입니다. 먼저 파악해야 할 부분은 애드핏의 선택자 부분 입니다. 일단 태그를 살펴봐야하고 그 다음으로는 클래스명이나 아이디명을 파악해야 합니다. 이 두 가지만 알면 CSS 매소드를 사용하여 중앙 정렬을 진행할 수 있습니다.
애드핏 선택자
먼저 크롬에서 개발자툴을 활용하여 애드핏의 위치를 파악하고 태그 상태를 살펴봅니다.
살펴보니 딱 이 부분이 최상단 루트에 위치한 부모요소 인 듯 싶습니다. ins 태그를 사용 중 이며, 클래스명은 "kakao_ad_area" 라는 것을 확인 할 수 있습니다. 즉 클래스명을 활용하여 CSS 스타일 매소드를 적용시키면 될 것 같습니다.
CSS 중앙정렬
우리가 흔하게 알고 있는 중앙정렬은 다음과 같습니다. text-align: center; 인데 이건 인라인 요소에만 적용 됩니다. 카카오 애드핏의 경우는 inline-block 요소여서 이게 적용될수도 있지만 광고라는게 매일 같은 속성으로 나타나는게 아니기 때문에 가장 확실하게 적용시키기 위해서 반강제적으로 적용되는 방법을 사용할 것 입니다. 절대위치를 수정하는 방법 입니다. 따라서 CSS는 다음과 같이 구성 됩니다.
이렇게 하면 반 강제적으로 무조건 중앙정렬이 됩니다. 거의 공식이니까 그냥 이렇게 알고 계시면 될 것 같습니다. -webkit- 은 웹 브라우저 호환성 때문에 추가해서 넣어놓은 것 입니다. 최신 브라우저를 사용한다면 아마 모두 다 정상적으로 적용이 될 겁니다. 위의 CSS 코드는 첨부파일로 추가해 넣도록 하겠습니다.
카카오 애드핏 중앙정렬.txt이것을 자신의 스킨 CSS에 빈 공간을 확보 후 그대로 붙여넣기 하시면 됩니다. 참고로 CSS 경로는 다음과 같습니다.
관리자 > 꾸미기 > 스킨편집 > HTML편집 > CSS 탭
친효스킨의 경우는 이렇게 붙여넣기를 했습니다. 이 부분은 친효스킨 1.18 버전에 그대로 적용이 될 것 입니다. 애드핏 중앙정렬에 대해서 문의를 주셔서 감사합니다. 덕분에 더욱 발전하는 친효스킨이 되었습니다. 앞으로도 오류나 버그로 의심되는 부분은 언제든지 문의를 주시기 바랍니다. 끝.
