티스토리 뷰

Frontend/JavaScript

[생활코딩][웹브라우저JS] - 문서의 기하학적 특성

blueprint-12 2022. 2. 12. 00:16

😏이번 시간에는 요소들의 위치와 크기를 알아내는 방법을 배운다.😏

*기하학: 도형 및 공간의 성질에 대하여 연구하는 학문

 

요소의 크기와 위치

우선 엘리먼트의 크기를 알아내는 방법을 살펴보자. 

  • Element.getBoundingClientRect // 엘리먼트의 크기(보더 + 패딩 + 콘텐트 NOT margin)와 위치를 알고 싶을 때 사용하는 메소드
    • 영어작명 그대로 클라이언트 직사각형 바운딩을 가져온다 라는 의미 
    • EI 에서는 width 와 height의 값을 지원하지 않는다. 근데 EI는 죽어벌임
    • 위치를 알아낼 때 기준점이 되는 부모는 body 태그(문맥상 문서) 입니다.(엘리먼트의 위치를 의미하는 top, right의 값을 통해서)

엘리먼트가 중첩되어 있을 경우? 

  • 엘리먼트가 중첩되어 있더라도 기준점이 되는 부모 엘리먼트는 body태그입니다. 
  • 부모 엘리먼트를 명시적으로 확인할 수 있는 방법 - offsetParent 속성을 호출하기
    • HTMLElement.offsetParent - read-only property
<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>엘레멘트의 크기와 위치 알아내기</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      div {
        border: 50px solid #1065e6;
        padding: 50px;
        margin: 50px;
      }
      #target {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>
      <div id="target">Coding</div>
    </div>
    <script>
      const t = document.getElementById("target");
      console.log(t.getBoundingClientRect()); //output: DOMRect 객체 반환
      console.log(t.offsetParent); //output: body 태그 반환
    </script>
  </body>
</html>​
  • 부모엘리먼트를 명시적으로 확인한다는 의미는 부모 엘리먼트가 body태그가 아닌 경우도 있다는 소리 
    • 만약 CSS position의 값이 static인 td,th,table 엘리먼트가 있다면 해당 엘리먼트가 offsetParent가 됩니다. 
  • 테두리(border)를 제외한 엘리먼트의 크기를 알고 싶다면 ClientWidth, ClientHeight 를 사용하면 됩니다. 
     console.log(t.clientHeight, t.clientWidth); //output: 200 200​

 

뷰포트(Viewport)

요소의 위치를 생각할 때는 좀 더 복잡해진다. 문서가 브라우저의 크기보다 큰 경우는 스크롤이 만들어지는데 스크롤에 따라서 위치의 값이 달라지기 때문이다. 이해를 위해서 viewport에 대한 이해가 선행돼야 한다.

 

▶viewport의 좌표

뷰포트는 문서의 내용 중 사용자에게 보여주는 영역을 의미한다. 이에 따라서 문서의 좌표가 있고 뷰포트의 좌표가 있다. 우리가 위에서 살펴본 getBoundingClientRect는 viewport의 좌표를 사용한다. ->getBoundingClientRect()가 body태그를 기준으로부터 엘리먼트까지의 거리를 알려준다고 했으나 사실상 body태그가 기준이 아니라 viewport가 기준이 된다. 

 

아래의 예제는 1초에 한번씩 getBoundingClientRect 의 top속성과 window.pageYOffset의 값이 출력된다.

*setInterval(func, delay) // delay는 optional 이고 밀리세컨드 단위 1second = 1000milliseconds

<head>
<style>
      body {
        padding: 0;
        margin: 0;
      }
      div {
        border: 50px solid #1065e6;
        padding: 50px;
        margin: 50px;
      }
      #target {
        width: 100px;
        height: 2000px;
      }
    </style>
