인터랙티브 웹사이트는 사용자에게 더욱 매력적인 경험을 제공할 수 있습니다. 애니메이션, 툴팁 또는 기타 추가 효과를 추가하는 등 웹사이트를 더욱 인터랙티브하게 만드는 방법에는 여러 가지가 있습니다.
일부 웹사이트에서는 사용자가 페이지의 요소 위로 마우스를 가져가면 정보를 표시하기도 합니다. 여기에는 사용자가 이미지 위로 마우스를 가져가 툴팁을 사용하여 데이터 요소를 볼 수 있는 지도 또는 기타 시각적 데이터가 포함됩니다.
특정 CSS 기법 및 JavaScript DOM 개념을 사용하여 HTML, CSS 및 JavaScript를 사용하여 이 효과를 얻을 수 있습니다.
HTML 파일의 이미지 위에 도구 설명을 추가하는 방법
이미지는 웹 페이지에서 시각적으로 매력적인 방식으로 정보를 전달하는 데 유용한 방법이 될 수 있습니다. 또한 간단한 이미지 갤러리와 같은 다른 매력적인 효과를 추가하는 데에도 유용합니다.
CSS 및 JavaScript를 사용하여 HTML의 이미지 위에 툴팁을 추가할 수 있습니다.
이 프로젝트에 사용된 코드는 이 GitHub 리포지토리에서 MIT 라이선스에 따라 사용할 수 있습니다.
⭐ index.html이라는 새 파일에 HTML 파일의 기본 구조를 추가합니다:
<!DOCTYPE html>
<html>
<head>
<title>Image Tooltip Example</title>
</head>
<body>
</body>
</html>
⭐ 본문 태그 안에 컨테이너 div를 추가합니다. 이 div에는 이미지와 툴팁 요소가 모두 포함됩니다:
<div class="container">
</div>
⭐ 컨테이너 안에 이미지를 추가합니다. 파일 이름이 일치하는 이미지가 HTML 파일과 같은 폴더에 있는지 확인합니다:
<img src="image.jpg" class="image" height="420" width="840" alt="Your Image">
⭐ 이미지 아래에 툴팁을 나타내는 div를 추가합니다:
<div class="tooltip"></div>
⭐ 헤드 태그에 스타일 태그를 추가합니다. 스타일 태그 안에 이미지 컨테이너와 도구 설명에 대한 스타일을 추가합니다.
<style>
.container {
position: relative;
display: inline-block;
}
.tooltip {
position: absolute;
left: 0;
display: none;
padding: 5px;
background-color: #000;
color: #fff;
font-size: 12px;
}
</style>
⭐ 본문 태그 하단에 새 스크립트 태그를 만듭니다:
<body>
<!-- Your webpage content here -->
<script>
</script>
</body>
⭐ 스크립트 태그 내에서 DOM 선택기 함수 쿼리셀렉터를 사용하여 이미지의 HTML 요소와 도구 설명을 가져옵니다:
const image = document.querySelector('.image');
const tooltip = document.querySelector('.tooltip');
⭐ 마우스 오버 이벤트에 대한 이벤트 리스너를 추가합니다. 이 기능은 이미지 위로 마우스를 가져가면 실행됩니다. 이 경우 툴팁이 화면에 표시됩니다:
image.addEventListener('mouseover', () => {
tooltip.style.display = 'block';
});
⭐ 마우스아웃 이벤트에 대한 이벤트 리스너를 추가합니다. 이 기능은 마우스가 이미지에서 벗어날 때 실행됩니다. 이 경우 툴팁이 화면에서 사라집니다:
image.addEventListener('mouseout', () => {
tooltip.style.display = 'none';
});
⭐ 브라우저에서 index.html 파일을 열고 이미지 위로 마우스를 가져가 툴팁을 확인합니다. 
이미지의 X 및 Y 픽셀 좌표를 계산하고 표시하는 방법
이제 툴팁이 페이지에 표시되었으므로 마우스의 X 및 Y 좌표를 표시하도록 해당 위치와 텍스트를 변경합니다.
이미지 위로 마우스를 가져가기 전에 툴팁이 표시되지 않도록 툴팁의 CSS 스타일을 변경합니다. 이렇게 하면 커서 위치로 이동하기 전에 이미지 하단에 도구 설명이 표시되지 않습니다:
.tooltip {
position: absolute;
top: -30px;
left: 0;
display: none;
padding: 5px;
background-color: #000;
color: #fff;
font-size: 12px;
}
⭐ 스크립트 태그 안에 마우스 이동 이벤트를 수신할 다른 이벤트 리스너를 추가합니다. 이 함수는 마우스가 새 픽셀 위로 마우스를 가져갈 때마다 연속적으로 실행됩니다. 마우스 이동 이벤트에 대한 정보를 함수에 입력하는 이벤트 매개 변수를 추가합니다. 이 정보에는 마우스가 해당 지점에 있는 이미지 좌표가 포함됩니다:
image.addEventListener('mousemove', (e) => {
});
⭐ 이벤트를 사용하여 왼쪽 CSS 속성을 사용하여 툴팁의 가로 위치를 변경합니다. 마우스가 움직일 때마다 클라이언트X 변수에 저장된 커서의 X 좌표와 일치하도록 값이 업데이트됩니다:
tooltip.style.left = e.clientX + 'px';
⭐ 상단 CSS 속성을 사용하여 툴팁의 세로 위치를 변경합니다. ClientY는 마우스의 y 좌표를 나타냅니다. 오프셋 높이 속성은 툴팁 내부에 추가 패딩이나 테두리를 포함합니다. 커서가 있는 위치에 툴팁을 직접 표시하고 싶지 않다면 해당 위치에서 10픽셀을 추가로 제거할 수 있습니다:
tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
⭐ 좌표를 표시하도록 툴팁의 텍스트 내용을 변경합니다:
tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
⭐ 브라우저에서 index.html 파일을 열고 이미지 위로 마우스를 가져가 업데이트된 툴팁을 확인합니다: 
대화형 웹페이지에 효과 추가하기
이제 웹페이지의 이미지에 대화형 툴팁을 추가하는 방법을 이해했습니다. 다른 흥미로운 HTML 효과를 실험해 보면서 HTML 및 CSS 기술을 계속 발전시킬 수 있습니다.