html DOM

html 문서 전체는 document 객체로 가져온다. 예컨데, document.title은 웹 문서 및 탭의 제목을 가리키는데, 그때 그때 새로운 메시지 등을 알리는데 사용할 수 있다 ← 이 문단에 마우스를 올리고 브라우저 창 제목표시줄의 현재 탭 제목을 보세요..

                                    
                                        const doc_title= document.title // 현재 문서의 제목을 변수로 저장한다

                                        document.querySelector('#title_change').addEventListener('mouseenter', () => document.title='다시 오셨네요 ^^'); // 마우스를 올리면; 문서 타이틀을 변경한다
                                        document.querySelector('#title_change').addEventListener('mouseleave', () => document.title= doc_title); // 마우스를 내리면; 다시 원래 제목을 넣어준다
                                    
                                

(빈 노드)<p class="속성노드">텍스트 영역</p>(빈 노드)

☞ 여기서 <p> 태그 영역 전체는 p 요소노드가 되며, 그 내부의 class="속성노드" 부분은 속성노드, 텍스트 영역 부분은 텍스트노드가 된다 ← <p> 태그 내부의 시작 및 끝 부분 공백은 제외되고, 각 태그 앞/뒤의 연속적인 공백 문자는 '빈 노드'로 생성된다!

* cf) 노드는 DOM 트리의 계층구조상 지위만 아니라, 다른 노드를 기준으로 하는 상대적 위치로도 참조된다. 우선, Root 는 DOM 트리의 최상위 노드를 말하는데, html 문서에서의 최상위 노드는 언제나 html 노드이다. Child 는 현재 노드 밑 단계에 속한 노드들(= 자식요소들)을, Parent 는 현재 노드를 포함하고 있는 상위 노드(= 부모요소)를 가리킨다. 한편, Sibling 은 현재 노드와 같은 단계에 위치하는 노드들(= 형제요소들)을, Descendant 는 DOM 트리에서 하위 수준에 포함된 노드들(= 후손요소들)을 가리킨다

✓ 각 요소들은 . 연산자에 의한 체인 연결로 참조할 수 있지만, 요소노드 사이에 있는 공백노드의 존재로 인해 다루기에 불편하다. 이에 공백노드를 제외한 요소만의 참조를 위한 속성도 준비되어 있지만(예컨대, 부모요소.children), 역시 불편하여 실상은 요소의 id 나 class 를 쓰게 된다!

                                    
                                        const el= document.querySelector('#my_container')

                                        for (const child of el.children) { // el 내부 모든 자식 요소들로 루프를 돈다 ← children은 (텍스트 노드 등은 제외하고)요소 노드만을 대상으로 한다!
                                            console.log(child.tagName) // el에 포함된 모든 태그명을 출력한다
                                        }
                                    
                                

☞ NodeList 컬렉션은 유사배열 객체이므로 for 문, for .. of 문이나 forEach(); 메서드로 반복하거나, Array.from(); 같은 메서드를 써서 배열로 변환할 수도 있다. 당연히, entries();, values();, keys(); 등의 메서드들도 사용할 수 있다!

* cf) 참고로, document.querySelectorAll();은 호출 시점에서의 정적 노드 리스트를 가져오는 반면, 부모요소.children은 돔의 변경 사항을 실시간으로 반영한다 ← 따라서, 노드 리스트에서 순회하거나, 그 길이(length)를 가져와야 할 때는 이 점에 유의해야 한다!

현재 시각은?

                                    
                                        let time_pic= document.querySelector('#on_click_button')

                                        function cPic() { // 이벤트 처리함수
                                            let d= new Date();
                                            alert("현재 시각: " + d.toLocaleString())
                                        }
                                    
                                        time_pic.onclick= cPic // Click 이벤트로 cPic() 함수를 호출한다
                                    
                                

☞ 이벤트 처리함수 호출 시에는 일반 함수 호출과는 달리 함수명 뒤에 ()를 붙이지 않는다 ← 뒤에 괄호를 붙이게 되면; 이벤트 호출 버튼을 클릭하기 전에 먼저 함수 코드가 실행되어버린다!

* cf) 최근에는 이 on 이벤트보다는 이벤트 리스너를 쓰는 것이 보편적이다. addEventListener();는 같은 리스너에 대해 다수의 핸들러 함수를 등록할 수 있다는 점, 제거 시에도 짝이 되는 removeEventListener();가 존재한다는 점 등에서 on 이벤트에 비해 보다 유용하다!

                                    
                                        const log_var= document.querySelector('#log') // 조작하려는 대상요소(#log)에 대한 참조변수 log_var
                                    
                                

* 아래서, html 코드로 <p>기존 p 문단</p> 요소를 작성했습니다:

기존 p 문단

** 이어서, 위 <p> 요소에 <p id="log_p">기존 p 문단</p>로 id 를 넣어주고, 다음 스크립트 코드를 작성해주면; 위 <p> 요소 안 텍스트가 아래와 같이 바뀌게 됩니다!

기존 p 문단

                                    
                                        const log= document.querySelector('#log_p')
                                        log.textContent= '기존 p 문단의 내용을 변경함!'
                                    
                                

                                                    
                                                        const listEl= document.querySelector('.log_list li:nth-child(2)')
                                                        listEl.textContent= '두번째 li의 값 변경함!'
                                                    
                                                

• 리스트1
• 리스트2
• 리스트3

                                    
                                        const box_list= document.getElementsByClassName('list_i')

                                        for (let i=0; i < box_list.length; i++) { // for문 사용 ← forEach()는 사용할 수 없다!
                                            console.log(box_list[i].textContent + " ") // 여기서 클릭 이벤트는 쓸 수 없다!
                                        }
                                    
                                

☞ querySelectorAll();에 의해 반환되는 노드 리스트는 호출 시점에서의 정적 요소들인 반면, getElementByID(); 등에서의 노드 리스트는 동적으로 바뀌는 요소들을 반영하므로, 리스트를 순회하면서 요소를 추가하거나 리스트의 길이를 알아야 하는 경우 등에는 노드 리스트 객체의 정적 복사본을 만들어서 순회해야 한다!

• 리스트1
• 리스트2
• 리스트3

                                    
                                        document.querySelectorAll('.list_items')
                                        .forEach((targetBox) => { // forEach() 메서드 사용
                                            targetBox.addEventListener('click', () => alert(`${targetBox.textContent}`))
                                        })
                                    
                                

☞ querySelectorAll();에서는 forEach(); 메서드를 사용할 수 있고, 클릭 이벤트 또한 사용할 수 있다!

