🌎 DOM

[DOM] 태그와 엘리먼트에 대해 알아보자

2023.06.07

태그 HTML 문서에서 엘리먼트를 정의하거나 구분짓기 위해 사용되는 키워드 태그는 각각의 역할과 의미를 가지며, 해당 엘리먼트의 동작이나 표현 방식을 지정한다. 태그는 로 묶여 있는 형태인데, 3가지 종류가 있다. 1) 시작 태그(Opening Tag) 처럼 사용하며 요소의 시작을 정의한다. 2) 종료 태그(Closing Tag) 처럼 사용하며 요소의 끝을 정의하고 요소의 범위를 지정한다. 3) 빈 태그(Void Tag) 처럼 어떤 내용을 가진 게 아니라 속성만을 갖고 있다. 엘리먼트 안녕하세요 이렇게 생긴 것들을 엘리먼트라고 한다. 태그랑 똑같은 거 아니냐고 생각할 수 있는데, 엘리먼트는 태그를 포함해 요소의 전체를 나타낸다. 태그는 만 해당되는데, 엘리먼트는 시작 태그부터 내용, 종료 태그까지 모..

🌎 DOM

[DOM] DOM을 알아보자 (feat. DOM 기본)

2023.06.05

DOM이란? Document Object Model 사용자와 상호작용하는 목적으로, 동적으로 콘텐츠를 표현한다. .gray { filter: grayscale(100%); } const ditto = document.getElementById("ditto"); ditto.onclick = (event) => { ditto.classList.toggle("gray"); }; 메타몽을 클릭할 때마다 onClick이라는 이벤트 리스너의 영향으로 class의 gray가 사라졌다 추가되었다 반복된다. 이런 식으로 사용자와 상호작용하는 역할을 하는 것이 바로 DOM이다. 프론트엔드라면 다양한 이벤트와 인터렉션을 다뤄야 하기 때문에 반드시 DOM에 대한 이해가 필요하다고 생각된다. 콘텐츠를 표현하는 플로우 HTML에..

[DOM] 태그와 엘리먼트에 대해 알아보자

[DOM] DOM을 알아보자 (feat. DOM 기본)

티스토리툴바