DOM [Udemy] React 기본 - 일기장 만들기(2) src/App.js src/DiaryEditor.js ☑️ 사용자 입력을 받는 form (input, textarea) 요소에 특정 길이 이상의 입력이 제대로 들어왔는지 확인하는 코드 작성 ☑️ const handleSubmit : 일기 저장하기 버튼을 눌렀을 때 수행되는 함수를 수정 ☑️ 작성자란(input)에 1글자 미만, 일기본문(textarea)가 5글자 미만일 경우 조건 추가 (al... useRefproject유데미udemy한입크기로잘라먹는리액트DOM리액트DOM DOM 요소 다루기 문제 출처 : 엘리스 SW 엔지니어 트랙 2기 'Home'이라고 적힌 <li> 태그를 생성 insertBefore()를 사용해서 menu의 <li> 태그 앞에 'Home'을 삽입하세요. insertBefore() 메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다. insertBefore()를 사용해서 calender의 첫 번째 child로 예약 알람 문구를 삽입하세요. re... JavaScriptDOMDOM DOM 요소들의 개수 세기 문제 출처 : 엘리스 SW 엔지니어 트랙 2기 div 내부 모든 <p> 요소 세기 .getElementsByTagName() 로 모든 p 태그(메뉴)의 개수를 구한다 특정 id 에 들어있는 <p> 요소 세기 coffee 변수에 .getElementById()를 이용해서 coldbrew id 를 담아주고 num 변수에 coldbrew id에 들어있는 모든 p 태그(메뉴)의 개수를 구한다 위와 ... JavaScriptDOMDOM [DOM] DOM이란 무엇인가 출처: 엘리스 sw 엔지니어 트랙 DOM(document object model) : 문서 객체 모델 객체 지향 모델로써 구조화된 문서를 표현하는 방식 HTML이나 XML 문서의 프로그래밍 인터페이스 : DOM은 문서에 구조화된 표현을 제공, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 해줌 Core DOM: 모든 문서 타입을 위한 dom 모델 HTML DOM: HTML... DOMDOM EventDOM [TIL] JS - DOM과 이벤트 이해하기 HTML 문서에 대한 인터페이스 DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스 HTML DOM : HTML 문서를 위한 DOM 모델 ✔️ 01-2 HTML DOM HTML 문서를 조작하고 접근하는 표준화된 방법 모든 HTML 요소는 HTML DOM을 통해 접근 가능 01-3 Document 객체 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시!! HTML 요소의 선... 엘리스JavaScriptDOMDOM [TIL9] DOM API - window, document, element 객체 📍 MDN window 객체 문서 주의 사항 > 요소에 해당 함수를 적용시킬때 요소.속성값(임의로정한) = 함수() 형태로 한뒤 clearTimeout(요소.속성값); 으로 해야 잘 적용된다.! setInterval (function() { 실행코드 }, ms ) 📍 MDN - Document 객체 문서 create 메소드에는 DOM Element 와 node 객체를 만들어내는 메소드가 모두... JavaScriptcheatsheetDOMTILDOM DOM을 이용한 유효성 검증 스프린트 회원가입시 아이디와 비밀번호에 대한 유효성을 검증하는 스프린트를 진행하였다. index.html 먼저 DOM으로 HTML을 조작하기 위해 조작하고자 하는 input이나 div에 id,class를 지정해주었다. script.js 먼저 DOM으로 조작할 엘리먼트들을 querySelector로 불러와 변수에 저장한다. 이벤트 안에서 사용할 함수는 4가지이다. (주석 참고) 다음으로 각각의 입력 상... DOM유효성검증DOM [Java Script] JS HTML DOM HTML DOM 웹페이지가 로드될 때, 브라우저는 Document Object Model를 생성한다. 웹페이지 자체를 DOM 함수 및 개체로 다룰 수 있음. property Id가 demo인 tag를 찾아서 innerHTML속성을 초기화시킨다. 단순히 문자열뿐만 아니라 html tag를 입력할 수 있다. Finding HTML Elements document.getElementById(id)... JavaScriptDOMhtmlDOM 07. 이벤트 💡 호출하는 함수를 이벤트 핸들러라고 한다. 📌 7-2 이벤트 타입이란? 이벤트의 종류를 나타내며 마우스 이벤트, 폼 이벤트, 키보드 이벤트, 문서 이벤트, CSS 이벤트 등등이 있다. 📃 많이 사용하는 이벤트 목록 마우스 이벤트 이벤트 타입 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 마우스 커서를 요소 위에서 움직일 때 마우스 커서가 요소 밖으로... DOMEventDOM WIL 3 DOM, React 입문 주차 문서 객체 모델 (DOM) Document Object Model 정의: 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것입니다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있... React항해99DOMDOM 08. 이벤트 위임 📌 8-1 이벤트 전파란? 이벤트가 생성된 시점에서 이벤트의 전파 과정으로 3가지 과정인 캡처링, 타깃, 버블링 과정으로 구분된다. 캡처링: 상위 요소에서 발생한 이벤트가 하위 요소 방향으로 전파되는 과정 타깃: 실제로 이벤트가 발생한 대상 버블링: 하위 요소에서 발생한 이벤트가 상위 요소 방향으로 전파되는 과정 📌 8-2 이벤트 전파 과정 각각의 자식과 부모 태그 요소에 이벤으를 등록해서 ... 이벤트 전파이벤트 위임DOMEventDOM React에서 Key가 필요한 이유 다음과 같이 map을 통해 리스트를 보여주면 문제가 발생한다. 여기서 고유한 Key값이 없다면 모든 데이터를 비교해야 하지만, Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하면 돼서 불필요한 렌더링을 없애준다. 그러기 위해서는 중복되지 않는 고유한 값을 key 값으로 부여해 주어야 한다. React에서는 key가 동일할 경우 동일한 Dom 요소를 보여주기 때문... ReactkeyDOMrenderingDOM real-dom과 virtual-dom의 차이 동적으로 DOM을 제어하는 측면에 있어서 Vanilla Javascript 보다 직관적으로 이해하기 쉽고, 적은양의 코드로 개발할 수 있는 라이브러리인 JQuery 가 등장했다. 이 과정을 JQuery로 아래와 같이 나타낼 수 있다. 대규모 웹에선 사용자의 인터렉션이 많아 직접적인 DOM 조작이 잦은데, JQuery를 사용하면 화면에서 많은 연산을 발생시키기 때문에 브라우저 성능이 낮아지는 ... jqueryJavaScriptDOMDOM JavaScript | DOM & document 페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델 역할: HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 이어줌 JavaScript가 웹 페이지에 접근하고, 페이지 수정하는 것을 가능하게 함 JavaScript의 document 객체: DOM 구조를 접근하는 관문. HTML 문서를 나타낸다고 할 수 있음. js가 html에 접근할 때 사용 DOM트리의 ro... DocumentDOMDOM [JS] DOM 접근하기 💡 자바스크립트를 이용해 HTML 요소에 접근해보자! 🟤 HTML onclick 이벤트 핸들러에 함수 printText()를 적용한다. 🟤 Java Script document.getElementById("id명") : css의 아이디 선택자라고 보면된다. value를 통해 input태그에 값을 출력할 수 있다. 🟤 HTML onclick 이벤트 핸들러에 함수 changeColor()를 적용... JavaScriptCSS우선순위DOMCSS우선순위 [JS/브라우저] DOM 1.<head>안쪽에 <script>추가하기 2.<body> 내의 최하단에 <script>추가하기 HTML 태그들 사이에 script 태그가 위치하면 발생하는 2가지 문제 위와 같은 상황을 막기 위해 script 태그는 body 태그 최하단에 위치하는 게 좋다. 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document객체를 조회할 수 있다. Q. body 엘리먼트의 자식 엘리... browserDOM코드스테이츠javascirptDOM DOM method (2) 1. textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다. 2. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다. 3. 이번에는 append를 이용해 container의 자식 요소로 추가합니다. 4. 정리 class와 id 말고는 다른 attribute를 추가할 수는 없나요? -> 라는 메소드를 검색해보세요. 1. 먼저 삭제하려는 ... DOMDOM [생활코딩] Object Model(1/2) Object Model JS를 통해서 브라우저를 제어하기 위해서는 JS로 제어할 수 있는 Object(객체)가 준비가 돼있어야 한다. 우리가 자바스크립트로 제어할 수 있도록 브라우저의 여러 구성요소들을 객체로 만들어서(객체화) 제공해주는 것. 웹브라우저의 구성요소 하나하나 객체화 되어있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있다. ex) JavaScript를 통해 프로... DOMObjectModel생활코딩DOM [TIL] 8/8 CSS id와 class 일단 id와 class의 공통점은 HTML Tag에 설정해 스타일을 지정해준다는 것이다. id와 class의 차이점 id는 하나의 객체에만 적용할 수 있고 = 유일해야한다, class는 이름답게 여러 객체에 적용할 수 있다. 만약 하나의 객체에 id와 class가 둘 다 적용되어 있다면 어떤 style이 적용될까? 이 부분은 명시도에 대해 더 찾아봐야하는데, 간략하게... TILCSSDOMCSS [CS] DOM Day-18 DOM JavaScript를 이용해 Element 속성값을 얻어내거나, 변경하는 방법 HTML문서의 구조와 관계를 객체(Object)로 표현한 모델입니다. id : practice class : highlight, red 내용 : Here is one Element 자식 엘리먼트 : span (2개) ex) console.log 입력시 ex) console.dir 입력시 속성에 대한 값들을 ... textContentchildrenbuttonInnerHTMLchildrenNodesdirEventlogDom 조작value 등록이벤트DOMelementgetInputValueDOM 2021-11-12(금) 5일차 • 브라우저 엔진 전송된 데이터를 브라우저가 처리를 해서 보여주는 거 브라우저가 제일 먼저 받아오는 게 html 코드 브라우저 안에 통신이라는 파트가 있을 수 밖에 없음 브라우저 엔진 DOM은 문자로 되어 있는 데이터를 메모리상에 만들어 놓은 거 style 태그 안에 있는 건 자기가 처리를 못 함 자바스크립트 엔진한테 넘기는 거 내가 만든 게 아니라 남이 만든 거 우리는 너가 원하는 거 다 ... DocumentDOM브라우저 엔진windowDOM [TIL] 프리코스 #14 문제풀이 방법에 대해 많이 고민하다 보니 어느새 이틀이 순식간에 지나갔다. 주어진 시간 내에 문제를 풀 때 흐름이 중요한 것 같다. 한 번 막혀서 무너지게 된다면 쉬운 것도 놓치기 때문이다. 계속해서 듣고 느끼는 것처럼 개념 놓치지 않기. 컨디션, 멘탈 관리 잘하기. DOM 개념 익히기 DOM이란? "Document Object Model" HTML에 접근하여 Object처럼 조작할 수 있는... TILDOMDOM Dom (Document Object Model) 정리 요약(1) HTML은 트리 구조를 가지고 있습니다. 객체도 자세히 보면 트리 구조를 가지고 있습니다. 그래서 정리하자면 DOM이란, HTML 엘리먼트를 javascript 이용해서 객체의 형태로 가져올수 있다. (* 하지만 DOM이 javascript는 아닙니다.) 2. 그러면 어떻게 DOM에 접근을 할수 있을까 ? document라는 전역변수로 접근을 할수 있습니다. [그림] 객체 형태는 아지만 ht... DOMDOM 📒TIL) JavaScript Dom DOM이란(Document Object Model) 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object)모델 입니다. JavaScript는 이 모델로 웹 페이지에 접근하고 페이지를 수정 할수 있습니다. 아래는 DOMD이 트리구조로 되어 있고 어떻게 연결 되어있는지 설명 되어 있는 사진입니다. 바로 document 전역객체를 통해 접근할수 있습니다. JavaScript의 docu... TILJavaScriptDOMDOM
[Udemy] React 기본 - 일기장 만들기(2) src/App.js src/DiaryEditor.js ☑️ 사용자 입력을 받는 form (input, textarea) 요소에 특정 길이 이상의 입력이 제대로 들어왔는지 확인하는 코드 작성 ☑️ const handleSubmit : 일기 저장하기 버튼을 눌렀을 때 수행되는 함수를 수정 ☑️ 작성자란(input)에 1글자 미만, 일기본문(textarea)가 5글자 미만일 경우 조건 추가 (al... useRefproject유데미udemy한입크기로잘라먹는리액트DOM리액트DOM DOM 요소 다루기 문제 출처 : 엘리스 SW 엔지니어 트랙 2기 'Home'이라고 적힌 <li> 태그를 생성 insertBefore()를 사용해서 menu의 <li> 태그 앞에 'Home'을 삽입하세요. insertBefore() 메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다. insertBefore()를 사용해서 calender의 첫 번째 child로 예약 알람 문구를 삽입하세요. re... JavaScriptDOMDOM DOM 요소들의 개수 세기 문제 출처 : 엘리스 SW 엔지니어 트랙 2기 div 내부 모든 <p> 요소 세기 .getElementsByTagName() 로 모든 p 태그(메뉴)의 개수를 구한다 특정 id 에 들어있는 <p> 요소 세기 coffee 변수에 .getElementById()를 이용해서 coldbrew id 를 담아주고 num 변수에 coldbrew id에 들어있는 모든 p 태그(메뉴)의 개수를 구한다 위와 ... JavaScriptDOMDOM [DOM] DOM이란 무엇인가 출처: 엘리스 sw 엔지니어 트랙 DOM(document object model) : 문서 객체 모델 객체 지향 모델로써 구조화된 문서를 표현하는 방식 HTML이나 XML 문서의 프로그래밍 인터페이스 : DOM은 문서에 구조화된 표현을 제공, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 해줌 Core DOM: 모든 문서 타입을 위한 dom 모델 HTML DOM: HTML... DOMDOM EventDOM [TIL] JS - DOM과 이벤트 이해하기 HTML 문서에 대한 인터페이스 DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스 HTML DOM : HTML 문서를 위한 DOM 모델 ✔️ 01-2 HTML DOM HTML 문서를 조작하고 접근하는 표준화된 방법 모든 HTML 요소는 HTML DOM을 통해 접근 가능 01-3 Document 객체 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시!! HTML 요소의 선... 엘리스JavaScriptDOMDOM [TIL9] DOM API - window, document, element 객체 📍 MDN window 객체 문서 주의 사항 > 요소에 해당 함수를 적용시킬때 요소.속성값(임의로정한) = 함수() 형태로 한뒤 clearTimeout(요소.속성값); 으로 해야 잘 적용된다.! setInterval (function() { 실행코드 }, ms ) 📍 MDN - Document 객체 문서 create 메소드에는 DOM Element 와 node 객체를 만들어내는 메소드가 모두... JavaScriptcheatsheetDOMTILDOM DOM을 이용한 유효성 검증 스프린트 회원가입시 아이디와 비밀번호에 대한 유효성을 검증하는 스프린트를 진행하였다. index.html 먼저 DOM으로 HTML을 조작하기 위해 조작하고자 하는 input이나 div에 id,class를 지정해주었다. script.js 먼저 DOM으로 조작할 엘리먼트들을 querySelector로 불러와 변수에 저장한다. 이벤트 안에서 사용할 함수는 4가지이다. (주석 참고) 다음으로 각각의 입력 상... DOM유효성검증DOM [Java Script] JS HTML DOM HTML DOM 웹페이지가 로드될 때, 브라우저는 Document Object Model를 생성한다. 웹페이지 자체를 DOM 함수 및 개체로 다룰 수 있음. property Id가 demo인 tag를 찾아서 innerHTML속성을 초기화시킨다. 단순히 문자열뿐만 아니라 html tag를 입력할 수 있다. Finding HTML Elements document.getElementById(id)... JavaScriptDOMhtmlDOM 07. 이벤트 💡 호출하는 함수를 이벤트 핸들러라고 한다. 📌 7-2 이벤트 타입이란? 이벤트의 종류를 나타내며 마우스 이벤트, 폼 이벤트, 키보드 이벤트, 문서 이벤트, CSS 이벤트 등등이 있다. 📃 많이 사용하는 이벤트 목록 마우스 이벤트 이벤트 타입 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 마우스 커서를 요소 위에서 움직일 때 마우스 커서가 요소 밖으로... DOMEventDOM WIL 3 DOM, React 입문 주차 문서 객체 모델 (DOM) Document Object Model 정의: 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것입니다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있... React항해99DOMDOM 08. 이벤트 위임 📌 8-1 이벤트 전파란? 이벤트가 생성된 시점에서 이벤트의 전파 과정으로 3가지 과정인 캡처링, 타깃, 버블링 과정으로 구분된다. 캡처링: 상위 요소에서 발생한 이벤트가 하위 요소 방향으로 전파되는 과정 타깃: 실제로 이벤트가 발생한 대상 버블링: 하위 요소에서 발생한 이벤트가 상위 요소 방향으로 전파되는 과정 📌 8-2 이벤트 전파 과정 각각의 자식과 부모 태그 요소에 이벤으를 등록해서 ... 이벤트 전파이벤트 위임DOMEventDOM React에서 Key가 필요한 이유 다음과 같이 map을 통해 리스트를 보여주면 문제가 발생한다. 여기서 고유한 Key값이 없다면 모든 데이터를 비교해야 하지만, Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하면 돼서 불필요한 렌더링을 없애준다. 그러기 위해서는 중복되지 않는 고유한 값을 key 값으로 부여해 주어야 한다. React에서는 key가 동일할 경우 동일한 Dom 요소를 보여주기 때문... ReactkeyDOMrenderingDOM real-dom과 virtual-dom의 차이 동적으로 DOM을 제어하는 측면에 있어서 Vanilla Javascript 보다 직관적으로 이해하기 쉽고, 적은양의 코드로 개발할 수 있는 라이브러리인 JQuery 가 등장했다. 이 과정을 JQuery로 아래와 같이 나타낼 수 있다. 대규모 웹에선 사용자의 인터렉션이 많아 직접적인 DOM 조작이 잦은데, JQuery를 사용하면 화면에서 많은 연산을 발생시키기 때문에 브라우저 성능이 낮아지는 ... jqueryJavaScriptDOMDOM JavaScript | DOM & document 페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델 역할: HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 이어줌 JavaScript가 웹 페이지에 접근하고, 페이지 수정하는 것을 가능하게 함 JavaScript의 document 객체: DOM 구조를 접근하는 관문. HTML 문서를 나타낸다고 할 수 있음. js가 html에 접근할 때 사용 DOM트리의 ro... DocumentDOMDOM [JS] DOM 접근하기 💡 자바스크립트를 이용해 HTML 요소에 접근해보자! 🟤 HTML onclick 이벤트 핸들러에 함수 printText()를 적용한다. 🟤 Java Script document.getElementById("id명") : css의 아이디 선택자라고 보면된다. value를 통해 input태그에 값을 출력할 수 있다. 🟤 HTML onclick 이벤트 핸들러에 함수 changeColor()를 적용... JavaScriptCSS우선순위DOMCSS우선순위 [JS/브라우저] DOM 1.<head>안쪽에 <script>추가하기 2.<body> 내의 최하단에 <script>추가하기 HTML 태그들 사이에 script 태그가 위치하면 발생하는 2가지 문제 위와 같은 상황을 막기 위해 script 태그는 body 태그 최하단에 위치하는 게 좋다. 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document객체를 조회할 수 있다. Q. body 엘리먼트의 자식 엘리... browserDOM코드스테이츠javascirptDOM DOM method (2) 1. textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다. 2. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다. 3. 이번에는 append를 이용해 container의 자식 요소로 추가합니다. 4. 정리 class와 id 말고는 다른 attribute를 추가할 수는 없나요? -> 라는 메소드를 검색해보세요. 1. 먼저 삭제하려는 ... DOMDOM [생활코딩] Object Model(1/2) Object Model JS를 통해서 브라우저를 제어하기 위해서는 JS로 제어할 수 있는 Object(객체)가 준비가 돼있어야 한다. 우리가 자바스크립트로 제어할 수 있도록 브라우저의 여러 구성요소들을 객체로 만들어서(객체화) 제공해주는 것. 웹브라우저의 구성요소 하나하나 객체화 되어있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있다. ex) JavaScript를 통해 프로... DOMObjectModel생활코딩DOM [TIL] 8/8 CSS id와 class 일단 id와 class의 공통점은 HTML Tag에 설정해 스타일을 지정해준다는 것이다. id와 class의 차이점 id는 하나의 객체에만 적용할 수 있고 = 유일해야한다, class는 이름답게 여러 객체에 적용할 수 있다. 만약 하나의 객체에 id와 class가 둘 다 적용되어 있다면 어떤 style이 적용될까? 이 부분은 명시도에 대해 더 찾아봐야하는데, 간략하게... TILCSSDOMCSS [CS] DOM Day-18 DOM JavaScript를 이용해 Element 속성값을 얻어내거나, 변경하는 방법 HTML문서의 구조와 관계를 객체(Object)로 표현한 모델입니다. id : practice class : highlight, red 내용 : Here is one Element 자식 엘리먼트 : span (2개) ex) console.log 입력시 ex) console.dir 입력시 속성에 대한 값들을 ... textContentchildrenbuttonInnerHTMLchildrenNodesdirEventlogDom 조작value 등록이벤트DOMelementgetInputValueDOM 2021-11-12(금) 5일차 • 브라우저 엔진 전송된 데이터를 브라우저가 처리를 해서 보여주는 거 브라우저가 제일 먼저 받아오는 게 html 코드 브라우저 안에 통신이라는 파트가 있을 수 밖에 없음 브라우저 엔진 DOM은 문자로 되어 있는 데이터를 메모리상에 만들어 놓은 거 style 태그 안에 있는 건 자기가 처리를 못 함 자바스크립트 엔진한테 넘기는 거 내가 만든 게 아니라 남이 만든 거 우리는 너가 원하는 거 다 ... DocumentDOM브라우저 엔진windowDOM [TIL] 프리코스 #14 문제풀이 방법에 대해 많이 고민하다 보니 어느새 이틀이 순식간에 지나갔다. 주어진 시간 내에 문제를 풀 때 흐름이 중요한 것 같다. 한 번 막혀서 무너지게 된다면 쉬운 것도 놓치기 때문이다. 계속해서 듣고 느끼는 것처럼 개념 놓치지 않기. 컨디션, 멘탈 관리 잘하기. DOM 개념 익히기 DOM이란? "Document Object Model" HTML에 접근하여 Object처럼 조작할 수 있는... TILDOMDOM Dom (Document Object Model) 정리 요약(1) HTML은 트리 구조를 가지고 있습니다. 객체도 자세히 보면 트리 구조를 가지고 있습니다. 그래서 정리하자면 DOM이란, HTML 엘리먼트를 javascript 이용해서 객체의 형태로 가져올수 있다. (* 하지만 DOM이 javascript는 아닙니다.) 2. 그러면 어떻게 DOM에 접근을 할수 있을까 ? document라는 전역변수로 접근을 할수 있습니다. [그림] 객체 형태는 아지만 ht... DOMDOM 📒TIL) JavaScript Dom DOM이란(Document Object Model) 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object)모델 입니다. JavaScript는 이 모델로 웹 페이지에 접근하고 페이지를 수정 할수 있습니다. 아래는 DOMD이 트리구조로 되어 있고 어떻게 연결 되어있는지 설명 되어 있는 사진입니다. 바로 document 전역객체를 통해 접근할수 있습니다. JavaScript의 docu... TILJavaScriptDOMDOM