친절한효자손 취미생활

카카오애드핏 광고를 본문이나 사이드바에 배치 시 중앙정렬이 되도록 하는 방법 입니다. 먼저 파악해야 할 부분은 애드핏의 선택자 부분 입니다. 일단 태그를 살펴봐야하고 그 다음으로는 클래스명이나 아이디명을 파악해야 합니다. 이 두 가지만 알면 CSS 매소드를 사용하여 중앙 정렬을 진행할 수 있습니다.


애드핏 선택자

먼저 크롬에서 개발자툴을 활용하여 애드핏의 위치를 파악하고 태그 상태를 살펴봅니다.


살펴보니 딱 이 부분이 최상단 루트에 위치한 부모요소 인 듯 싶습니다. ins 태그를 사용 중 이며, 클래스명은 "kakao_ad_area" 라는 것을 확인 할 수 있습니다. 즉 클래스명을 활용하여 CSS 스타일 매소드를 적용시키면 될 것 같습니다.


CSS 중앙정렬

우리가 흔하게 알고 있는 중앙정렬은 다음과 같습니다. text-align: center; 인데 이건 인라인 요소에만 적용 됩니다. 카카오 애드핏의 경우는 inline-block 요소여서 이게 적용될수도 있지만 광고라는게 매일 같은 속성으로 나타나는게 아니기 때문에 가장 확실하게 적용시키기 위해서 반강제적으로 적용되는 방법을 사용할 것 입니다. 절대위치를 수정하는 방법 입니다. 따라서 CSS는 다음과 같이 구성 됩니다.


.kakao_ad_area { position: relative; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); }

이렇게 하면 반 강제적으로 무조건 중앙정렬이 됩니다. 거의 공식이니까 그냥 이렇게 알고 계시면 될 것 같습니다. -webkit- 은 웹 브라우저 호환성 때문에 추가해서 넣어놓은 것 입니다. 최신 브라우저를 사용한다면 아마 모두 다 정상적으로 적용이 될 겁니다. 위의 CSS 코드는 첨부파일로 추가해 넣도록 하겠습니다.


카카오 애드핏 중앙정렬.txt


이것을 자신의 스킨 CSS에 빈 공간을 확보 후 그대로 붙여넣기 하시면 됩니다. 참고로 CSS 경로는 다음과 같습니다.


관리자 > 꾸미기 > 스킨편집 > HTML편집 > CSS 탭


친효스킨의 경우는 이렇게 붙여넣기를 했습니다. 이 부분은 친효스킨 1.18 버전에 그대로 적용이 될 것 입니다. 애드핏 중앙정렬에 대해서 문의를 주셔서 감사합니다. 덕분에 더욱 발전하는 친효스킨이 되었습니다. 앞으로도 오류나 버그로 의심되는 부분은 언제든지 문의를 주시기 바랍니다. 끝.




공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. Favicon of https://kyumdoctor.co.kr Nck
    항상 글 잘보구 따라하고 있습니다. 감사합니다.
    혹시 모바일에서 카카오애드핏광고가 좀 길게 나오던데 위에 글로 하면 모바일도 잘나오게 되는걸까요?ㅠ
    2020.07.23 13:00 신고