* cf) 특별한 이유가 없다면; querySlector(); 및 querySlectorAll();을 쓰는 것이 알아보기 쉽고, 이점도 많다. 나아가, querySlector('#id');는 getElementByID('id명');과는 달리, Document 객체만 아니라 Element 객체에서도 사용할 수 있다!

• [서울 남산]
• [경주 남산]
• [또다른 남산]

                                    
                                        const namsans= document.querySelectorAll("#ko-namsans li")
                                        const log1000= document.querySelector('.silla_1000')

                                        for (const namsan of namsans) {
                                            if (namsan.matches(".silla_1000")) { // .silla_1000 클래스를 가진 요소를 찾으면;
                                                log1000.textContent= `${namsan.textContent}은 신라 천년의 보고!`
                                            }
                                        }
                                    
                                

* 경주 남산 날씨정보) 약간 흐림 (현재 23도) 추가정보 보기

* cf) 참고로, 일반 텍스트는 insertAdjacentText(); 메서드를 쓸 수도 있지만, textContent 속성을 쓰는 것이 쉽고 간결하다!

                                                    
                                                        const i_view1= document.querySelector('#insert_view1')
                                                        const i_view2= document.querySelector('#insert_view2')

                                                        const div_box= document.querySelector('#div_box_i')
                                                        const before=`<span>afterbegin</span>`, after=`<span>beforeend</span>`
                                                        const before2=`<span>beforebegin</span>`, after2=`<span>afterend</span>`

                                                        function view_fnc() {
                                                            div_box.insertAdjacentHTML('beforeend', after) // (부모요소 내부에서)맨 뒤

                                                            setTimeout(() => {
                                                                div_box.insertAdjacentHTML('afterbegin', before) // (부모요소 내부에서)맨 앞
                                                            }, 3000);
                                                        }
                                                        i_view1.addEventListener('click', view_fnc)

                                                        function view_fnc2() {
                                                            div_box.insertAdjacentHTML('afterend', after2); // 대상요소의 바로 뒤

                                                            setTimeout(() => {
                                                                div_box.insertAdjacentHTML('beforebegin', before2) // 대상요소의 바로 앞
                                                            }, 3000);
                                                        }
                                                        i_view2.addEventListener('click', view_fnc2)  
                                                    
                                                

                                    
                                        const article= document.querySelector("article") // article 요소를 참조하는 변수 article

                                        const para= document.createElement("p") // 빈 p 요소를 생성한다
                                        para.textContent= "새로 만든 p 요소에 컨텐츠를 넣어줌" // 만들어진 p 요소에 텍스트를 넣어준다
                                        article.append(para) // 생성된 p 요소(와 텍스트)를 article 내부 맨 끝에 붙인다
                                    
                                

☞ 참고로, document.createTextNode('텍스트');는 텍스트 노드 를 생성하지만, 굳이 이것을 사용해야만 할 이유는 없다 ← 그 이유는 위 코드에서 스스로 확인해보십시오..

* 아래서, html 코드로 <ol> 리스트를 작성했습니다:

1. 리스트
2. 리스트
3. 리스트

** 이제, 아래 스크립트 코드를 작성해줍니다:

☞ <ol> 요소 맨 앞에 들어갈 <li> 요소는 스스로 작성해서 덧붙여주십시오.. 결과는?

1. 리스트
2. 리스트
3. 리스트

* cf) 부모요소.appendChild('자식노드');는 자식노드 를 부모요소 내부 맨 끝에 삽입하는데, 역시 현재로서는 굳이 쓸 이유가 없어진 구식이다!

* 아래서, html 코드로 제목 라인을 작성했습니다:

제 1장

** 이제, 아래 스크립트 코드를 작성해줍니다:

                                    
                                        const introduce= "* 이 파트에서는 노드의 생성과 삽입, 삭제에 관해 살펴봅니다"
                                        const heading= document.querySelector("h5.h5_heading")

                                        heading.after(document.createElement('hr'), introduce)
                                    
                                

제 1장

☞ 이전에 살펴본 부모요소.append/prepend();로는 자식 리스트 중간에 요소 노드나 텍스트 노드를 삽입할 수 없다. 그런 이유로, 이와 같이 기준으로 삼을 형제노드의 참조를 가져온 뒤, 그 앞이나 뒤에 삽입하는 것이다 ← 참고로, (요소 노드만 아니라)텍스트 노드를 기준점으로 삼는 것도 가능하다!

* cf) 참고로, 부모요소.insertBefore(새노드, 기준노드);는 부모요소 내부의 기준노드 앞에 새노드 를 추가하는데, 요소.before/after();를 사용하는 것이 알기 쉽고, 더 유용하다!

* 아래 스크립트 코드를 작성해주고, <span>에 <span class="box_me"> 클래스를 준다. 결과는? 결과는?

                                    
                                        const meBox= document.querySelector('.box_me')

                                        meBox.remove() // meBox 자신을 제거한다
                                    
                                

** <span class="box_me1">임시</span> 요소를 만들고, 아래 스크립트 코드를 작성해준다:

                                    
                                        const old_pBox= document.querySelector('.box_me1') // span 요소를 가져온다

                                        const new_pBox= document.createElement('b') // b 요소를 생성한다
                                        new_pBox.textContent= '새로운 Me' // b 요소에 텍스트를 넣는다

                                        old_pBox.replaceWith(new_pBox) // old_pBox를 새로 생성한 new_pBox로 대체한다!
                                    
                                

☞ 결과는? 임시

* cf) 부모요소.removeChild(자식노드);는 부모요소 내부 자식노드 를 제거하지만, 요소.remove();(로 스스로 요소 자신을 제거할 수 있는데) 굳이 어렵게 쓸 이유가 없다! 또한, 부모요소.replaceChild(새노드, 기존노드);는 부모요소 내부 기존노드 를 새노드 로 대체하지만, 이 또한 요소.replaceWith(새노드);(로 스스로 자신을 대체할 수 있는데) 굳이 어렵게 사용할 이유는 없다 - 다만, 이전에 작성된 코드들에서는 자주 나오기에 코드 읽기를 위해 부가했습니다 ㅡㅡ; ← 참고로, 요소 내부에 자식노드 가 존재하는지 여부는 요소.hasChildNodes();로 확인할 수 있다!

* 먼저, 복사하려는 텍스트 문단을 만들고, 이를 복사해서 넣어줄 <div> 박스를 만든다:

