HTML, CSS/DOM3 SVG 이미지 객체를 다시 그리는(Redraw) 방법 내가 부딪힌 문제 내가 필요한 애니메이션들을 SVG 객체로 생성에 화면에 표시했다. 버튼 한 번의 클릭으로 해당 SVG 객체의 애니메이션이 다시 시작되게 하고 싶었다. 그러기 위해서는 DOM Tree에서 해당 객체를 지우고 다시 삽입하면 될 듯 싶었다. 하여서 시도해 본 방법은 removeChild()와 appendChild() 메소드를 사용한 것이다. const svg = ; document.body.removeChild(svg); document.body.appendChild(svg); 하지만 이런 방법으로는 브라우저의 재랜더링만 일어날 뿐 애니메이션이 다시 시작되지는 않았고, 기존에 할당했던 SVG 객체의 변수를 초기화하고 다시 재할당해야 애니메이션이 다시 시작되게 할 수 있었다. 해결방법 구글링을.. 2021. 12. 18. XML Serialization와 DOMParser XML Serialization(XML 직렬화) DOM 트리를 XML 방식의 문자열로 저장 XML Serialization 객체는 DOM 트리 구조를 문자열로 변환하는 serializeToString() 메소드를 제공합니다. 참고 https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer DOMParser XML/HTML 방식의 문자열을 DOM 트리 구조의 문서 객체로 변환 XMLSerializer 객체와 함께 사용하면 DOM 구조의 문서를 문자열로 변환하거나 또는 반대의 작업을 할 수 있습니다. HTML 문서의 경우 Element.innerHTML Element.outerHTML를 통해 내부의 DOM 트리 구조를 변경할 수 있다. 참고 https:/.. 2021. 12. 18. DOM 엘리먼트 <input type="number"> 사용하기 의 특징 1. 사용자가 숫자만 입력할 수 있으므로 유효성 검사를 따로 할 필요가 없다. 2. 값 조정 박스가 따로 등장한다. 3. 는 입력하는 숫자의 자릿수를 지정할 수 없으므로 생년월인 같은 지정된 자릿수의 숫자를 입력하게 하려면 를 사용해야한다. input type="number"의 값 조정 박스 최대값 최소값을 지정할 수 있다. 입력값 추천 리스트를 만들 수 있다. 화살표 버튼을 한번 클릭할 때 마다 올라가는 값을 바꿀 수 있다. 화살표 버튼을 통해 소수점이 입력되게 할 수 있다. 2021. 7. 5. 이전 1 다음
