![](https://maz.kr/wp-content/uploads/2024/06/howto-css-thumbnail-thumbnail.png)
w3.css
썸네일
썸네일 이미지를 만드는 방법을 알아보자.
썸네일 이미지를 만드는 방법
<img> 요소를 사용하고 그 주위에 <a> 요소를 둘러쌉니다. 테두리로 이미지 스타일을 지정하고 호버 효과를 추가한다.
1단계) HTML 추가
<style> img { border: 1px solid #ddd; /* Gray border */ border-radius: 4px; /* Rounded border */ padding: 5px; /* Some padding */ width: 150px; /* Set a small width */ } /* Add a hover effect (blue shadow) */ img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); } </style> <body> <a target="_blank" href="img_forest.jpg"> <img src="img_forest.jpg" alt="Forest"> </a> </body>
기본 예시
예제 보기참고
W3C School - How TO - Thumbnail