(복사하려는 텍스트)

                                    
                                        const introduce_1= document.querySelector('p.inter_p1')
                                        const heading_1= document.querySelector(".heading5")
                                    
                                        // heading_1 다음에 introduce_2를 복사해서 넣으려는 의도였지만..
                                        heading_1.after(introduce_1) // 기존에 존재하던 요소이기에, 이동이 된다!
                                    
                                

☞ 이 스크립트를 적용한 이후의 결과는?

(복사하려는 텍스트)

* 아래, <span> 요소(전부)를 복사해서 <p> 요소 박스 안에 붙여넣고자 한다:

☞ 이 스크립트를 적용한 이후의 결과는?

* cf) 다른 문서에 있는 노드를 복사해올 때는; document.importNode(가져올 노드[, true]); 메서드를 사용한다: var clone_node= document.importNode(가져올 노드[, true]); ← true 옵션을 주면; 하위 자식요소들까지 모두 포함한다!

클릭 - 목없는 부처님

                                    
                                        <button id="new_para">클릭 - 목없는 부처님</button>
                                    
                                

                                    
                                        let txt_para= document.querySelector('#new_para')

                                        txt_para.addEventListener('click', function() { // 클릭 이벤트가 발생하면;
                                            const attr= document.createAttribute('class') // 'class' 속성을 생성하고,
                                            attr.value= 'ex_box rounded' // 그 속성에 값을 넣는다
                                            txt_para.setAttributeNode(attr) // 만든 attr 속성(과 그 값)을 txt_para 요소에 넣어준다

                                            const img_new= document.createElement('img') // img 요소를 만들어,
                                            img_new.setAttribute('src', '_images/목없는부처님-small.jpg') // src 속성을 만들고, 값을 넣어준다
                                            txt_para.append(img_new) // txt_para 내부 맨 뒤에 삽입한다
                                        });
                                    
                                

                                    
                                        const attr= document.querySelector('[data-my-name]')

                                        // data- 속성값에 접근한다
                                        attr.dataset // DOMStringMap {myName: 'Kjc'} ← DOMStringMap 객체는 dataset 속성을 통해 접근할 수 있다!

                                        // data- 속성값 가져오기 1. 'data-' 뒤의 속성 이름 부분을 사용해 속성값을 가져온다
                                        attr.dataset.myName // Kjc ← 이름은 카멜케이스 방식으로 변환하여야 한다!

                                        // data- 속성값 가져오기 2. 완전한 html 속성명과 getAttribute()를 사용해 속성값을 가져온다
                                        attr.getAttribute('data-my-name') // Kjc
                                    
                                

* cf) html 요소의 data-이름 속성은 사용자 지정 데이터 속성 클래스를 형성함으로써 임의의 데이터를 스크립트로 html과 DOM 사이에서 교환할 수 있도록 하는데, dataset 프로퍼티를 사용하여(요소.dataset.이름) 이 속성에 접근할 수 있다. 또한, 이 data-이름 속성은 평문 html 코드이기에 Css에서도 접근 및 조작할 수 있고, 나아가 html 요소에 임의의 사용자 지정 데이터를 추가하는 것도 가능하다!

                                        
                                            const para= document.querySelectorAll("div p")[0]

                                            const attrs= para.attributes // para의 모든 속성들을 NamedNodeMap 객체로 가져온다
                                            console.log(attrs) // NamedNodeMap {0: class, 1: style, length: 2}
                                        
                                    

* cf) NamedNodeMap 객체는 요소 객체가 지닌 속성과 그 값이 담긴 읽기전용 유사배열 객체로서, 요소.attributes.속성명.value로 그 값 에 접근할 수 있다

                                    
                                        <button type="button" value="클릭!">버튼</button>
                                    
                                

                                    
                                        const btn= document.querySelector('button')

                                        console.log(btn.attributes.type.value, btn.attributes.value.value) // button 클릭!
                                    
                                

여기에 마우스를 올리세요..

                                    
                                        .change_color_red { color: red }
                                    
                                

☞ 기존에 설정되어 있던 속성값들은 완전히 비워지고(위 html 코드의 기존 클래스값들은 다 제거된다!) 새로이 추가하는 값만 들어간다: class= "새로운 값" ← 기존 요소에 class 속성이 없다면; 새로 생성하면서(class=) 값 을 넣어준다!

여기 클릭해주세요..

☞ classList 속성은 현재의 살아 있는 상태에 반응한다!

* cf) 요소의 classList에 특정 클래스 가 있는지 여부는 요소.classList.contains('클래스'); 메서드로 확인할 수 있다!

                                    
                                        const pic_style= document.querySelector('#color_change')
                                        const ele_style= document.querySelector("#box-style_ex")
                                    
                                        pic_style.onclick= () => ele_style.style.backgroundColor= ''; // 인라인 스타일 속성(배경색) 설정
                                    
                                

                                    
                                        // [요소1]의 인라인 스타일을 [요소2]의 인라인 스타일에 복사하기:
                                        요소2.setAttribute("style", 요소1.getAttribute("style"))

                                        // CSSStyleDeclaration 객체의 cssText 속성 사용하기:
                                        요소2.style.cssText= 요소1.style.cssText
                                    
                                

                                            
                                                function tp_pos(tooltip, x, y) { // 툴팁 표시 및 위치(x, y) 설정 함수
                                                    tooltip.style.display= "block" // 따옴표로 묶어주어야 한다!
                                                    tooltip.style.position= "absolute"
                                                    tooltip.style.top= `${y}px` // 숫자도 따옴표로 묶고, 단위도 반드시 써주어야 한다!
                                                    tooltip.style.left= `${x}px`
                                                }
                                            
                                        

이 박스의 가로/세로 크기 는 입니다

* cf) 인라인 스타일로서의 CSSStyleDeclaration 객체와는 달리, 계산된 스타일로서의 CSSStyleDeclaration 객체는 읽기전용이며, % 등의 크기 단위는 모두 px 로 변경되고, 색상값은 모두 rgb(a) 형식으로 표시된다. padding 같은 단축 속성 또한 각각의 방향별로 표시된다 ← 그외에도 많은 특이한 차이점들이 있어 실제로 사용하기에는 좀 혼란스러우니 참고하십시오 ㅡㅡ;

