star
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<style>
body{
background-color: black;
}
.icon{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.material-symbols-outlined{
color: white;
font-size: 4rem;
}
</style>
</head>
<body>
<!-- 마우스가 움직이면 아이콘이 따라 움직이게 만들어보기 -->
<div class="icon">
<span class="material-symbols-outlined">
star
</span>
</div>
<script>
document.body.addEventListener('mousemove', (e)=>{
console.log(e);
document.querySelector('.icon').style.left = e.pageX +'px'; //px만큼 움직임
document.querySelector('.icon').style.top = e.pageY +'px'; //px만큼 움직임
})
</script>
</body>
</html>
'JS > JS 공부' 카테고리의 다른 글
| [JS] 정규식 (정규표현식 사용 패턴) (0) | 2023.04.25 |
|---|---|
| [JS] key_event 키보드에서 입력하는 값 구하기 (0) | 2023.04.24 |
| [JS] DOM_event : document영역에서 사용되는 이벤트 (0) | 2023.04.24 |
| [JS] classList속성 <ul class="ul list iter"> (0) | 2023.04.24 |
| [JS] Element의 attribute(속성) (0) | 2023.04.24 |