완성 화면
코드 보기 / CSS
.mouse__wrap {
cursor: none;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #fff;
background-color: (255, 255, 255, 0.2);
user-select: none;
pointer-events: none;
transition:
background-color 0.3s,
border-color 0.3s,
transform 0.6s,
border 0.3s
;
}
.mouse__cursor.s1{
background-color: #fac5647c;
border-color: #f7a103;
}
.mouse__cursor.s2{
background-color: #4142427d;
border-color: #000;
transform: scale(2) rotateY(720deg);
}
.mouse__cursor.s3{
background-color: #f8ec035d;
border-color: #f3df06;
transform: scale(1.5) rotateX(720deg);
}
.mouse__cursor.s4{
background-color: #03a6f85d;
border-color: #03a6f8;
transform: scale(10);
}
.mouse__cursor.s5{
background-color: #4142427d;
border-color: #000;
transform: scale(3) skew(5deg);
border-radius: 10px;
}
.mouse__cursor.s6{
background-color: #f8ec035d;
border-color: #f3df06;
transform: scale(10);
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.mouse__text p {
font-size: 1vw;
line-height: 2;
}
.mouse__text p:last-child {
font-size: 2vw;
}
.mouse__text p span {
color: #FAAC01;
border-bottom: 1.5px solid #FAAC01;
}
.mouse__info {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
font-size: 16px;
line-height: 1.6;
}
코드 보기 / JAVASCRIPT
window.addEventListener("mousemove", function(event){
document.querySelector(".clientX").innerHTML = event.clientX;
document.querySelector(".clientY").innerHTML = event.clientY;
document.querySelector(".offsetX").innerHTML = event.offsetX;
document.querySelector(".offsetY").innerHTML = event.offsetY;
document.querySelector(".pageX").innerHTML = event.pageX;
document.querySelector(".pageY").innerHTML = event.pageY;
document.querySelector(".screenX").innerHTML = event.screenX;
document.querySelector(".screenY").innerHTML = event.screenY;
});
//선택자
const cursor = document.querySelector(".mouse__cursor");
window.addEventListener("mousemove", function(e){
cursor.style.left = e.clientX - 25 + "px"
cursor.style.top = e.clientY - 25 + "px"
});
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr= span.getAttribute("class"); // attr = s1 ~ s6
span.addEventListener("mouseover", function(){
cursor.classList.add(attr);
});
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr);
});
});
1. 마우스의 좌표를 나타내는 구문
window.addEventListener("mousemove", function(event){
document.querySelector(".clientX").innerHTML = event.clientX;
document.querySelector(".clientY").innerHTML = event.clientY;
document.querySelector(".offsetX").innerHTML = event.offsetX;
document.querySelector(".offsetY").innerHTML = event.offsetY;
document.querySelector(".pageX").innerHTML = event.pageX;
document.querySelector(".pageY").innerHTML = event.pageY;
document.querySelector(".screenX").innerHTML = event.screenX;
document.querySelector(".screenY").innerHTML = event.screenY;
});: 마우스의 이동을 감지하고, 이벤트 객체의 다양한 속성을 사용하여 마우스 위치에 대한 정보를 출력하는 구문.
addEventListener 함수를 사용하여 mousemove 이벤트를 감지하고, 이벤트 핸들러 함수1를 등록한다.
이 객체를 통해 마우스 위치와 관련된 다양한 정보를 가져올 수 있다.
clientX, clientY : 브라우저 화면에서 마우스 커서의 위치를 나타낸다.
offsetX, offsetY : 이벤트 대상 요소에서 마우스 커서의 위치를 상대적으로 나타낸다.
pageX, pageY : 문서 전체에서 마우스 커서의 위치를 상대적으로 나타낸다.
screenX, screenY : 모니터 화면을 기준으로 한 마우스 커서의 위치를 나타낸다.
각각의 위치 정보는 querySelector 함수를 사용하여 HTML 요소를 선택하고, innerHTML 속성을 사용하여 해당 요소의 내용을 변경하고 화면에 출력한다.
2. 마우스 커서에 스타일을 주는 구문
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #fff;
background-color: (255, 255, 255, 0.2);
user-select: none;
pointer-events: none;
transition:
background-color 0.3s,
border-color 0.3s,
transform 0.6s,
border 0.3s
;
}
.mouse__cursor.s1{
background-color: #fac5647c;
border-color: #f7a103;
}
.mouse__cursor.s2{
background-color: #4142427d;
border-color: #000;
transform: scale(2) rotateY(720deg);
}
.mouse__cursor.s3{
background-color: #f8ec035d;
border-color: #f3df06;
transform: scale(1.5) rotateX(720deg);
}
.mouse__cursor.s4{
background-color: #03a6f85d;
border-color: #03a6f8;
transform: scale(10);
}
.mouse__cursor.s5{
background-color: #4142427d;
border-color: #000;
transform: scale(3) skew(5deg);
border-radius: 10px;
}
.mouse__cursor.s6{
background-color: #f8ec035d;
border-color: #f3df06;
transform: scale(10);
}
: 마우스 커서 디자인을 구현하는 CSS 구문이다.
마우스 커서를 표현하는 요소의 클래스 이름이 .mouse__cursor로 지정 되어 있으며, position : absloute 속성을 사용하여 문서의 절대 위치에 배치되도록 지정한다.
width와 height 속성을 사용하여 마우스 커서의 크기를 지정하고, border-radius 속성을 사용하여 둥근 모서리를 생성한다.
border 속서을 사용하여 테두리의 굵기와 색상을 지정한다.
background-color 속성을 사용하여 배경색을 지정하고, user-select와 pointer-events 속성을 사용하여 마우스 커서 요소에 대한 선택과 이벤트를 무시하도록 지정한다.
transition 속성을 사용하여 마우스 커서 요소의 변화가 부드럽게 이루어지도록 지정한다.
클래스 이름 mouse__cursor에 더해진 s1부터 s6까지는 마우스 커서 요소에 추가적인 스타일을 적용하는 클래스 이름이다. 마우스 상호작용에 따라 마우스 커서를 다른 디자인으로 변경한다.
s1
: 배경색과 테두리 색만 변경
s2
: 배경색과 테두리 색을 변경하면서 scale(2) 속성을 사용하여 원래 크기의 2배로 확대시켰고, rotateY(720deg) 속성을 사용하여 Y축으로 720도 회전 시킨다.
s3
:배경색과 테두리 색을 변경하고 scale(1.5)속성을 사용하여 원래 크기의 1.5배로 확대 시키며, rotateX축으로 720도 회전시킨다.
s4
: 배경색과 테두리 색을 변경하고 scale(10) 속성을 사용하여 원래 크기의 10배로 확대 시킨다.
s5
:배경색과 테두리 색을 변경하고 scale(3) 속성을 사용하여 원래 크기의 3배로 확대 시키며 skew(5deg) 속성을 사용하여 5도 만큼 기울이고, border-radius: 1opx 속성을 사용하여 둥근 테두리를 생성한다.
s6
:배경색과 테두리 색을 변경하고 scale(10) 속성을 사용하여 원래 크기의 10배로 확대 시킨다.
document.write.querySelector( )에 이벤트 효과를 주는 구문을 작성하는 4가지 방법.
1. 일일히 전부 작성하기
document.querySelector(".s2").addEventListener("mouseover", function(){
cursor.classList.add("s2");
});
document.querySelector(".s2").addEventListener("mouseout", function(){
cursor.classList.remove("s2");
});
document.querySelector(".s3").addEventListener("mouseover", function(){
cursor.classList.add("s3");
});
document.querySelector(".s3").addEventListener("mouseout", function(){
cursor.classList.remove("s3");
});
document.querySelector(".s4").addEventListener("mouseover", function(){
cursor.classList.add("s4");
});
document.querySelector(".s4").addEventListener("mouseout", function(){
cursor.classList.remove("s4");
});
document.querySelector(".s5").addEventListener("mouseover", function(){
cursor.classList.add("s5");
});
document.querySelector(".s5").addEventListener("mouseout", function(){
cursor.classList.remove("s5");
});
document.querySelector(".s6").addEventListener("mouseover", function(){
cursor.classList.add("s6");
});
document.querySelector(".s6").addEventListener("mouseout", function(){
cursor.classList.remove("s6");
});: 마우스 포인터에 반응하여 특정 요소들의 클래스를 추가하거나 제거하고, 커서의 모양을 변경하는 것을 목적으로 하는 구문이다.
각각의 요소에 대하여 mouseover 이벤트가 발생하면 해당 요소의 클래스를 cursor 요소에 추가하고, mouseout 이벤트가 발생하면 해당 요소의 클래스를 cursor 요소에서 제거한다.
2. for문 사용
for(let i=1; i<=6; i++) {
document.querySelector(`.s${i}`).addEventListener("mouseover", function(){
cursor.classList.add(`s${i}`);
});
document.querySelector(`.s${i}`).addEventListener("mouseout", function(){
cursor.classList.remove(`s${i}`);
});
}: for문을 사용하여 1부터 6까지 반복하면서, 템플릿 리터럴을 사용하여 선택적 문자열을 생성하고, 해당 요소에 대해 mouseover 및 mouseout 이벤트를 추가한다.
이벤트 핸들러 함수에서는 i 값을 포함하는 클래스 이름을 cursor 요소에 추가하거나 제거한다.
3. forEach문 사용
document.querySelectorAll(".mouse__text span").forEach(function(span, i){
span.addEventListener("mouseover", function(){
cursor.classList.add("s"+(i+1));
});
span.addEventListener("mouseout", function(){
cursor.classList.remove("s"+(i+1));
});
});: forEach 문을 사용하여 여러 개의 span 요소를 포함하는 요소에서 각 span 요소에 대해 커서의 모양을 다르게 지정할 수 있다.
mouse__text 클래스를 가진 요소들의 하위 요소인 span 태그에 대해 mouseover 및 mouseout 이벤트를 추가하여, 각각의 span 요소에 마우스를 올리면 커서의 모양이 변경되는 것을 구현한다.
querySelectorAll 메서드를 사용하여 mouse__text span 선택자로 하위 요소들을 모두 선택하고, forEach 메서드를 사용하여 각 요소에 대해 mouseover 및 mouseout 이벤트를 추가한다.
이벤트 핸들러 함수는 i 값(인덱스 값)을 이용하여 클래스 이름을 동적으로 생성하고, cursor 요소에 추가하거나 제거한다.
4. getAttribute( ); 사용
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr= span.getAttribute("class"); // attr = s1 ~ s6
span.addEventListener("mouseover", function(){
cursor.classList.add(attr);
});
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr);
});
});
: forEach문과 유사하지만 각 span 요소에 대해 클래스 이름을 가져오는 부분이 다르다.
querySeectorAll 메서드를 사용하여 mouse__text span 선택자로 하위 요소들을 모두 선택하고, forEach 메서드를 사용하여 각 요소에 대해 mouseover 및 mouseout 이벤트를 추가한다.
이벤트 핸들러 함수에서는 span 요소의 클래스 이름을 가져와서 attr 변수에 할당하고, 해당 클래스 이름을 cursor 요소에 추가하거나 제거한다.
각 span 요소가 s1부터 s6까지의 클래스 이름을 동적으로 생성하는 대신 각 요소의 클래스 이름을 가져와 사용할 수 있다.
- 브라우저에서 사용자의 조작이나 환경의 변화로 일어난 이벤트를 처리하기 위해 이벤트 객체를 매개변수로 전달받는 함수 [본문으로]