본문 바로가기

Tech/DOM7

가로 스크롤 앨범을 만들어보자. 기본적으로 가로/세로 스크롤 바는 노드들의 크기가 브라우저 뷰포트보다 클 때 생긴다. 우리는 또한, css로도 스크롤바를 만들 수 있다. 가로 스크롤 바는 overflow-x와 white-space 속성으로 만들 수 있다. .photo-scroll { overflow-x: scroll; white-space: nowrap; } .photo-scroll-image { width: 50px; height: 50px; border-radius: 10px; margin: 0 16px; } const imageTagWrapper = ({ src, name }: { src: string; name: string }): string => { return ``; }; const photoScrollWrapper = (.. 2021. 8. 22.
DOM Level 3 Events DOM 스펙은 W3C에서 Level 단위로 만들어지고 있다. DOM 레벨 1은 HTML, XML 문서 구조를 정의하는데 초점이 맞춰져 있었다. 이후 발표된 DOM 레벨 2, 3은 위 구조에 따른 상호작용 기능 추가 및 고급 XML 기능을 지원하는데 집중했다. DOM 레벨 3 이벤트 문서는 원래 2000년과 2003년 사이에 개발되었으며 구현자의 추가 피드백과 관심이 있을 때까지 W3C 메모로 게시되었다. 2006년에 Recommendation Track에서 수정 및 진행을 위해 선택되었고, 현재 구현 상태와 스크립트 작성자의 요구를 반영하도록 수정되었다. 오늘은 이벤트에 대해 알아보자. 이벤트는 다음 상황에서 발생한다. user interaction DOM change created or modified.. 2021. 8. 7.
HTMLElement 문서 객체 모델(Document Object Model, DOM)은 자바스크립트 Node 객체의 계층화된 트리이다. HTMLElement 모든 요소들은 HTMLElement의 자식이다. HTMLElement는 Element의 자식이고, Element는 Node의 자식이다. ex1 document.getElementById의 반환 값: HTMLLIElement document.getElementsByTagName의 반환 값: HTMLCollection HTML CSS JavaScript 반환 값이 하나면 HTMLLIElement를 반환하고, 여러 개면 HTMLCollection을 반환한다. ex2 HTMLElement는 여러 가지 종류가 있다. Google HTML CSS JavaScript 표준 문서 H.. 2021. 8. 2.
DOMString DOMString은 UTF-16 문자열을 위한 독립적으로 구현된 DOM 인터페이스이다. JavaScript 문자열은 이미 UTF-16 문자열이므로 JavaScript의 모든 인스턴스 String는 자동으로 DOMString 인스턴스이기도 하다. DOMString 허용하는 특정 Web API의 경우, ToString으로 문자열화한다. DOMString 허용하는 특정 Web API의 경우, null일 때, "null" 대신 빈문자열을 전달하는 레거시 동작이 있다. 오.. 충격적 사실. 참고 https://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString Document Object Model Core 1.1.1 The DOM Structure Model The DOM.. 2021. 7. 31.
This value was evaluated upon first expanding. it may have changed since then. 아래 파란색 `i`를 누르면 This value was evaluated upon first expanding. it may have changed since then. 안내 문구가 나온다. 해당 상황의 경우, 클릭했을 때, console.log로 해당 className을 출력한 뒤, 클래스 이름 'open'을 추가시켜주었다. 화살표를 눌러서 확장했을 때, 현재 상태의 객체의 값이 나온다. 즉, console.log가 찍힌 시점에서는 item만 있었지만, 이후 DOMTokenList에 open이 추가가 됐고, 화살표를 눌러서 확장했을 때, 현재 상태인 item과 open을 둘 다 가지고 있다고 출력된 것이다. console.log는 비동기적으로 실행되는데, 객체의 참조를 동기적으로 받지만, 확장되기전까지.. 2021. 7. 31.
classList Element.classList Element.classList는 요소의 클래스 속성의 컬렉션인 활성DOMTokenList를 반환하는 읽기 전용 속성이다. `활성 DOMTokenList`의 활성의 의미는 아래 게시글을 참고하자. https://egas.tistory.com/80 This value was evaluated upon first expanding. it may have changed since then. 아래 파란색 `i`를 누르면 This value was evaluated upon first expanding. it may have changed since then. 안내 문구가 나온다. 해당 상황의 경우, 클릭했을 때, console.log로 해당 className을 출력한 뒤,.. e.. 2021. 7. 31.

티스토리툴바