웹 페이지에서 이미지를 썸네일 형태로 보여주고 싶다면 별도의 이미지 편집 없이 CSS의 border 속성만으로 간단하게 구현할 수 있습니다. 테두리, 둥근 모서리, 여백을 조합하면 깔끔하고 세련된 썸네일 스타일을 만들 수 있습니다.
CSS로 썸네일 만들기 예제
아래 예제는 img 요소에 테두리와 패딩, 둥근 모서리를 적용해 썸네일 스타일을 완성한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 2px solid orange;
border-radius: 3px;
padding: 7px;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="온라인 컴파일러" width="300" height="300">
</body>
</html>코드 설명
border 속성
border: 2px solid orange;는 이미지 주위에 두께 2px의 주황색 실선 테두리를 추가합니다. 색상과 두께는 원하는 대로 자유롭게 변경할 수 있으며, dashed, dotted 등 다른 선 스타일도 사용 가능합니다.
border-radius 속성
border-radius: 3px;는 이미지와 테두리의 모서리를 부드럽게 둥글게 처리합니다. 값을 크게 설정할수록 더 많이 둥글어지며, 50%로 지정하면 원형 이미지도 만들 수 있습니다.
padding 속성
padding: 7px;은 이미지와 테두리 사이에 7px의 여백을 만들어 마치 액자처럼 감싼 효과를 줍니다. 이 여백 덕분에 썸네일이 더욱 돋보이게 됩니다.
마무리
이처럼 CSS의 기본 속성 몇 가지만 활용해도 이미지 편집 도구 없이 웹에서 바로 썸네일 스타일을 적용할 수 있습니다. 그림자 효과(box-shadow)나 호버 애니메이션을 추가하면 더욱 완성도 높은 썸네일을 만들 수 있습니다.