지연

[JS] 코드 실행 지연 시키기 (delay)

흔히 알려진 시간을 지연시키는 방법으로는 setTimeout() 함수가 있습니다. 문제점 function delayTest() { console.log("__코드 시작__"); setTimeout(() => { // 5초 후 실행 console.log("실행! 1"); setTimeout(() => { // 3+5초 후 실행 console.log("실행! 2"); }, 5000); }, 3000); } 가장 쉽게 시간을 지연시킬 수 있지만, 다음과 같은 상황에서는 사용하기에 어려움이 존재합니다. 중첩해서 5초 후에 코드 실행과 3초 후에 코드 실행이 되어야 하는 상황입니다. 위 코드와 같이 setTimeout callback 안에 setTimeout을 넣어줘야 하는 문제점이 발생합니다. 계속 함수가 늘어..

[CSS] z-index에 딜레이 적용시키기

코드 See the Pen CSS z-index Delay by hyukson (@hyukson) on CodePen. 코드 풀이 .zIndexDelay { animation: zIndex .5s step-end forwards; } @keyframes zIndexDelay { to { z-index: 5; } } animation-timing-function의 step-end 속성을 이용해서 keyframes의 진행상태가 끝났을 때 적용되도록 지정해줍니다. to 영역에 지정된 z-index가 지정된 애니메이션의 duration 만큼 진행된 후에 적용됩니다. JavaScript 사용하여 구현하기 .zIndex { z-index: 22; } CSS로 z-index 속성 값이 적용된 클래스를 정의해줍니다. ..