썸네일 이미지
클릭 시, 이미지를 원 사이즈로 볼 수 있음.
<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 속성 줘야 레이아웃이 안 흔들림.
