[image] CSS - Thumbnail Images - (썸네일 이미지 스타일)

썸네일 이미지

클릭 시, 이미지를 원 사이즈로 볼 수 있음.

 

<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 속성 줘야 레이아웃이 안 흔들림.