https://spicyyoghurt.com/tools/easing-functions Easing Functions for JavaScript - Animation Tool | Spicy Yoghurt Get easing function for JavaScript and try them out on your own custom motions, using the animation tool. You can create animations in an interactive way and see the effects of using different easing functions. When satisfied, look-up the matching equation spicyyoghurt.com easing func..

body{ margin: 0; padding: 0; text-align: center; } #box-container{ width: 100%; height: 100vh; background-color: lightsalmon; display: flex; justify-content: center; align-items: center; } .box{ width: 30px; height: 30px; border-radius: 50%; background-color: lightpink; transition: all 0.5s; margin-left: 20px; user-select: none; } const boxes = document.querySelectorAll('.box') let index = 0, pr..

기본적인 아이디어는 아래 링크로 걸어둔 Easing 기법을 이용한다. https://spicyyoghurt.com/tools/easing-functions Easing Functions for JavaScript - Animation Tool | Spicy Yoghurt Get easing function for JavaScript and try them out on your own custom motions, using the animation tool. You can create animations in an interactive way and see the effects of using different easing functions. When satisfied, look-up the matchin..

https://stackoverflow.com/questions/42273135/why-does-absolute-positioned-element-is-displayed-over-a-static-one Why does absolute positioned element is displayed over a static one? I know absolute positioning breaks normal flow but since the order in HTML is absolute element first then static one, I was expecting it to be reflected in the display order too. .absolute { stackoverflow.com 이미지 텍스트..

https://learnjs.vlpt.us/basics/08-loop.html 08. 반복문 · GitBook 반복문은 특정 작업을 반복적으로 할 때 사용할 수 있는 구문입니다. for 문은 가장 기본적인 반복문입니다. 특정 값에 변화를 주어가면서 우리가 정한 조건이 만족된다면 계속 반복합니다. 한번 learnjs.vlpt.us 아래와 같이 조건을 주면 맨 처음 i 값이 0 이므로 numbers[i] 는 1 이 된다. 그러므로 numbers[i] > 3 이 거짓이 된다. 그러므로 while 문 내부는 실행되지 않는다. function biggerThanThree(numbers) { const filteredNumbers = [] let i = 0 while(i < numbers.length && numb..

SASS grid 부분 해결 @mixin setGridPosition($col-1, $col-2, $row-1, $row-2){ grid-column: #{$col-1} / #{$col-2} ; grid-row: #{$row-1} / #{$row-2} ; } 애니메이션 구현 부분 테스트 *{ box-sizing: border-box; } html, body{ margin: 0; padding: 0; } section{ width: 100%; height: 100vh; grid-gap: 5px; overflow: hidden; display: none; } section span{ width: 200px; height: 300px; background: #333; color: #fff; font-size:..

https://webty.tistory.com/178 JS : 스크롤 동적처리 1. scrollTo, scrollBy, offsetTop, scroll-behavior window.scrollTo( X, Y ) window.scrollTo({ X좌표, Y좌표 }) 문서의 지정된 위치로 스크롤을 이동합니다. * X, Y좌표는 문서의 왼쪽 상단부터 시작합니다. * X, Y좌표는 px 단위의 가로/세로 축입니다. * X 좌표의 webty.tistory.com https://www.javascripttutorial.net/javascript-dom/javascript-width-height/ Getting Width & Height of an Element in JavaScript In this tutorial..

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties 사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;) developer.mozilla.org css 변수는 규모있는 웹사이트의 스타일 코드에서 반복해서 등장하는 값을 재사용할 수 있게 변수로 지정하는 것이다. 이렇게 하면 반복되는 동일한 값을 수정해야 할때 맨 상단에 지정한 변수값만 변경하면 되므로 유지..

컨테이너에 table 을 적용하고 아이템에 table-cell 을 설정하면 아이템들을 수평으로 나열할 수 있다. .container{ width: 100%; height: 70px; border: 3px solid #333; display: table; } .container .item{ width: 100px; height: 100%; background-color: #333; border: 1px solid orange; margin: 10px; display: table-cell; } 각 아이템의 너비도 다르게 지정이 가능하다. .container{ width: 100%; height: 70px; border: 3px solid #333; display: table; } .container .ite..

https://d2.naver.com/helloworld/854017 flex-grow 아이템의 확대에 관련된 속성 0 또는 자연수 기본값 0 0 : 컨텐츠크기로 고정 (늘어나지 않음) 1 이상 : 컨테이너를 완전히 채우도록 늘어남 아이템 .container { display: flex; height: 100px; border: 3px solid #333; } .item{ flex-grow: 0; margin: 5px; background-color:skyblue; } .container { display: flex; height: 100px; border: 3px solid #333; } .item{ flex-grow: 1; margin: 5px; background-color:skyblue; } 아래..