클릭하여 제 글자색을 바꿔주세요..

                                    
                                        let txt= document.querySelector('.click_me_color') // 이벤트 대상

                                        /* 방법 1 */
                                        txt.addEventListener('click', function() { // 클릭 이벤트가 발생하면;
                                            txt.style.color= 'red' // txt의 글자색을 'red' 색으로 변경한다 
                                        });

                                        /* 방법 2 */
                                        txt.addEventListener('click', function(e) { // 이벤트 객체 e를 매개변수로 전달하여 처리한다
                                            e.currentTarget.style.color= 'red' // e.currentTarget ← 발생한 이벤트가 등록된 DOM 요소
                                        });

                                        /* 방법 3 */
                                        function setStyle() {
                                            this.style.color= 'red' // 이 this는 자신을 호출한 txt의 this임!
                                        }

                                        txt.addEventListener('click', setStyle); // 이벤트를 처리할 함수를 호출한다
                                    
                                

☞ 위 3가지 방식 모두 같은 결과를 가져온다!

클릭, Me

                                                    
                                                        #div_tile_container {
                                                            height: 135px; width: 100%;
                                                        } .div_tile_color {
                                                            height: 95px; width: 20%; float: left;
                                                        }
                                                    
                                                

                                                    
                                                        function random_num() {
                                                            return Math.floor(Math.random()*256); // 0 ~ 255 사이의 정수
                                                        }

                                                        function backgroundColor() {
                                                            const randomColor= `rgb(${random_num()}, ${random_num()}, ${random_num()})`
                                                            return randomColor;
                                                        }

                                                        const container_bgc= document.querySelector('#div_tile_container')
                                                        container_bgc.addEventListener('click', e => e.target.style.backgroundColor= backgroundColor())
                                                    
                                                

* 버튼을 클릭하여 메시지창을 닫은 뒤, 곧바로 다시 클릭해보고.. 마지막 버튼 클릭 이후 10초가 지난 이후에 다시 클릭해보세요..

버튼 클릭

                                            
                                                const controller= new AbortController()
                                                let btn= document.querySelector('.btn_click_rem')
                                                
                                                function random_num(number) {
                                                    return Math.floor(Math.random()*number);
                                                }
                                                
                                                btn.addEventListener("click", function() {
                                                    const randomColor= `rgb(${random_num(255)}, ${random_num(255)}, ${random_num(255)})`
                                                    btn_click_cont.style.backgroundColor= randomColor
                                                }, { signal: controller.signal }); // 이 이벤트 핸들러에 AbortSignal을 전달한다
                                                
                                                // .. 필요한 작업들 ← 중간에라도 원하던 일이 끝나면; 아래 코드로 점프한다 
                                                
                                                controller.abort() // 이 컨트롤러와 연관된 모든 이벤트 핸들러를 제거한다
                                            
                                        

                                    
                                        document.addEventListener('DOMContentLoaded', () => {
                                            const imgs= document.querySelectorAll('img')
                                        
                                            imgs.forEach((img) => {
                                                img.addEventListener('contextmenu', (e) => { // 이미지에서 마우스 우측 버튼이 클릭되면;
                                                    e.preventDefault() // 우측 버튼의 기본 기능인 단축메뉴 기능을 제거한다!
                                                    alert("마우스 우측버튼 사용 불가!")
                                                });
                                            });
                                        });
                                    
                                

☞ preventDefault();는 현재 이벤트가 발생한 요소의 기본 이벤트 동작을 중지한다 - 단, defaultPrevented 속성값만 true 로 바뀐 채 이벤트 전파는 멈추지 않는다!

경주 남산으로 갈 수 있게 해주세요..

                                    
                                        let status_ims= false // 체크박스 체크 상태값은 false로 시작한다

                                        const checkbox_ims= document.querySelector('input.link_act')
                                        checkbox_ims.addEventListener('change', (e) => { // 체크박스의 체크 상태값이 바뀌면;
                                            status_ims= e.target.checked // 상태값 토글
                                        });

                                        const link_ims= document.querySelector('a.act_change')
                                        link_ims.addEventListener('click', (e) => {
                                            if (! status_ims) e.preventDefault() // 체크박스 체크 상태값이 false라면; 기본 하이퍼링크 기능을 차단한다!
                                        });
                                    
                                

                                                
                                                    document.addEventListener('이벤트 이름', 핸들러 함수, { // 옵션객체
                                                        capture: true, // 캡쳐링(기본값: false)
                                                        once: true, // 이벤트 한번 호출 후 자동 제거(기본값: false)
                                                        passive: true, // 이벤트 기본 동작 취소 불가(기본값: false)
                                                        signal // AbortSignal 연결 ← 지정한 AbortSignal 객체의 abort() 메서드를 호출하면; 이 옵션은 자동 제거된다!
                                                    });
                                                
                                            

* 음악을 틀어놓고 다른 탭으로 이동해보십시오..

                                    
                                        const audio_ex= document.querySelector("#my_audio_ex")

                                        document.addEventListener("visibilitychange", () => { // 브라우저 창이나 탭(및 앱) 전환 시..
                                            if (document.hidden) audio_ex.pause() // 탭 전환 및 최소화 시; 일시 정지한다
                                            else audio_ex.play() // 중단된 지점에서 다시 플레이한다
                                        });
                                    
                                

☞ document.hidden은 페이지가 사용자에게 숨겨진 것으로 간주되는 상태이면; true 를, 아니면; false 를 반환한다!

* cf) Page Visibility API는 사용자가 페이지를 보고 있지 않은 한 다음 슬라이드로 넘어가지 않아야 하는 이미지 캐러셀이 있는 사이트, 특정 정보에 대한 대시보드를 표시하는 애플리케이션이 페이지가 표시되지 않을 때 서버에 업데이트를 요청하고 싶지 않은 사이트, 페이지가 미리 렌더링 되는 시기를 감지하여 정확한 페이지 조회 수를 유지하려는 사이트, 디바이스가 대기 상태에 있을 때(예: 절전모드) 소리를 끄고 싶어 하는 경우 등에 유용하게 사용할 수 있다!

* 아래, 각 영역별로 한번씩 클릭해보세요..

                                    
                                        const outbox_b= document.getElementById('outbox_bubble')
                                        const inbox_b= document.getElementById('inbox_bubble')
                                        const spanbox_b= document.getElementById('span_bubble')
                                    
                                        const area_box= [outbox_b, inbox_b, spanbox_b]
                                        area_box.forEach(box => {
                                            box.addEventListener('click', () => {
                                                alert(`${box.tagName}`)
                                            }, false); // 버블링: 기본값 false
                                        });
                                    
                                

☞ 위 스크립트에서 false (버블링: 기본값) 대신 true (캡쳐링) 값을 주어 버블링 대 캡쳐링의 차이를 확인해보십시오.. ← 3번째 인자로 true/false 값을 주는 것은 최근의 옵션객체 옵션 이전에 사용되던 방식인데, 여전히 (구버전 브라우저까지 포함하여, 공히)지원되는 '구식' 방식입니다!

