< Code diaries />

function stateCheck(e) { let status = e.target.readyState; let msg = ''; switch (status) { case 'loading': msg = '웹문서 로딩중'; break; case 'interactive' : msg = '웹문서 로딩완료, 리소스 로딩중'; break; case 'complete' : msg = '모든 리소스 로딩 완료' break; default : msg = '상태를 체크할 수 없습니다.' } console.log(..

이벤트란?웹사이트 이용시 사용자가 조작하는 어떤 동작이나, 브라우저 자체에서 상태를 캐치하여 일어날 수 있는 동작들을 말한다.예를 들면 문서를 불러들이는 순간(온로딩), 마우스를 요소에 올리는 동작, 클릭하는 동작, 스크롤링 등이 대표적인 이벤트 이다. 웹브라우저에서 일어날 수 있는 이벤트를 3가지로 나누어 정리 해보자. 1. 문서로딩 이벤트Event이벤트가 발생하는 순간DOMContentLoaded웹브라우저가 HTML을 리딩하여 DOM 트리구조를 만든 직후에 발생하며,CSS 및 Image, Video, Audio등의 자원이 로딩될때까지 기다리지는 않는다.Document객체에서 발생한다. 그래서 on 이벤트는 적용되지 않고, addEventListener를 사용해야 한다.document.addEventL..

Node의 유형을 지정하는 정수타입의 값이다.nodeType(Value)definiationincludes..1Node.ELEMENT_NODE, ...2Node.ATTRIBUTE_NODE요소의 속성3Node.TEXT_NODE요소 또는 속성의 실제 텍스트4Node.CDATA_SECTION_NODECDATASection, 5Node.ENTITY_REFERENCE_NODE더이상 사용하지 않음6Node.ENTITY_NODE더이상 사용하지 않음7Node.PROCESSING_INSTRUCTION_NODE와 같은 XML 문서의 처리 지침8Node.COMMENT_NODE 주석문 노드9Node.DOCUMENT_NODEDocument node10Node.DOCUMENT_TYPE_NODE11Node.DOCUMENT_FRA..

NodeList와 HTML Collection은 유사배열객체라서 배열의 모든 메소드를 사용할 수는 없다. NodeList우리가 document.querySelectorAll()로 HTML elements를 가져오면 Nodelist로 들어온다. apple mango blueberry  HTML Collectionchildren 속성으로 가져온 것은 유사배열객체이다.  A B Cconst ul = document.querySelector('ul')const lis = ul.children;console.log(lis)// HTMLCollection(3) [ li, li, li ]

Javascript에서 CSS 변수 다루는 방법을 한번 알아봅시다~  먼저, CSS 변수선언은 아래와 같이 보통 :root에 선언합니다.하위 선택자들이 모두 사용할 수 있도록 하기위함입니다.   1. CSS 내에 변수 선언하기, CSS에서 사용하기// 변수선언:root { --primary : tomato; } // 변수의 값을 사용할때에는 var() css메소드 사용 .wrap { color:var(--primary) }   2. Javascript에서 CSS의 변수값을 가져오기const docs = document.documentElement; const value = getComputedStyle(docs).getPropertyValue('--primary') console.log(value..

오늘은 javascript에서 css 속성을 어떻게 다루는지,어떤 명령어들이 있는지 한 번 정리해 보려고 해요.궁금하신 점은 답글에 남겨주세요  Hello World 1. style 속성을 이용하여 태그의 css를 변경하기h1.style.backgroundColor = 'tomato';h1.style.fontSize = '12px';h1.style.border = '1px solid olive';String 형식으로 들어갈 때에 따옴표안에 세미콜론(;)을 적지 않도록 주의하자. 2. Multiple CSS 지정하기A. cssText 속성을 이용하여 여러 css를 한번에 수정하기.h1.style.cssText = 'font-size:20px; color:blue'; B. Object.assign() 이용하..