★ :root 의 개념 ★ console 창 활용 css 에서 :root{ } 쓰는 경우 - root 가상 클래스 웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스이다. :root 선택자는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용한다. 즉, html 에서 root 는 항상 html 을 가리킨다. 그러나, html 보다 :root 가상 클래스의 스타일 적용 우선순위가 더 높다. 문서 전반적으로 재사용할 임의가 있는 값을 작성한다. :root 을 이용해 최상위 요소에 변수를 선언하면 모든 요소에서 이 변수를 사용할 수 있다. 이렇게 :root 을 사용하여 변수를 사용하게 되면 한 번에 수정이 용이하다. :root 의사 클래스는 문서 트리의 루트 요소를 선택한다. HTML 의 루트 요..

//async & await //clear style of using promise //1. async async function fetchUser(){ //do network request in 10 secs.. return 'beshyun'; } const user = fetchUser(); user.then(console.log); console.log(user); //2. await ✨ function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function getApple(){ await delay(2000); return '🍎'; } async function getBanana(){ await del..

event.target( ) event 인터페이스의 target 속성은 event 가 전달한 객체에 대한 참조이다. 이는 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는 event.currentTarget 과는 다르다. event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환한다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용한다. 이벤트 리스너 호출 이벤트 리스너가 등록되고 해당 객체나 요소에 지정된 타입의 이벤트가 발생하면, 브라우저는 자동으로 등록된 이벤트 리스너를 호출한다. 이때 이벤트 리스너는 인수로 이벤트 객체(event object)를 전달받으며, 식별자를 통해 전달받은 이벤트 객체를 참조한다. 이벤트 객체(event object..

Javascript 공식적인 용어는 아니지만, 느슨한 모드(sloppy mode) 라고 부르기도 한다.엄격 모드는 단지 부분적인 것이 아니며, 이것은 고의적으로 일반 코드와  다른 시멘틱을 가지고 있다. 엄격모드는 평범한 Javascript 시멘틱스에 몇가지 변경이 일어나게 한다.1. 기존에는 조용히 무시되던 에러들을 throwing 한다.2. Javascript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로 잡는다. 가끔씩 엄격모드의코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어진다.3. 엄격모드는 ECMAScript 의 차기 버전들에서 정의 될 문법을 금지함.스크립트 엄격 모드 엄격모드를 전체 스크립트에 적용하기 위해,정확한 구문 "use strict";(또는 'use stric..

보호되어 있는 글입니다.

우리가 웹사이트의 틀을 그럴싸하게 꾸밀 때, Html로 마크업하고, 그 태그 요소들에 패딩,마진, 배경색, 애니메이션 등의 효과를 주는 CSS 요소들로 치장을 한다. 더 나아가,, 웹페이지에 사용하는 마우스 클릭시 뜨는 alert창, id, pw를 입력하는 회원가입 시 뜨는 오류 창, 이미지의 노출 방식( 이미지 슬라이드, 스크롤 다운시 이미지가 나타나는 방식..등) 그게 다 자바스크립트에서 발생한 이벤트에 반응해 특정 동작을 수행할 수 있다.. 자바스크립트는 스크립트 언어로 소스 코드를 컴파일하지 않고도 실행할 수 있는 프로그래밍 언어이다. 자바스크립트의 특징 객체 기반의 스크립트 프로그래밍 언어. 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능이 존재. 자..