[자유게시판]

1. 게시글
2. 게시글
3. 게시글
4. 게시글
5. ..

                                    
                                        const ol_lists= document.getElementById('ol_list_bubble')

                                        ol_lists.addEventListener('click', (e) => { // 각 li의 부모요소인 ol로 이벤트를 위임함
                                            console.log(e.target.id) // gesi_id_1 ← 이벤트가 처음 발생했던 대상 DOM 요소(= li), ol로까지 버블링한다!
                                            alert("게시판 클릭함!")
                                            // console.log(e.currentTarget.id) // ol_list_bubble ← 발생한 이벤트가 등록된 DOM 요소(= ol)
                                        });    
                                    
                                

☞ 이렇게 상위요소 <ol>로 이벤트를 위임하면; <ol> 아래 각 <li>를 클릭할 때 이벤트 버블링을 통해 상위요소인 <ol>에서 이벤트를 받아 제어할 수 있게 된다 ← 단, 이 경우에는 각각의 li를 제어할 수는 없다!

* cf) 이벤트 리스너는 html 요소를 포함한 모든 DOM 요소에 이벤트를 등록할 수 있을 뿐 아니라 여타 메서드를 활용하여 더욱 정밀하게 이벤트 전파를 제어할 수 있다. 예컨대, stopPropagation(); 메서드는 현재 요소에서 이벤트를 끝내고 다음 단계로 이벤트가 전파되는 것을 막는다(단, 그 이벤트에 연결된 다른 이벤트 리스너들은 변함없이 동작한다). 한편, stopImmediatePropagation(); 메서드는 모든 이벤트 핸들러를 즉각 정지시킨다!

                                    
                                        <button id="btn_this">this</button>
                                    
                                

                                    
                                        const btn= document.getElementById('btn_this')

                                        function Person(name) {
                                            this.name= name 
                                            this.sayHello= function() {
                                                alert("hello " + this.name) // hello
                                            }
                                        }
                                        const per= new Person('Kjc')

                                        btn.addEventListener('click', per.sayHello) // hello !
                                    
                                

☞ 호출받는 Person() 함수 내부 this 는 이벤트가 발생한 btn의 this 가 된다!

                                    
                                        // 방법 1: bind() 메서드로 this의 주체를 묶어주기
                                        btn.addEventListener('click', per.sayHello.bind(per)) // hello Kjc
                                    
                                

                                                    
                                                        class Counter_click {
                                                            constructor() {
                                                                this.clickedCount= 0 // 버튼 클릭 횟수

                                                                const btn= document.querySelector('.cli-button')
                                                                const clickedCountText= document.querySelector('.clickedCountText')

                                                                // btn.addEventListener('click', function() { // 일반 함수로 이벤트 리스너 정의
                                                                //     this.clickedCount += 1
                                                                //     clickedCountText.textContent= this.clickedCount // NaN ← 이 this는 이벤트 대상인 btn의 this이다!
                                                                // });

                                                                btn.addEventListener('click', () => { // 화살표 함수로 이벤트 리스너 정의
                                                                    this.clickedCount += 1 // 여기서 this는 Counter_click 클래스 내부를 참조한다!
                                                                    clickedCountText.textContent= this.clickedCount // 여기서 this는 Counter_click 클래스 내부를 참조한다!
                                                                });
                                                            }
                                                        }

                                                        new Counter_click()
                                                    
                                                

* 먼저, 이벤트를 전달받을 타깃요소를 만들어준다: <span>이벤트를 전달받을 타깃요소</span>

** 다음, 아래 스크립트 코드를 작성해주고, 이벤트를 전달받을 타깃 요소에 id를 넣어준다: <span id="target-ele">이벤트를 전달받을 타깃요소</span>

                                    
                                        const target_el= document.getElementById('target-ele') // 이벤트 타깃

                                        target_el.addEventListener('view', function(e) { // 이벤트 리스너 등록
                                            target_el.textContent= `이벤트 전달함!`
                                        });
                                        
                                        // 커스텀 이벤트 객체 생성(및 초기화)
                                        const evt_custom= new Event('view', { bubbles: false, cancelable: false });                                      
                                        target_el.dispatchEvent(evt_custom) // 만든 커스텀 이벤트를 타깃으로 전달한다
                                    
                                

☞ 결과는? 이벤트 전달함!

* cf) 브라우저가 전송하는 이벤트는 이벤트 루프를 통해 비동기적으로 처리기들을 호출하지만, dispatchEvent();로 전달하는 이벤트는 처리기를 동기적으로(= 순서대로) 호출한다 - 즉, 모든 적합한 처리기의 호출과 반환이 끝나야 dispatchEvent(); 역시 반환된다!

                                    
                                        const log_obj= document.querySelector('.p_para_obj')

                                        // CustomEvent 생성
                                        const evt_p= new CustomEvent("view", {
                                            bubbles: false, cancelable: false, detail: { name: "Kjc" }
                                        });
                                        
                                        // 적합한 이벤트 수신기 부착
                                        log_obj.addEventListener("view", (e) => log_obj.textContent= e.detail.name)
                                        
                                        // 이벤트 발송
                                        log_obj.dispatchEvent(evt_p) // Kjc
                                    
                                

☞ 이벤트 리스너에서는 e.detail.name 식으로 접근하여 값을 가져올 수 있다!

                                    
                                        const box_element= document.querySelector('#dispatch_box')

                                        box_element.addEventListener('user', () => {
                                            box_element.textContent= '자동 커스텀 이벤트 발생 !'
                                        });

                                        setTimeout(() => {
                                            box_element.dispatchEvent(new Event('user')) // 자동 이벤트 생성
                                        }, 5000);
                                    
                                

                                    
                                        const formElement= document.querySelector('#form-submit')
        
                                        function handleSubmit(event) {
                                            const isYes= confirm('이 내용으로 제출하시겠습니까?')
                                            if (isYes === false) { event.preventDefault() } // 전송 취소
                                        };

                                        formElement.addEventListener('submit', handleSubmit)
                                    
                                

