[JavaScript] 자바스크립트 요소 크기 변경하기
177_자바스크립트 요소 크기 변경하기 [적용] 버튼에 마우스 반응을 설정하고 싶을 때 특정 요소에 눈에 띄는 효과를 주고 싶을 때 [내용] 요소의 크기 변경은 CSS의 transform 속성과 scale() 메소드를 사용한다. sclae()의 인수가 1이면 원래 상태의 크기를 나타내며, 인수가 1보다 크면 확대, 작으면 축소한다. 예를 들면 2는 두 배의 비율, 0.5는 절반의 비율을 나타낸다. CSS Transitions와 Web Animations API의 예시를 확인해 보자. CSS Transitions를 사용한 샘플 CSS (부분) style.css .rect { ...생략... transition: all 0.5s; } .rect.state-show { transform: sclae(4); }..
2022.07.19