🍁transition 구현 타이머를 사용해 CSS에서 transition을 구현한 것처럼 자바스크립트에서도 비슷한 효과를 줄 수 있다. 자바스크립트는 제어를 할 수 있다는 점에서 CSS의 transiton과 차이가 있다. [CSS] transition (전환) 🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하 isaac-christian.tistory.com [CSS] animation (애니메이션) 🍁animation CSS 객체의 움직임을 단순하게 표현할 때에는 transition을 사용한다. animation은 그보다 더 나아..
🍁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..
transition Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione corrupti earum quo ut aperiam, quas itaque voluptate consequuntur dolore perferendis vel, molestiae dolores illo et, dolorem qui. Beatae, cumque eum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nemo autem earum quia assumenda, dignissimos possimus eum iusto tempora nos..
🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하게 구현할 수 있다. transition의 사용 상자 body { padding-bottom: 500px; /* body의 영역을 넓힘 (margin은 객체의 영역이 아니므로 padding을 사용) */ } #box { border: 10px solid black; width: 200px; height: 200px; background-color: gold; margin: 100px; transition-property: width; transition-duration: 1s; } b..
