반응형
이미지 확대 및 축소 기능을 가진 HTML 코드를 제공합니다.
이 코드는 JavaScript를 사용하여 이미지를 확대 및 축소할 수 있는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>이미지 확대/축소</title>
<style>
/* 이미지 스타일링 */
img {
width: 300px;
height: auto;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
/* 이미지 확대 스타일 */
img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<h1>이미지 확대/축소 예제</h1>
<p>마우스를 이미지 위에 올려서 확대하세요.</p>
<img src="이미지URL" alt="이미지 설명">
</body>
</html>
위 코드에서는 <style> 태그 내에 이미지와 이미지 확대 효과를 정의한 CSS 코드가 포함되어 있습니다. 이미지에 마우스를 올리면 확대되는 효과가 적용됩니다.
결과 보기
반응형
'HTML 예제' 카테고리의 다른 글
| 실시간 주식 시세 (0) | 2023.12.08 |
|---|---|
| 웹사이트 소개 페이지 (0) | 2023.12.08 |
| 화면에 예쁜 텍스트 추가 (1) | 2023.12.08 |
| 간단한 레시피 페이지 (1) | 2023.12.08 |
| 드롭다운 메뉴 만들기 (1) | 2023.12.08 |
