JavaScript
Programming/JavaScript
[JavaScript] CSS 조작: transtion 구현
🍁transition 구현 타이머를 사용해 CSS에서 transition을 구현한 것처럼 자바스크립트에서도 비슷한 효과를 줄 수 있다. 자바스크립트는 제어를 할 수 있다는 점에서 CSS의 transiton과 차이가 있다. [CSS] transition (전환) 🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하 isaac-christian.tistory.com [CSS] animation (애니메이션) 🍁animation CSS 객체의 움직임을 단순하게 표현할 때에는 transition을 사용한다. animation은 그보다 더 나아..
Programming/JavaScript
[JavaScript] CSS 조작: style property, class
🍁CSS 조작 자바스크립트로 CSS를 조작하는 방법에는 직접적인 방법과 간접적인 방법이 있다. 모든 태그는 인라인 스타일 시트의 style 속성을 제공하며, 자바스크립트에서도 이러한 style 프로퍼티를 제공한다. style 프로퍼티로 CSS를 조작하는 직접적인 방법과 class로 CSS를 조작하는 간접적인 방법이 있다. style 프로퍼티로 조작 기본 코드 CSS 상자 BOM에서 구현 btn1.addEventListener('click', function() { box1.style = 'color: cornflowerblue'; }) btn1.addEventListener('click', function() { box1.style = 'color: cornflowerblue; font-size: 2re..
Programming/JavaScript
[JavaScript] Event Bubbling, Event Tunneling (Event Capturing)
🍁Event Bubbling, Event Tunneling ⬆️Event Bubbling 이벤트 버블링(Event Bubbling)은 이벤트가 발생한 요소에서 시작해 상위 DOM 트리 요소로 이벤트가 전파되는 방식이다. 가장 하위의 요소에서 이벤트가 시작되어 가장 상위의 부모 요소까지 이벤트가 전파되며, 각 요소의 이벤트 핸들러가 순차적으로 호출된다. ⬇️Event Tunneling 이벤트 터널링(Event Tunneling)은 이벤트 버블링과 반대로 이벤트가 상위 요소에서 시작하여 이벤트가 발생한 요소까지 전파되는 방식이다. 이벤트는 상위 요소에서 시작하여 하위 요소로 내려가며, 마찬가지로 이벤트 핸들러는 최상위 요소에서 시작하여 하위 요소로 내려가면서 호출된다. 이벤트 터널링은 다른 말로 Event ..
Programming/JavaScript
[JavaScript] Template String (Template Literal)
🍁Template String Template String은 ES6때 만들어진 문자열 표기법이다. 템플릿 문자열은 역따옴표(backticks)로 문자열을 감싸고, 변수나 표현식을 ${} 안에 넣어 문자열을 보다 효과적으로 결합할 수 있도록 해준다. let name = 'isaac'; let age = 20; console.log('이름은 ' + name + '이고, 나이는 ' + age + '세 입니다.'); 변수를 만들어서 문자열로 출력을 하고 싶다. 위와 같이 사용할 수도 있지만, 이때 사용할 수 있는 문자열 표기법이 존재한다. 문자열 표기법 'string' "string" `string` : template string 3개의 표기법 모두 같지만, `string` 방식의 문자열 표기법을 사용하면 $..
Programming/JavaScript
[JavaScript] Core: Closure
🍁Closure 클로저(Closure)는 고유한 개념이 아니라, 함수형 프로그래밍 언어에서 발견되는 특성(기술)이다. 클로저는 함수 내부에 정의된 함수가 외부 함수에 접근할 수 있는 방법을 제공하며, 이를 통해 함수는 자신이 생성된 위치의 스코프에 있는 변수들에 접근하고 수정할 수 있게 한다. 지역 함수 선언 function outer() { //지역 변수(outer) let a = 10; console.log('a', a); //지역 함수(outer) function inner() { //지역 변수(inner) let b = 20; console.log('b', b); } inner(); //console.log('b', b); } outer(); //inner(); //console.log('a', ..
