본문 바로가기

Dev.FrontEnd/JavaScript

[여섯번째] 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
-> 사용자들이 어떠한 형태의 모니터를 사용하고 있는가

-> 그 웹 페이지의 폭을 설정해줘야하기때문
>> 반응형 웹을 설계할 때 사용될 것 같다.



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