☞ 폼 전송 체크는 <form> 요소를 참조해야 한다!

                                    
                                        const textarea= document.querySelector('.txt-area-p')
                                        const note= document.querySelector('.para_doc')

                                        let timerId
                                        textarea.addEventListener('focus', (e) => { // textarea 입력영역에 포커스가 주어지면;
                                            timerId= setInterval(() => {
                                                const length= textarea.value.length
                                                note.textContent= `현재 ${length} 글자 입력됨`
                                            }, 100);
                                        });

                                        textarea.addEventListener('blur', (e) => { // textarea 입력영역에서 벗어나면;
                                            clearInterval(timerId)
                                            note.textContent= `* 다 적었나요? 더 적으셔도 됩니다만..`;
                                        });
                                    
                                

                                    
                                        const el= document.querySelector('#myText_textarea')

                                        function writeText(e) {
                                            const val= e.target.value // 이벤트 대상의 값 읽어오기

                                            const htmlStr= val.split(' ').join(' ') // 입력된 값을 공백(' ') 기준으로 분할하여 반환된 배열을 빈 칸을 주어 연결한다
                                            document.querySelector('#myText_p').innerHTML= htmlStr // 여기에는 html 코드도 넣을 수 있다 ← innerHTML 사용함!
                                        }

                                        el.addEventListener('input', writeText) // 입력이 일어났으면; writeText() 함수를 호출한다
                                    
                                

☞ <input> 요소의 type="text" 및 <textarea> 요소에서 value는 텍스트 입력 요소의 value 값(= 문자열)이다!

경주 남산은 서라벌의 진산입니다

☞ 라디오 버튼은 자신이 속한 부모요소를 참조해야 한다!

경주 남산은 서라벌의 진산입니다

☞ 위 예제와 다를바 없는데, 그저 화살표함수를 써서 다시 작성해본 것입니다

☞ 드롭다운 메뉴 옵션 값은 <select> 요소를 참조해야 한다!

                                    
                                        const select= document.querySelector('.select_1234m')
                                        const p_sel= document.querySelector('.para_selectm')

                                        select.addEventListener('change', (e) => {
                                            const options= e.currentTarget.options

                                            const list= []
                                            for (const opt of options) {
                                                if (opt.selected) list.push(opt.textContent)
                                            }
                                            p_sel.textContent= `선택: ${list.join(', ')}`
                                        });
                                    
                                

                                    
                                        const el3= document.querySelector('#slider_range')

                                        const value= el3.value
                                        document.querySelector('.log_slider').textContent= `현재 값은 ${value}입니다`

                                        function RangeChange(e) {
                                            const value= e.target.value // 슬라이더가 이동한 지점의 값
                                            document.querySelector('.log_slider').textContent= `현재 값은 ${value}입니다`;
                                        }

                                        el3.addEventListener('input', RangeChange)
                                    
                                

                                    
                                        const color= document.querySelector('#my_color_v')

                                        color.addEventListener('change', (e) => {
                                            const value= e.target.value
                                            const log= `${value} 색상 선택!`;

                                            const logEl= document.querySelector('.log_color')
                                            logEl.textContent= log
                                            logEl.style.color= value
                                        });
                                    
                                

                                    
                                        const el4= document.querySelector('#my_file_box')
                                        const el_info= document.querySelector('.log_file_box')

                                        el4.addEventListener('input', (e) => { // 선택 완료 이벤트 input
                                            const target= e.target
                                            const files= target.files
                                            const file= files[0]

                                            const reader= new FileReader() // 선택된 파일 정보 객체
                                            reader.readAsText(file) // 파일 내용을 텍스트 형태로 읽어오기
                                            reader.addEventListener('load', () => { // 파일정보 읽기 완료 이벤트 load
                                                el_info.textContent= reader.result
                                            });
                                        });
                                    
                                

☞ FileReader 객체를 통해 <input> 요소로 선택한 파일 정보에 접근할 수 있는데, 비동기 방식이므로 읽기작업 완료 이벤트인 load를 써야 한다 ← load 이벤트 완료 후 FileReader 객체의 result 속성으로 데이터에 접근할 수 있고, 사용자가 선택한 파일을 가져와서 표시할 때는 readAsText();(텍스트 파일) 및 readAsDataURL();(바이너리 파일) 메서드를 사용할 수 있다

* keyup 이벤트 예 1)

☞ keyup 이벤트 외에 keypress, keydown 등으로 바꿔서도 확인해보십시오..

* keyup 이벤트 예 2)

                                    
                                        const e_input= document.querySelector('.input_state')
                                        const p_log= document.querySelector('.para_text')

                                        const isEmail= (value) => {
                                            return (value.indexOf('@') !== -1) && (value.split('@')[1].indexOf('.') !== -1);
                                        };

                                        e_input.addEventListener('keyup', (e) => { // 입력 상황을 실시간으로 반영하기 위해 change가 아닌 keyup 이벤트를 씀!
                                            const value= e.currentTarget.value

                                            if (isEmail(value)) {
                                                p_log.style.color= 'green'
                                                p_log.textContent= `맞는 이메일 형식입니다: ${value}`
                                            } else {
                                                p_log.style.color= 'red'
                                                p_log.textContent= `이메일 형식이 아닙니다! ${value}`
                                            }
                                        });
                                    
                                

☞ 여기서는 실시간으로 입력 상태를 체크하기 위해 <input> 요소에서 (change가 아닌)keyup 이벤트를 사용하였다!

* cf) 한편, keypress는 문자키가 눌려진 시점인데, 문자키에만 해당하기에 Alt, Ctrl, Shift, Enter 등의 변환문자 입력 시는 작동하지 않는다!

* 윈도우 창 크기를 변경해보세요..

윈도우 가로 너비: , 윈도우 세로 높이:

                                    
                                        const width= document.querySelector('#width_info')
                                        const height= document.querySelector('#height_info')

                                        function onResize() {
                                            width.innerText= `${window.innerWidth}px`;
                                            height.innerText= `${window.innerHeight}px`;
                                        }

                                        let resizeTimer
                                        window.addEventListener('resize', () => { // 윈도우 사이즈가 변경될 때마다
                                            if (resizeTimer != null) clearTimeout(resizeTimer) // 시스템에 부하를 줄 경우에 대한 대비

                                            resizeTimer= setTimeout(() => {
                                                onResize()
                                            }, 1000); // 1초 후에 작업을 수행한다!
                                        })
                                    
                                

☞ 이 resize 이벤트는 시스템에 상당한 부하를 줄 수 있으므로 setTimeout, customEvent 등을 사용해 이벤트를 쓰로틀하는 것이 좋다!

                                    
                                        window.addEventListener('scroll', () => {
                                            console.log('스크롤 작업: ', window.scrollX, window.scrollY)
                                        })
                                    
                                

