[JS] outerWidth 와 innerWidth 정리

outerWidth와 innerWidth는 JavaScript에서 브라우저 창의 크기를 나타내는 속성으로, 화면의 콘텐츠 표시와 레이아웃 조정을 위해 자주 사용됩니다.

1. outerWidth
   정의: 브라우저 창 전체또는 해당 요소의 너비를 의미합니다.
   포함 요소: 창의 스크롤바, 사이드 패널, 브라우저 경계(Border)까지 모두 포함합니다.
   사용 예: window.outerWidth로 호출하여 브라우저 창 외곽을 포함한 너비를 얻을 수 있습니다.
   용도: 브라우저 창 자체의 크기를 조절하거나 디버깅할 때 유용합니다.
2. innerWidth
   정의: 브라우저 창에서 실제 웹 콘텐츠가 표시되는 영역의 너비를 의미합니다.
   포함 요소: 스크롤바를 포함하지만, 브라우저 경계는 포함하지 않습니다.
   사용 예: window.innerWidth로 호출하여 웹 콘텐츠가 표시되는 영역 너비를 확인할 수 있습니다.
   용도: 페이지 레이아웃이나 반응형 디자인에서 화면 크기에 따라 콘텐츠 배치를 조절할 때 사용됩니다.
   차이점 요약
   outerWidth는 브라우저의 전체 너비(스크롤바 및 브라우저 경계 포함)를 반환하고, innerWidth는 콘텐츠 영역의 너비만을 반환합니다.
   둘의 차이는 창의 경계 및 특정 UI 요소의 유무에 따라 달라질 수 있습니다.
   이 속성들은 브라우저의 상태에 따라 반응형 웹 디자인을 구현하거나 레이아웃을 조절하는 데 중요한 역할을 합니다.