728x90 프로그래밍/HTML5 [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] DOM, Document Object Model 🌈 DOM, Document Object Model DOM 이란 HTML 문서의 구조와 관계를 Object 로 표현한 모델이다. 즉 자바스크립트를 이용하여 엘리먼트의 속성값을 얻어내거나 변경하는 등, HTML을 자유자재로 조작할 수 있는 것이다. DOM이 자바스크립트는 아니고, 그저 접근을 JavaScript로 한다고 생각하면 된다. - 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다. - 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다. - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다. - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다. - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다. - 자바스크립트는 HT.. 2022. 4. 29. [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. [HTML] 간단히 정리해보는 HTML5란 무엇인가 🌈 HTML5 "차세대 웹 표준," WHATWG[Web Hypertext Application Technology Working Group]와 W3C[World Wide Web Consortium]가 발표한 HTML의 최신 버전으로 2014년 10월 28일 완전히 표준화 되었다. 기존에는 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현하고 제공하도록 진화한 웹 프로그맹 언어가 탄생한 것이다. 이런 HTML5라는 말은 꼭 W3C의 HTML5표준 뿐만 아니라 최신 웹 기술을 통틀어 칭하기도 한다. 👉 HTML5의 특징 𝟏. 문법면에서는 이전에 비해 상당히 간결하고 명확해졌다. 이전에는 자바스크립트를 사용해서 엄청난게 긴 코드를 써서 간접적으로 구현해야 했던 기능들이 정식 .. 2022. 4. 27. 이전 1 다음 728x90
