이미지를 클릭하거나 가리키면 HTML로 확대됩니다.
이 기사에서는 사용자가 특정 이미지를 클릭하거나 마우스로 가리키면 HTML 이미지를 확대하는 방법에 대해 설명합니다.
이미지 갤러리 사용자는 여러 이미지가 있고 단일 이미지 위로 마우스를 가져가면 확대되는 사용자 인터페이스를 보았을 것입니다. 이 기사에서는 마우스를 가져가거나 클릭하여 이미지를 확대하는 다양한 방법을 배웁니다.
Hover의 HTML 이미지 크기 변경
사용자가 마우스를 가져가면 HTML 및 CSS를 사용하여 특정 이미지를 확대할 수 있습니다. 아래 예에서는 src 속성 값이 서로 다른 5개의 img 요소를 생성했습니다.
여기에서 사용자는 모든 이미지가 같은 행에 인라인으로 표시되는 것을 볼 수 있습니다.
또한 CSS 스타일을 사용하여 모든 이미지 요소의 높이와 너비를 설정했습니다. 모든 요소에 200px 높이와 너비를 할당했습니다.
또한 모든 img 요소에 대해 10px 여백을 설정하여 이미지 주위에 공간을 남겨두었습니다.
CSS의 : hover 속성을 사용하여 호버 효과를 추가했습니다. CSS의 img: hover 블록 내에서 이미지 요소의 높이와 너비를 400px로 설정했습니다. 즉, 사용자가 이미지 위로 마우스를 가져갈 때마다 크기가 2배로 조정됩니다.
예제 코드:
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="/img/DelftStack/logo.png"/>
img {
height: 200px;
width: 200px;
margin: 10px;
}
img:hover{
height: 400px;
width: 400px;
}
위의 출력에서 사용자는 이미지 위로 마우스를 가져가면 해당 이미지의 크기가 커지는 것을 볼 수 있습니다.
또한 transform CSS 속성을 사용하여 HTML 이미지를 확대할 수 있습니다. transform 속성을 사용하면 모든 HTML 요소를 변환할 수 있으며 이미지도 그 중 하나입니다.
이미지로 크기 조정, 회전, 변환 등을 수행할 수 있음을 의미합니다. 여기에서는 이미지에 스케일링을 적용하여 확대합니다.
아래 예제 코드에서는 img:hover 블록 내부에 transform: scale(2) CSS 스타일을 추가했습니다. 사용자가 특정 이미지 위로 마우스를 가져가면 이미지의 높이와 너비에 2를 곱합니다.
transform: scale(multifactor)는 multifactor라는 단일 매개변수를 사용합니다. 따라서 multifactor에 의해 요소의 크기가 증가합니다.
우리의 경우에는 2를 multifactor 값으로 사용했으므로 이미지를 2배로 확대합니다.
예제 코드:
img:hover{
transform:scale(2);
}
사용자가 이미지를 클릭하면 HTML 및 JavaScript를 사용하여 이미지 확대
사용자가 이미지를 클릭하면 HTML과 JavaScript를 사용하여 이미지를 확대할 수 있습니다. 이 예에서는 5개의 HTML 이미지를 만들고 속성으로 모든 img 요소에 높이 및 폭을 할당했습니다.
JavaScript에서는 images 변수에 저장된 태그 이름으로 모든 img 요소에 액세스했습니다. 그런 다음 images 배열을 반복하고 모든 이미지에 addEventListener 메서드를 추가했습니다.
addEventListner 메소드는 두 개의 인수를 사용합니다. 첫 번째 인수는 이벤트 유형이고 다른 인수는 콜백 함수입니다. 여기에서는 click 이벤트를 첫 번째 인수로 사용했기 때문에 사용자가 이미지 요소를 클릭할 때마다 콜백 함수가 실행됩니다.
element.style 속성을 사용하여 img 요소의 스타일을 변경할 수 있습니다. 여기에서는 JavaScript의 image[i].style.transfrom 속성을 사용하여 CSS transform 속성을 이미지 요소에 적용했습니다.
콜백 함수 내에서 images 배열을 반복하여 클릭한 이미지를 제외한 다른 이미지의 크기를 조정합니다. 다음으로 클릭한 요소에 대해 transform 스타일을 scale(1.3)으로 변경합니다.
또한 JavaScript를 사용하여 더 잘 보이도록 클릭한 요소에 약간의 여백을 추가했습니다.
예제 코드:
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].addEventListener('click', function() {
for (var j = 0; j < images.length; j++) {
if (i != j) {
images[j].style.transform = 'scale(1)';
}
}
this.style.transform = 'scale(1.3)';
this.style.margin = '40px'
});
}
출력:
위의 출력에서 사용자는 이미지를 클릭하면 확대되고 다른 이미지는 원래 크기로 조정되는 것을 볼 수 있습니다. 또한 이미지 위로 마우스를 가져가도 효과가 없습니다.
이 기사에서 이미지를 확대하는 세 가지 방법을 배웠습니다. 처음 두 메서드는 CSS : hover 속성을 사용하고 세 번째 메서드는 JavaScript addEventListener 메서드를 사용합니다.
