[CookBook] 웹 페이지 공간 다루기

Chapter 13. 웹 페이지 공간 다루기

1. 웹 페이지 영역의 크기

"현재 웹페이지의 창의 높이와 너비를 알고 싶습니다."

표준 브라우저의 경우 창의 뷰포트 영역을 알아내기 위해  window 객체 속성인 innerWidth, innerHeight  사용한다.(하지만 이때 스크롤 영역의 크기는 포함 되지 않는다.)

[- 표준 브라우저의 스크롤 영역은 window 객체 속성인 .scrollMaxX, .scrollMaxY로 알아낼 수 있다.]

  

또한, IE 브라우저의 경우 document(.documentElement, .body) 객체 속성인 clientWidth, clientHeight를 통해 알아낸다.(뷰포트 영역)

Viewport 란? 

데스크탑, 모바일 등의 모든 장치에서 Display 요소가 표현되는 영역을 말한다. 즉, 브라우저의 경우 컨텐츠가 사용자에게 표시되는 영역으로 해석할 수 있다.

 

  

 

참고 사이트:

자바스크립트 Dimension

http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Dimension-Screen-Viewport-Scroll-Element-Mouse-Event

DOCTYPE 쿼크모드(관용모드)란?

http://mohwaproject.tistory.com/entry/Quirks-Mode%EA%B4%80%EC%9A%A9%EB%AA%A8%EB%93%9C%EB%9E%80

window.onload = function () {
    function doc() {

        var page = {

            w: top.window.scrollMaxX ? top.window.innerWidth + top.window.scrollMaxX : top.document.documentElement.scrollWidth || top.document.body.scrollWidth || 0,
            h: top.window.scrollMaxY ? top.window.innerHeight + top.window.scrollMaxY : top.document.documentElement.scrollHeight || top.document.body.scrollHeight || 0
        },

        win = {

            w: top.window.innerWidth ? top.window.innerWidth : top.document.documentElement.clientWidth || top.document.body.clientWidth || 0,
            h: top.window.innerHeight ? top.window.innerHeight : top.document.documentElement.clientHeight || top.document.body.clientHeight || 0
        };

        return {
            page: page,
            win: win
        };
    };

    console.log('page: ' + doc().page.w);
    console.log('page: ' + doc().page.h);
    // viewport
    console.log('win: ' + doc().win.w);
    console.log('win: ' + doc().win.h);
}

2. 요소의 크기 측정하기

W3C CSSOM View 모듈로 표준화된 getBoundingClientRect 메서드는 "ClientRect" 객체(실제 구현 시 TextRectangle를 반환)를 반환한다.

또한, 이 객체는 요소의 "경계 사각형"에 대한 여러 정보가 담겨 있으며, 대부분의(브라우저에 따른 차이) 경우 .top, .bottom, .right, .left 네 개의 속성을 포함하며, (테스트 결과 표준 브라우저의 경우 모든 속성을 지원하며, IE의 경우 .width, .height를 제외한 두 가지 속성만 지원한다.) 반환값으로 요소에 적용된 padding과 border 영역의 크기까지 포함된다.

        

"테스트 결과 IE(IE8 기준)의 경우(표준 브라우저 제외) "test2" 요소에 포함되지 말아야할 "test" 요소의 padding-top 수치(20px)까지 더해지는 버그가 존재했다." 즉, "test2" 요소의 반환값으로 "63px"이 반환(IE8 기준)되었다.

window.onload = function () {

    function elemDimension(elem) {

        if (!elem) return null;


        var rect = elem.getBoundingClientRect && elem.getBoundingClientRect();

        return {
            h: rect.height || rect.bottom,
            x: rect.left,
            y: rect.top
        }
    }

    alert(elemDimension(document.getElementById('test')).h);
    alert(elemDimension(document.getElementById('test2')).x);
    alert(elemDimension(document.getElementById('test2')).y);
}

3. 페이지 오버레이 추가

아래 코드와 같이 CSS를 활용해 웹 페이지 전체를 투명 레이어로 뒤덮어 구현한다.

window.onload = function () {
            
    var overlay = document.createElement('div');
    overlay.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:.7;filter: alpha(opacity=70);z-index:9998;';
    document.body.appendChild(overlay);


    var div = document.createElement('div');
    div.style.cssText = 'position:absolute;z-index:9999';

    var img = document.createElement('img');
    img.src = 'http://static.naver.net/newscast/2012/1024/1425581178481957.jpg';

    img.onload = function () {
        div.appendChild(img);
        document.body.appendChild(div);
    }
}