클릭 시, 이미지를 원 사이즈로 볼 수 있음. <style> img { border: 1px solid silver; border-radius: 4px; padding: 5px; width: 60px; } img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); } </style> <a href="https://i.imgur.com/57sBeiJ.gif" target="_blank"> <img src="https://i.imgur.com/57sBeiJ.gif" alt="happy"> </a> 결과보기 PS. 썸네일(Thumbnail)은 클릭 시 더 큰 이미지를 볼 수 있는 작은 이미지를 말하며, 보통 액자식으로 겉에 테두리 효과를 줌. 그누보드5 경우, /lib/thumbnail.lib.php 파일에서 썸네일 생성함. 허버 시 선택 강조 위해 border 두께 조절 대신 box-shadow 속성 줘야 레이아웃이 안 흔들림.
클릭 시, 이미지를 원 사이즈로 볼 수 있음.
<style>
img {
border: 1px solid silver;
border-radius: 4px;
padding: 5px;
width: 60px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
</style>
<a href="https://i.imgur.com/57sBeiJ.gif" target="_blank">
<img src="https://i.imgur.com/57sBeiJ.gif" alt="happy">
</a>
결과보기
PS.