요소노드생성 class이름이 clock인 div의 아래쪽에 새로운 요소를 추가해보겠습니다. createElement createElement 메서드를 통해 새로운 요소노드를 생성할 수 있습니다. class이름이 season이고, div로 이루어진 요소를 추가 해보겠습니다. const seasnsonElement = document.createElement("div"); 이 createElement의 매개변수로는, 생성할 요소의 태그 이름을 넣어줍니다. 그 다음 classList를 사용해 season이라는 class이름을 생성해주겠습니다. const seasonElement = document.createElement("div"); seasonElement.classList.add("season"); di..
요소 찾고 선택하기 먼저 다음 코드를 작성해줍니다. 02.10.금요일 15:03 위 코드의 브라우저 실행화면입니다. document.getElementById(id) 특정 요소를 찾을 때에는, 가장 먼서 문서노드 document에 접근해야하기 때문에, document를 작성해줍니다. getElementById는 말 그대로 특정 요소를 id값으로 가져온다는 의미이고, 실제로 특정 요소객체를 반환합니다. console.log(document.getElementById("date")); 실제로 id값이 date인 요소가 반환된 것을 볼 수 있습니다. 만약 동일한 id를 갖고 있는 요소가 여러개인 경우, 가장 위에 있는 첫 번째 요소만 반환하는 API입니다. dcoument.querySelector(cssSel..
웹이란 웹이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미합니다.(출처 - 위키백과) 이러한 웹에서 HTML로 작성된 페이지를 웹 페이지라고 하고, 이 웹페이지들이 여러개 모여있는 집합을 웹사이트라고 부릅니다. 웹 사이트란, http://google.com/과 같은 주소, url에 접속해서 볼 수 있는 웹 페이지들을 통틀어 말하는 말로, 흔히 말하는 홈페이지라고 할 수 있습니다. HTML과 CSS HTML : Hyper Text Markup Language의 약자로, 쉽게 말하면 브라우저에게 웹 페이지의 요소들이 어떻게 구성되어있는지를 알려주는 역할 CSS : Cascading Style Sheets의 약자로, 말 그대로 웹 페이지의 요소들을 꾸며주는 역할을 하는 sheet 입니..
DOM(Document Object Model) DOM이란 문서객체모델, 즉 DOM은 웹 페이지(HTML이나 XML문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉 자바크스립트 같은 스크립팅 언어가 쉽게 웹피이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 합니다. 다시말해 문서객체란 이나 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만든 것을 말합니다. DOM은 어떻게 생성되고 보여질까? DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이도 합니다. 따라..
