CSS 인셋 테두리란?
CSS에서 요소에 인셋(inset) 테두리를 적용하려면 border-style 속성의 값을 inset으로 지정하면 됩니다. inset 값은 테두리가 안쪽으로 파여 들어간 듯한 입체적인 3D 효과를 만들어 주며, 버튼이나 박스 디자인에서 음각 느낌을 연출할 때 유용하게 활용됩니다.
참고로 border-style 속성에는 none, solid, dashed, dotted, double, groove, ridge, inset, outset 등 다양한 값을 사용할 수 있습니다. 기본값은 none이므로 테두리가 화면에 나타나도록 하려면 반드시 border-width(테두리 두께)와 함께 스타일을 지정해야 한다는 점을 기억하세요.
예제 코드
아래 예제는 border-style 속성에 none과 inset 값을 각각 적용한 결과를 비교해서 보여줍니다.
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:inset;">
This is inset border.
</p>
</body>
</html>
실행 결과 설명
위 코드를 브라우저에서 실행하면 다음과 같은 차이를 확인할 수 있습니다.
- 첫 번째 단락: border-style 값이 none이므로 border-width가 4px로 지정되어 있더라도 테두리가 화면에 표시되지 않습니다.
- 두 번째 단락: border-style 값이 inset이기 때문에 4px 두께의 테두리가 안쪽으로 눌러 들어간 듯한 음각 스타일로 렌더링됩니다.
이처럼 border-style만 바꾸는 것만으로도 같은 두께의 테두리라도 전혀 다른 시각적 효과를 얻을 수 있으며, 반대 개념인 outset 값과 함께 사용하면 볼록한 양각 테두리도 손쉽게 구현할 수 있습니다.