☞ window.scrollX/scrollY(및 pageXOffset/pageYOffset)는 수평/수직으로 스크롤한 픽셀값, 곧 현재 뷰포트 좌상단 모서리를 기준점으로 하는 (x, y) 좌표가 된다!

                                    
                                        let documentHeight= document.documentElement.offsetHeight // 문서 높이
                                        let viewportHeight= window.innerHeight // 뷰포트 높이

                                        // 마지막 페이지가 보이도록 스크롤한다
                                        window.scrollTo(0, documentHeight - viewportHeight)
                                    
                                

☞ 참고로, scrollTo(x, y);는 scroll(x, y);와 사실상 같은 움직임을 보인다!

                                    
                                        if (window.scrollY) { // y축 방향으로 스크롤했다면;
                                            window.scroll(0, 0) // 스크롤을 문서의 (0, 0) 위치로 재설정
                                        }

                                        window.scrollBy(0, window.innerHeight) // 한 페이지 아래로 스크롤
                                        // window.scrollBy(0, -window.innerHeight) // 한 페이지 위로 스크롤
                                    
                                

* cf) behavior 옵션을 주어 스크롤 움직임을 설정해줄 수도 있다:

                                    
                                        window.scrollTo({
                                            left: 0,
                                            top: documentHeight - viewportHeight,
                                            behavior: "smooth" // 부드러운 스크롤
                                        });
                                    
                                

☞ behavior: 속성값에는 instant (단번에 스크롤), auto (브라우저 및 스크롤 대상요소나 Css에 설정된 scroll-behavior 속성에 따른다)도 있다!

                                        
                                            const el= document.querySelector("#box")

                                            el.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })
                                        
                                    

• 요소.offsetLeft/offsetTop // 요소의 x, y 좌표 ← 이는 대개 문서 좌표이지만, 포지션이 지정된 요소의 자손이나 테이블 셀 등에서는 컨테이너에 상대적인 좌표이다!
• 요소.clientWidth/clientHeight(컨텐츠 영역과 패딩까지), 요소.offsetWidth/offsetHeight(테두리까지) // 화면에 표시된 요소의 크기

* cf) 요소의 스크롤 크기는 요소.scrollWidth/scrollHeight로 알 수 있는데, 이는 컨텐츠 영역과 패딩, 넘치는 컨텐츠까지 포함한다. 한편, 요소.scrollLeft/scrollTop(요소의 뷰포트 안에 있는 컨텐츠의 스크롤 오프셋)은 여타 속성들과는 달리 쓰기 가능한 프로퍼티이므로, 이를 써서 요소 안에서 컨텐츠를 스크롤할 수 있다!

                                    
                                        document.locatin= "http://www.sosohan.xyz" // 절대 URL로 이동
                                        document.location= "/about#history=express" // (현재 문서를 기준으로 하는)상대 URL 및 (id가 지정된)해시로 바로 이동하는 것도 가능하다!

                                        document.location= "#top" // 현재 문서의 최상단으로 이동한다
                                    
                                

                                    
                                        location.href= "http://www.sosohan.xyz/about?test=1#history=express" // URL 전체

                                        location.path= "/about2" // 페이지 이동
                                        location.search= "?test=2" // 검색 매개변수 변경
                                        location.hash= "#history=v-pills-LocationObj" // 해시 추가
                                    
                                

* cf) location.reload([true])는 현재 페이지를 다시 읽어오는데(= F5키), true 옵션을 주면; (게시판에서 새 글을 확인하는 등의 경우에)브라우저 캐시를 무시하고 [새로고침]을 실행한다. location.assign(URL)(= document.location= "URL")은 현재 문서에 새 주소를 할당하여 이동하는데, history 스택에 추가되며 [뒤로] 버튼을 통해 (현재 문서로)다시 돌아올 수 있다. 반면, location.replace(URL)은 assign()과 같은 방식으로 작동하되, 현재 문서에 대한 history 스택이 초기화되어, [뒤로] 버튼을 누르면; (현재 문서가 아니라)그 이전 문서로 돌아가게 된다!

• 오렌지 앵커
• 사과 앵커
• 수박 앵커

* 현재 hash 위치는?

                                    
                                        function funcRef() {
                                            const hash= location.hash
                                            document.querySelector('.log-hash_ex').textContent= `현재 위치는 「${hash}」입니다!`
                                        }

                                        window.addEventListener('hashchange', funcRef) // 해시값이 바뀌면; funcRef() 함수를 실행한다
                                    
                                

☞ 참고로, 이 이벤트는 history.pushState()나 history.replaceState()에 의해 해시가 수정될 때는 발생하지 않는다!

* cf) history.go() 메서드는 이동할 단계를 지정해줄 수 있다: go(-1/0/1)(= 뒤로/새로고침/앞으로), go(-2/2)(= 2단계 뒤로/다음으로)

* cf) 두번째 인자는 상태의 타이틀을 나타낼 문자열이 들어가지만, 대부분의 브라우저에서 지원하지 않기에 빈 문자열을 넣어주면 된다. 마지막 인자는 새 히스토리 항목의 URL 인데(생략 시; 문서의 현재 URL), 실제 페이지 이동은 하지 않으며, 새 URL이 상대 URL인 경우 현재 URL을 기준으로 하며, 새 URL은 현재 URL과 동일출처여야 한다!

히스토리 이벤트 예)

* cf) 이 API의 주요 목적은 React나 Vue와 같이 가상 DOM을 사용하는 싱글 페이지 애플리케이션 ^SPA 웹사이트를 지원하는 것이다. 이러한 웹사이트는 SPA 라우터에서의 페이지 이동에, fetch();와 같은 JavaScript API를 사용하여 페이지 전부를 새로 불러오는 대신, 새로운 컨텐츠만으로 페이지를 업데이트한다. 이에 서버에서 새 페이지를 로드하지 않고도 웹사이트를 사용할 수 있으므로, 웹사이트의 속도를 높일 수 있게된다!

                                    
                                        let name= localStorage.username // 스토리지에 저장된 username 값

                                        if (! name) {
                                            name= prompt("너 이름이 어떻게 돼?")
                                            localStorage.username= name // 사용자의 응답을 받아 스토리지에 저장한다
                                        }
                                    
                                

웹 스토리지 예)

➥ 로컬/세션 스토리지의 프로퍼티는 delete 연산자를 써서 제거할 수도 있고, Object.keys() 및 for .. in 루프를 써서 열거할 수도 있다. 또한, 아래와 같은 메서드들도 사용할 수 있다:

