JavaSciprt WindowSize

종류

1. window.outerHeight : URL, 탭 창을 포함한 브라우저의 전체 높이

2. window.outerWidth : 브라우저의 사이드바, 경계선을 포함한 전체 너비

3. window.innerWidth : 스크롤 포함한 viewport 너비

4. window.innerHeight : 스크롤 포함한 viewport 높이

5. document.documentElement.clientWidth : 스크롤 제외한 viewport 너비

6. document.documentElement.clientHeight :
스크롤 제외한 viewport 높이

7. window.screen.width : 모니터 너비

8. window.screen.height : 모니터 높이

😄 Code 1. addEventListener('resize')

// class 이름이 widthHeight인 것 중 첫번째 요소 선택
const widthHeight = document.querySelector('.widthHeight');
// browser() 함수 
function browser() {
	widthHeight.innerHTML = 
		`window.inner : ${window.innerHeight}, ${window.innerWidth} 
         window.outer : ${window.outerHeight}, ${window.outerWidth} 
         window.screen : ${window.screen.height}, ${window.screen.width} 
         documentElement.clientWidth : ${document.documentElement.clientHeight},
									   ${document.documentElement.clientWidth}`;
}

// 브라우저 크기에 변화가 있을 때마다 browser() 함수 호출
window.addEventListener('resize', () => {
	browser();
});      

innerHTML ?

• 값 가져오기
  element 안의 HTML이나 XML 가져오기
• 값 설정하기
  HTML element에 값 추가하기
  

`` ?

• Template literals (탬플릿 문자열)
• 자동 줄바꿈, \n 쓸 필요 없다
• 문자열 이어주기 위해 + 쓸 필요 없다
• 변수는 ${} 안에 작성
  

addEventListener('resize') ?

• document view 크기가 변경될 때 발생하는 이벤트
• window.addEventListener()에 등록하기

😄 Code 2 (onresize)

// HTML id가 innerWidth인 것을 변수 innerWidth에 저장
const innerWidth = document.getElementById('innerWidth');

window.onresize = function () {
  innerWidth.textContent = window.innerWidth;
};

onresize ?

• 사용자가 브라우저 크기 변경했을 때 호출되는 이벤트
• window.onresize = function() { 함수명(); }
  

textContent ?

• 텍스트 추가하기
• element.textContent = '내용'
  vs innerText
  1. innterText는 불필요한 공백을 제거하고 텍스트로 반환
  2. textContent는 공백을 포함하여 모든 텍스트를 반환
  3. 공백 상관 없고 간단한 코드라면 더 가볍고 성능이 좋은 textContent를 사용하자

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