[WEB] 윈도우 사이즈 표기

📄 윈도우 사이즈 표기 속성값

윈도우의 사이즈를 알아낼 때는, 글로벌 오브젝트인 window의 API를 사용합니다.

• window.screen : 모니터의 해상도 즉 브라우저 바깥에 있는 부분까지 다 합한 것
• window.outer : 브라우저의 URL, 탭, 전체적인 브라우저 사이즈
• window.inner : 웹페이지 뿐만 아니라 웹페이지 스크롤바까지 합한 것.
• documentElement.clientWidth : 스크롤바를 제외한 순수 문서 자체를 의미.

📄 실습코드

▪ HTML

<div class="tag">Window size</div>

• ‘tag’라는 이름을 가진 클래스를 dive컨테이너로 설정했습니다.

▪ CSS

.tag {
  display: inline-block;
  background-color: thistle;
  padding: 16px;
  margin-top: 16px;
  font-size: 48px;
}

• div컨테이너를 인라인 요소로 변경했습니다.

• 배경과 크기를 적절히 설정해 가시성을 높였습니다.

▪ JavaScript

const tag = document.querySelector(".tag");
function updateTag() {
  tag.innerHTML = `
      window.screen: ${window.screen.width}, ${window.screen.height} <br>
      window.outer: ${window.outerWidth}, ${window.outerHeight} <br>
      window.inner: ${window.innerWidth}, ${window.innerHeight} <br>
      documentElement.clientWidth: ${document.documentElement.clientWidth}, ${document.documentElement.clientHeight} <br>
      `;
}
window.addEventListener("resize", () => {
  updateTag();
});
updateTag();

1. DOM요소 중에서 첫번째로 발견되는 태그가 변수로 선언한 tag에 할당됩니다.
2. WEB API중 하나인 innerHTML을 사용해 윈도우의 크기를 보여주는 API들을 tag에 포함된 HTML에 설정합니다.
3. addEventListener 메서드로 resize가 변결될때마다 함수를 호출합니다.

📌 querySelector란?

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다.

일치하는 요소가 없으면 null을 반환합니다.

📌 addEventLitener란?

EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다.

📌 resize란?

resize 이벤트는 document view의 크기가 변경될 때 발생합니다.

출처

• MDN Document.querySelector

• 드림코딩