객체 좌표 구하기, DIV 위치 원하는 좌표로 이동, 애드센스, 위젯, 메뉴, jQuery, 스크립트, 코드

객체 좌표 구하기 – DIV 위치

블로그 운영을 하다보면 가끔 객체( DIV 태그로 감싼 내용 )를 원하는 위치로 쉽게 옮길 수 없을까 고민하게 됩니다.

제 경우에는 애드센스 광고를 글을 발행할 때마다 본문에 직접 삽입하지 않고 본문 내 위치 정보만 남겨 두었다가 필요할 때 미리 삽입해 두었던 좌표 위치로 이동시키기를 원했거든요.

뭐 꼭 애드센스 뿐만 아니라 각종 위젯이라든가 메뉴 등의 객체도 응용하기 나름일 거에요.

설명하기 편하게 저는 애드센스 광고를 예로 든 것 뿐이네요.

본문 내 애드센스 광고를 일일이 직접 삽입해 주는 것이 가장 확실한 방법이긴 한데요.

그런데, 이렇게 하게 되면 문제가 발생했을 경우 상당히 골치 아픈 일이 발생하게 되거든요.

발행글 수가 많지 않을 때야 별다른 문제가 안되겠지만 발행글 수가 적게는 수백개에서 많게는 수천개에 이르게 된다면 발행글마다 일일이 수정하기 벅차게 됩니다.

이럴 때 애드센스 광고를 스킨 내 삽입해 두었다가 각 페이지 본문 내에 미리 삽입해 두었던 위치로 이동시키게 된다면 관리하기가 한결 수월해지게 되는 거죠.

뭐, 대충 스킨 구조가 위와 같다고 했을 때…

글을 쓸 때 애드센스 광고를 위치시키고 싶은 자리에 ‘<div id=”targetPos”></div>’만 살짝 넣어주면 되어요.

요런 간단한 작업만으로 본문 내 위치 정보 셋팅 완료!! ^^

그럼 이제는 ‘<div id=”targetPos”></div>’가 위치한 자리의 좌표를 알아야 되겠죠?

//Y축 좌표 위치 구하기
function getPosY(obj){
    var currentTop = 0;
    if(obj.offsetParent)
        while(1)
        {
            currentTop += obj.offsetTop;
            if(!obj.offsetParent) break;
            obj = obj.offsetParent;
        }
    else if(obj.y) currentTop += obj.y;
    return currentTop;
}
</script>

위 스크립트 코드는 객체의 X축 좌표와 Y축 좌표 위치를 구하는 거에요.

getPosX() 함수와 getPosY() 함수의 ‘obj’에 ‘targetPos’를 넣으면 좌표가 구해집니다.

//X좌표와 Y좌표를 ‘#adsenseCode’에 추가
function adsenseMove()
{
$(“#adsenseCode”).css(“left”, adsenseX + “px”); <== X축 좌표 이동
$(“#adsenseCode”).css(“top”, adsenseY + “px”); <== Y축 좌표 이동
}
$(document).ready(adsenseMove());
</script>

‘#targetPos’와 ‘#adsenseCode’의 스타일 속성값은 각자 상황에 따라서 적당히 넣어주면 되구요.

‘#adsenseCode’의 스타일 속성값에는 ‘position:absolute’를 넣어주면 되어요.

‘#targetPos’ 스타일에 테두리를 지정하지 않았다면 상관없겠지만 만약 테두리를 지정했으면 테두리 두께만큼 X좌표와 Y좌표를 조정해 줘야 해요.

모든 작업을 마치셨다면 포스팅한 아무 페이지나 접속해 보세요.

애드센스 광고가 귀신같이 원하는 위치로 이동해 있는 것을 보실 수 있을 거에요.

그러나, 아직까지 방심은 금물!!

여기까지만 했다면 ‘페이지의 처음 로딩’ 혹은 ‘새로고침’할 때만 정확한 위치로 이동할 뿐이에요.

브라우저 창의 크기가 변하면 그에 따라 위치가 상대적으로 변하는 것이 아니라 최초 구했던 혹은 새로고침 후 구했던 절대 좌표 위치에 그대로 있는 문제가 발생하니 주의해야 해요.

이 문제 해결 방법은 다음 기회에 할께요.

이외에도 좌표를 이용한 이동 방법 말고도 더 간단한 방법이 있긴 합니다.

append() 함수를 이용한 건데요.

자세한 설명은 이전에 포스팅한 아래 링크의 글을 참고하세요.

jQuery 이용한 애드센스 광고 본문 내 원하는 위치 이동하기

뭐, 간단히 말하자면 다음과 같이 하면 되어요.

$(“#targetPos”).append($(“#adsenseCode”))

참 간단하죠?

복잡하게 좌표 구하고, 또한 화면 크기 변화에 따라 상대적으로 위치를 변하게 하는 것 등을 고려할 필요없으니깐요.

그런데, 이것도 문제가 좀 있더라구요.

‘파이어폭스’나 ‘크롬’에서는 모르겠는데 ‘익스플로러11’에서 에러가 발생하더군요.

물론 평범하게 웹서핑 하듯 보면 광고는 정상적으로 노출이 되는데요.

개발자 모드로 들어가서 보면 에러가 뜨면서 디버깅하라고 나오네요.

물론 애드센스 광고만 빼고 작동시키면 아무런 문제가 발생하지 않네요.

뭐, 어느 방법을 사용하든 선택은 각자의 몫이니 특별히 문제가 되지 않는다고 판단된다면 자기가 편한 방법을 쓰면 될 거 같네요.

객체 좌표 구하기 – DIV 위치

답글 남기기 응답 취소