<body>
    <div class="tag">Window_Size</div>
    <script>
        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();
    </script>
</body>


이 코드는 드림코딩 강좌를 보며 따라친 코드임

3시간동안 이 dom이 대강 문서를 javascript를 활용해서 변형시키는건 이해함

 window.addEventListener('resize', () => {
            updateTag();
        });

사실 저 window 이벤트리스너 안에 resize 타입에 따라 

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>
            `;

이넘이 포함되어있었고 resize는 웹 사이즈가 변경될 때 적용되므로 웹을 켰을 때 처음엔 html 클래스 명 tag의 Window.Size가 CSS적용과 함께 뜨게된다.

근데 이걸 바로 면처음 이미지처럼 바꾸는데.. 난 머리가 안따라간다..