</head>
<body>
    <div>
      <div id="target">Coding</div>
    </div>

    <script>
      const t = document.getElementById("target");
      //1초마다 익명함수를 실행한다. 스크롤하면서 화면을 이동할 떄, getBoundingClientRect().top 과 
      //pageYOffset 을 비교 둘 다 Y축의 값을 나타낸다. 위부터 해당 엘리먼트까지의 거리 
      setInterval(function () {
        console.log(
          "getBoundingClientRect : ",
          t.getBoundingClientRect().top,
          "pageYOffset:",
          window.pageYOffset
        );
      }, 1000);
    </script>
  </body>
  • Window.pageYOffset 
    • read-only Window property 
    • scrollY의 다른 이름이다.
    • 문서가 수직으로 얼마나 스크롤 됐는 지 픽셀 단위로 반환
    • 오래된 브라우저는 scrollY대신 pageYOffset 만 지원하는 경우가 있음
    • 수평 스크롤을 나타내는 pageXOffset 속성 역시 scrollX의 다른 이름입니다. 
  • 그렇다면 문서(body태그)와 엘리먼트 간의 거리는 어떻게 알 수 있을까?
    • getBoundingClientRect.top의 값 + pageYOffset의 값 = 문서와 엘리먼트 사이의 거리

스크롤 제어 

문서의 스크롤 값을 변경하는 것은 어떻게 하는 것일까?

  • Element.scrollLeft와 window.scrollTo() 프로퍼티를 이용한다.
  • window.scrollTo(x좌표, y좌표) //문서의 지정된 위치로 스크롤한다. 
    • x-좌표 : 문서의 왼쪽 상단부터 시작하는 픽셀단위의 가로축
    • y-좌표: 문서의 왼쪽상단부터 시작하는 픽셀단위의 세로축 
    • 이 함수는 window.scroll과 효과적으로 같습니다. 

아래는 scrollTo()를 사용한 예제이다. 

<head>
<style>
      body {
        padding: 0;
        margin: 0;
      }
      div {
        border: 50px solid #1065e6;
        padding: 50px;
        margin: 50px;
      }
      #target {
        width: 100px;
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <input type="button" id="scrollBtn" value="scroll(0, 1000)" />
    <script>
      document
        .getElementById("scrollBtn")
        .addEventListener("click", function () {
          window.scrollTo(0, 1000);
        });
    </script>
    <div>
      <div id="target">Coding</div>
    </div>
  </body>

-> 버튼을 누르면 window.scrollTo(0, 1000); y좌표(위부터 아래로)로 1000px이동 

 

스크린의 크기(둘 다 픽셀단위 )

  1. 브라우저의 뷰포트 크기
    • window.innerWidth, window.innerHeight //read-only 브라우저의 윈도우의 뷰포트 크기를 알려주면 수직or 수평 스크롤바가 존재한다면 포함합니다. 
  2. 사용자의 모니터의 크기
    • screen.width, screen.height //read-only property 
<script>
  console.log(
    "window.innerWidth:",
    window.innerWidth,
    "window.innerHeight:",
    window.innerHeight
  );
  console.log("screen.width:", screen.width, "screen.height:", screen.height);
</script>
 //window.innerWidth: 1358 window.innerHeight: 719
  //screen.width: 1494 screen.height: 934 -> 제 노트북은 14인치 노트북입니다^_^

->모니터 크기인 경우는 변동하지 않지만 브라우저의 뷰포트의 경우 사용자가 화면을 줄이거나 키울 경우에 사이즈 변동이 있습니다.

'Frontend > JavaScript' 카테고리의 다른 글

[생활코딩][웹브라우저JS] - 이벤트 전파(버블링과 캡처링, 이벤트 위임)  (0) 2022.02.14
[생활코딩][웹브라우저JS] - Event(이벤트)  (0) 2022.02.12
[생활코딩][웹브라우저JS] - Document 객체, Text 객체  (0) 2022.02.09
[생활코딩][웹브라우저JS]- 문자열로 노드 제어  (0) 2022.02.09
[생활코딩][웹브라우저JS]- Node 객체, Node객체 API  (0) 2022.02.06
댓글