• localStorage.setItem(키, 값) 스토리지에 (객체와 같은 방식으로)키와 값 저장
• localStorage.getItem(키) 저장된 값 가져오기(없으면; null) ← localStorage.키, localStorage['키'] 방식으로도 사용할 수 있다!
• localStorage.removeItem(키) 저장된 특정 키 삭제
• localStorage.clear() 스토리지 키 전부 비우기
• localStorage.key(인덱스) 인덱스 번호에 해당하는 키
• localStorage.length 저장된 항목의 개수

✓   일반 객체와는 달리, 스토리지에 저장되는 데이터는 항시 문자열로 저장되므로 문자열이 아닌 데이터를 저장할 때는 직접 인코딩/디코딩해주어야 한다:

                                    
                                        localStorage.x= 10 // "10" ← 이 숫자는 자동으로 문자열로 변환되어 저장된다!
                                        let x= parseInt(localStorage.x) // 10 ← 가져와서 사용할 때는 다시 숫자로 파싱해주어야 한다!

                                        localStorage.lastRead= new Date().toUTCString(); // 날짜를 문자열로 저장함
                                        let lastRead= new Date(Date.parse(localStorage.lastRead)); // 가져올 때는 다시 파싱하여 사용하여야 한다!

                                        localStorage.data= JSON.stringify(data) // 인코딩 후 저정한다
                                        let data= JSON.parse(localStorage.data) // 파싱하여 가져온다
                                    
                                

• key 스토리지 이벤트 객체의 바뀐 키 ← clear() 시는 null 을 반환한다
• oldValue, newValue 이전 키, 새로운 키 ← 새로 추가된 경우는 oldValue가, 제거된 경우에는 newValue가 null 이 된다
• url 키를 바꾼 문서의 URL
• storageArea 영향을 받은 스토리지 객체(localStorage나 sessionStorage)

✓   localStroage(및 stroage 이벤트)는 같은 웹사이트를 방문 중인 창(및 탭) 전체에 메시지를 전송하는 역할을 할 수 있다. 예컨대, 사용자가 웹사이트의 배경 음악을 중지하도록 요청한 때, 웹사이트는 이를 localStorage에 저장해서 사용자가 다시 방문할 때 이를 적용하고, 이는 또한 같은 사이트를 표시하는 창 및 탭 전체에 적용되는 것이다!

• 임시 ul 및 li

                                    
                                        <ul>
                                            <li>임시 ul 및 li</li>
                                        </ul>
                                    
                                

☞ 이제, 아래 스크립트 코드를 작성하여 넣어주면; 생성되는 DocumentFragment의 자식노드들은 모두 (한번에)DOM으로 이동하고, 스크립트에는 빈 DocumentFragment만 남게된다!

                                    
                                        <ul id="fruits_list">
                                            <li>임시 ul 및 li</li>
                                        </ul>
                                    
                                

                                    
                                        const list= document.querySelector("#fruits_list")
                                        const fruits= ["배", "사과", "감귤"]

                                        const fragment= new DocumentFragment(); // DocumentFragment 생성

                                        fruits.forEach((fruit) => {
                                            const li= document.createElement("li")
                                            li.textContent= fruit
                                            fragment.appendChild(li)
                                        });

                                        list.appendChild(fragment)
                                    
                                

☞ 문서조각은 document.createDocumentFragment(); 메서드로 생성해줄 수도 있다

* cf) DocumentFragment는 일반 요소노드처럼 사용할 수 있지만, 활성화된 문서 트리구조의 일부가 아니므로 내부 트리를 변경해도 문서에 아무런 영향을 주지 않으며, 문서에 삽입될 때는 (자신이 아니라!)자식요소들이 (모두 일거에!)돔으로 이동하기에 리플로우도 발생하지 않아 성능상 이점이 크다!

                                    
                                        function setTheme(name) { /* 스타일시트에 Link 생성 및 삽입하는 함수 */
                                            // <link href="themes/name.css" rel='stylesheet'>를 생성하여 스타일시트 파일을 불러온다
                                            let link= document.createElement('link')
                                            link.id= 'theme'
                                            link.rel= 'stylesheet'
                                            link.href= `themes/${name}.css`

                                            // id가 [theme]인 기존 링크를 찾아 교체 또는 삽입한다
                                            let currentTheme= document.querySelector('#theme')
                                            if (currentTheme) currentTheme.replaceWith(link) // 링크 교체
                                            else document.head.append(link) // 링크 삽입
                                        }
                                    
                                

                                        
                                            <script id="my-data" type="text/x">
                                                "userId": "jcunicom", "userName": "Kjc"
                                            </script>
                                        
                                    

                                        
                                            const me_data= document.querySelector("#my-data").text

                                            console.log("사용자 정보:", me_data); // 사용자 정보: "userId": "jcunicom", "userName": "Kjc"
                                        
                                    

* cf) <script> 요소와 JavaScript의 유효한 MIME 타입을 사용하면; 서버에 보관된 데이터를 서버사이드 렌더링을 통해 웹문서로 가져올 수도 있다!

                                    
                                        <!-- 웹서버에 보관된 데이터 -->
                                        <script id="data" type="application/json">
                                            { "userId": "jcunicom", "userName": "Kjc" }
                                        </script>
                                    
                                

                                    
                                        const user_info= JSON.parse(document.querySelector("#data").text)

                                        console.log("사용자 정보:", user_info) // 사용자 정보: { userId: 'jcunicom', userName: 'Kjc' }
                                    
                                

                                        
                                            <script src="./components/search-box.js" type="module"></script>
                                        
                                    

* cf) 웹 브라우저는 컴포넌트가 정의되기 전에 웹 컴포넌트를 만날 경우, 범용 HTMLElement 노드를 DOM 트리에 추가해둔 뒤, 나중에 커스텀 엘러먼트가 정의되면; 이를 업그레이드하게 된다. 만약, 웹 컴포넌트에 자식요소가 존재한다면; 자식요소는 컴포넌트가 정의되기 전에는 부정확하게 표시되는데, 이 경우, Css를 써서 숨겨줄 수 있다:

                                    
                                        search-box:not(:defined){
                                            display: inline-block; width: 300px; height: 50px; opacity: 0;
                                        }
                                    
                                

☞ <search-box> 컴포넌트가 정의되기 전에는 숨기되, 위와 같이 최종 레이아웃과 크기를 미리 확보해두면; 요소가 생성되면서 주변 컨텐츠를 다시 렌더링해 성능이 떨어지는 일을 막을 수 있다!

░ 웹 컴포넌트를 직접 작성하는 것은 많이 어렵습니다. 그런 연유로 두서없이 간략한 소개만 했습니다. 나중에라도 필요해지시면; 웹 컴포넌트 작성을 도와주는 Lit.dev 등의 라이브러리를 써보십시오..