[포스코x코딩온] 웹개발자 풀스택 부트캠프8기
JQuery를 활용한 색깔 변화
항상 발전하는 개발자
2023. 7. 14. 20:10
728x90
JQuery를 활용한 색깔 변화
결과
박스를 클릭하면 색이 자동으로 변하게 만들었습니다.
코드
jquery를 사용할 예정이니 CDN을 연결해준다.
1. div를 이용하여 박스를 하나 만들어 줍니다.
<style>
div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div style="background-color: red" onclick="changeColor()"></div>
</body>2. onClick시 실행할 함수 설정
<script>
function changeColor() {
setTimeout(function () {
$("div").attr("style", "background-color: orange ");
}, 0);
setTimeout(function () {
$("div").attr("style", "background-color: yellow");
}, 2000);
setTimeout(function () {
$("div").attr("style", "background-color: blue");
}, 4000);
setTimeout(function () {
$("div").attr("style", "background-color: purple");
}, 6000);
}
</script>여기서 setTimeout()함수는 JS에서 비동기적인 방식으로 지정된 시간 이후에 함수를 실행하는 함수로 일정시간이 지난 후에 한번만 실행되며, 지정된 시간(밀리초 단위)이 경과된 후에 콜백함수를 호출한다.
- setTimeout(callback, delay);
- callback : 지정된 시간 후에 실행될 함수를 나타낸다.
- delay : 함수 실행까지의 지연시간(밀리초)를 나타낸다.
- $("div").attr("style", "background-color: orange");
- div 태그의 스타일 속성에서 배경색을 orange로 선언하는 코드이다.
3. 색상이 변화할때 애니메이션을 통해 부드럽게 변화하게 지정
<style>
div {
width: 100px;
height: 100px;
transition: background-color 2s ease; /*2초동안 애니메이션을 진행하며,
ease함수를 사용하여 부드럽게 변화하게 지정*/
}
</style>
728x90