728x90 HTML3 [HTML] DOM 으로 HTML 조작하기(2) - querySelector, querySelectorAll 🌈 DOM으로 HTML 조작하기 - querySelector, querySelectorAll DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector를 이용할 수 있다. querySelector('셀렉터') 를 이용할 수 있는데, 셀렉터로는 HTML tag, id, class를 가장 많이 이용한다. 1. ID로 엘리먼트 정보 조회하기 document.querySelector('#test') 2. Class로 엘리먼트 정보 조회하기 document.querySelector('.test') 3. div로 엘리먼트 정보 조회하기 document.querySelector('div') 💡 실행결과 2022. 5. 2. [HTML] DOM 으로 HTML 조작하기(1) - createElement, append, appendChild 🌈 DOM으로 HTML 조작하기 - createElement, append, appendChild DOM 으로 HTML 을 조작하는 방법중 가장 기초적인 것은 element를 만드는 것이다. document.createElement('div') 작업의 결과를 담기 위해선 변수를 선언하고 작업의 결과를 변수에 할당할 수도 있다. const test = document.createElement('div') 변수를 선언하고 append 해주지 않으면 적용이 안되는데, 만들어진 변수를 사용하고 싶다면 아래와 같이 append 하면 된다. document.body.append(test) 해당 변수에 textContent 라는 메소드를 활용하면 문자열도 입력할 수 있다. test.textContent = "Hell.. 2022. 5. 2. [HTML] HTML이란? 자주 사용하는 HTML 요소 🌈 HTML HTML은 HyperText Markup Language 의 약자로 웹 페이지의 틀을 만드는 마크업 언어이다. HTML은 기본적으로 부등호 로 묶인 tag들의 집합으로 구성되어 있다. Ex. , Tag로 시작해서 Tag 로 끝나는 것을 아래 예제로 확인할 수 있다. 👉 자주 사용하는 HTML의 요소 1. VS tag 는 한 줄을 다 차지하고 tag는 컨텐츠의 크기만큼만 공간을 차지한다. 위 코드를 웹 페이지 상에서 확인해보면 div tag는 한 줄을 차지하지만, span tag는 컨텐츠 크기만큼만 공간을 차지하는 것을 확인할 수 있다. 2. img를 삽입할 때 사용한다. img 태그는 닫는 태그가 없다. 3. 링크를 삽입할 때 사용한다. 4. , , ul - unordred list li -.. 2022. 4. 27. 이전 1 다음 728x90
