CSS의 border 속성을 사용하면 이미지에 아주 간단하게 테두리를 추가할 수 있습니다. 테두리의 두께, 스타일, 색상을 자유롭게 지정할 수 있어 이미지를 더욱 돋보이게 연출할 수 있습니다.
border 속성 기본 문법
border 속성은 다음과 같이 세 가지 값을 한 번에 지정할 수 있습니다.
border: 두께 스타일 색상;
- 두께(px): 테두리의 굵기를 픽셀 단위로 지정합니다.
- 스타일(solid, dashed, dotted 등): 테두리의 모양을 결정합니다.
- 색상: 색상 이름, HEX 코드, rgb() 값 등으로 지정할 수 있습니다.
예제 코드
다음은 CSS로 이미지에 테두리를 추가하는 전체 HTML 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 8px solid rgb(0, 238, 255);
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</body>
</html>코드 설명
- border: 8px solid rgb(0, 238, 255); — 8픽셀 두께의 실선(solid) 테두리를 청록색 계열의 밝은 색상으로 지정합니다.
- width: 400px; height: 400px; — 이미지의 가로·세로 크기를 각각 400픽셀로 고정합니다.
실행 결과
위 코드를 브라우저에서 실행하면 이미지 주위에 8픽셀 두께의 청록색 실선 테두리가 둘러져 있는 것을 확인할 수 있습니다.
다양한 테두리 스타일 활용하기
solid 대신 dashed(대시 선), dotted(점선), double(이중선) 등의 스타일 값을 사용하면 서로 다른 느낌의 테두리를 만들 수 있습니다. 또한 border-radius 속성을 함께 사용하면 테두리의 모서리를 둥글게 처리하여 부드러운 디자인을 연출할 수도 있습니다.