반응형 분류 전체보기68 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 47 (3항 연산자 식, 논리 연산자 식, 함수의 빠른 반환, 템플릿 리터럴) 목차3항 연산자 식논리 연산자 식함수의 빠른 반환템플릿 리터럴오늘 하루를 돌아보며 3항 연산자 식3항 연산자 식은 세 부분으로 구성되어있다.조건(condition)조건이 참인 경우 실행될 명령(?)조건이 거짓인 경우 실행될 명령(:)조건 ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.')// 코드를 개행하여 여러 줄로 구성하는 방법 1조건 ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.')// 코드를 개행하여 여러 줄로 구성하는 방법 2조건 ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.') 3항 연산자 식은 필요하다면 중첩하여 사용할 수 있다. 다만, 3중.. 2025. 7. 2. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 46 (GSAP 시작하기, 이징, 스태거, 타임라인, 컨트롤 & 콜백, 애니메이션 디버깅) 목차GSAP 시작하기GSAP 이징(Easing)GSAP 스태거(Stagger)GSAP 타임라인(Timeline)GSAP 컨트롤 & 콜백(Control & Callback)GSAP 애니메이션 디버깅오늘 하루를 돌아보며 GSAP 시작하기순수 웹 기술인 웹 애니메이션 API를 사용하는 대신, 강력한 애니메이션 라이브러리를 사용할 수 있다. GSAP(GreenSock Animation Platform)은 애니메이션 라이브러리 중 하나다. 여러 라이브러리가 있지만, 이번 수업에서는 GSAP 라이브러리를 학습한다. GSAP을 사용하기 위해서는 HTML 파일에 라이브러리를 추가해야 한다. GSAP을 이용하여 적용한 싱글 애니메이션을 트윈(Tween)이라고 한다. 트윈 애니메이션에 대한 정보를 포함하는 메서드.. 2025. 7. 1. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 45 (웹 애니메이션 - CSS 트랜지션, CSS 애니메이션, JavaScript 애니메이션) 목차웹 애니메이션1. CSS 트랜지션2. CSS 애니메이션3. JavaScript 애니메이션오늘 하루를 돌아보며 웹 애니메이션웹 애니메이션을 만드는 방법은 다음과 같다.CSS 트랜지션(Transition, 전환)CSS 애니메이션(Animation)JavaScript 애니메이션(Animation) 1. CSS 트랜지션CSS 트랜지션(Transition)은 속성 값이 다른 값으로 전환될 때 발생(트리거, trigger)한다.CSS 방식 트리거: 가상 클래스(:hover, :focus, :active)에 자주 사용JavaScript 방식 트리거: 클래스를 추가/제거하거나 style 속성으로 CSS를 변경 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 17 (그리드 레이아웃, CSS 애니메이션)목차그리드 .. 2025. 6. 30. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 44 (이벤트 전파, 이벤트 트리거 시퀀스, 이벤트 전파 방지, 이벤트 위임, 이벤트 리스너 제거) 목차이벤트 전파(Event Propagation)이벤트 트리거 시퀀스이벤트 전파 방지이벤트 위임(Event Delegation)이벤트 리스너 제거오늘 하루를 돌아보며 이벤트 전파(Event Propagation)이벤트가 발생하면 다음의 세 가지 단계가 순차적으로 발생하는데, 이것을 이벤트 전파(Event Propagation)라고 한다.캡처링 단계(Capturing phase)타겟 단계(Target phase)버블링 단계(Bubbling phase) 1. 캡처링 단계(Capturing Phase)JavaScript는 window → document → event target에 도달할 때까지 이벤트를 전파한다. 이벤트 리스너의 콜백에 세 번째 인수로 불리언 값을 제공하면 캡처링 단계를 수신할 수 있다.d.. 2025. 6. 30. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 43 (이벤트 청취 대상, 이벤트 기본 작동 방지) 목차이벤트 청취 대상이벤트 기본 작동 방지오늘 하루를 돌아보며 이벤트 청취 대상버튼을 클릭하면 배경 색상이 바뀌는 이벤트 리스너를 만들어 보자. 지금까지 배운 대로라면 아래처럼 작성했을 것이다.const button = document.querySelector('button')button.addEventListener('click', () => { button.style.setProperty('background-color', '#e54d26')}) 클릭(click) 이벤트를 리스닝(listening, 수신)하는 요소는 버튼(button)이다. 이벤트 리스너의 콜백(callback)을 별도로 분리해서 생성해도 코드는 정상적으로 작동한다.function handleChangeBgColor () { bu.. 2025. 6. 26. 이전 1 ··· 3 4 5 6 7 8 9 ··· 14 다음 반응형
