이미지에 테두리를 추가하면 디자인적으로 더욱 돋보이게 만들 수 있습니다.
CSS를 사용하면 다양한 스타일의 테두리를 적용할 수 있으며, 커스터마이징도 용이합니다.
이번 글에서는 CSS로 이미지에 테두리를 추가하는 다양한 방법을 소개합니다.
기본 테두리 적용하기
CSS의 border 속성을 사용하여 이미지를 감싸는 테두리를 추가할 수 있습니다.
See the Pen 기본 테두리 적용하기 by saladent (@saladent) on CodePen.
위 예제에서는 이미지에 2픽셀 두께의 검은색 실선 테두리를 추가했습니다. border 속성은 두께, 스타일, 색상 순으로 작성합니다.
다양한 테두리 스타일 적용하기
border-style 속성에는 다양한 옵션이 있습니다.
See the Pen 다양한 테두리 스타일 적용하기 by saladent (@saladent) on CodePen.
각 속성 값은 다음과 같이 다양한 선 모양을 나타냅니다.
| 속성 값 | 설명 |
| solid | 실선 |
| dashed | 긴 점선 |
| dotted | 점선 |
| double | 두 줄 테두리 |
| groove | 입체적으로 보이는 선 |
| ridge | 윤곽이 튀어나온 느낌 |
| inset | 안으로 들어간 느낌 |
| outset | 밖으로 튀어나온 느낌 |