[여섯번째] JavaScript - Web Browser / 문서의 기하학적 특성

문서의 기하학적 특성

1. 요소들간의 관계

여러 가지 Element들의 크기 , 위치 ,

.getBoundingClientRect() 메서드

top : 최상단으로부터 문서의 시작점과의 거리

left : 최좌측으로부터 문서의 시작점과의 거리

height : 문서의 엘리먼트의 세로 길이

width : 문서의 엘리먼트의 가로 길이 = padding + border (margin값을 포함하지 않는다.)

right : 최좌측으로부터 문서의 끝나는 지점까지의 거리

bottom : 최상단으로부터 문서의 끝나는 지점까지의 거리

ClientWidth ClientHeight : 테두리를 제외한 값

offsetParent : 위치 측정에 기준이 되는 객체를 출력

cf) CSS의 박스 모델을 되돌아보면 이해가 쉽다.

2. 뷰포트(Viewport)

문서는 브라우저보다 더 크다 -> 스크롤이 생긴다 -> 문서의 일부분만 표현하게 된다.

-> 사용자에게 보여지는 영역이 생겨난다. -> 그 영역을 뷰포트

뷰포트의 크기 < 문서의 크기

뷰포트의 좌표 <> 문서의 좌표 ( '<>'는 다르다는 표현입니다.)

물론 같을 수도 있다. 하지만 같다고 생각하는 우를 범하지 말자!

setInterval 메서드

$(document).ready(function () {

    $('img').css('width', 250);

    setInterval(function (){

    $('img').first().appendTo('body');

    }, 2000);

     });

=> img 태그로 로드되는 이미지들의 크기를 width 250으로 설정하고 2초의 시간 간격으로 이미지들의 위치를 body 태그 상에서 맨 앞으로 이동시킨다.

pageYOffset = 스크롤한 정도

getBoundingClientRect().top = 뷰포트의 최상단에서부터 body객체까지의 거리 = viewport의 좌표

문서의 좌표 = window.pageYOffset + getBoundingClientRect().top 이다. 왠진 설명 안하겠다.

3. 스크롤제어

window.scrollTo(x,y)

y만큼 스크롤을 움직여라

>> TOP버튼을 클릭했을때 발생하는 이벤트로 사용할 수 있을 것 같다!(이벤트는 다음 포스트에서 다룬다.)

4. 스크린의 크기

뷰포트의 크기

window.innerwidth

window.innerheight

웹브라우저를 사용하는 사용자의 모니터의 크기

screen.width

screen.height

-> 사용자들이 어떠한 형태의 모니터를 사용하고 있는가

-> 그 웹 페이지의 폭을 설정해줘야하기때문

>> 반응형 웹을 설계할 때 사용될 것 같다.

생활코딩의 이고잉님 감사합니다^^

-..-