CSS로 점선 윤곽선 설정하기
요소의 윤곽선(outline)을 점선 형태로 표시하려면 CSS의 outline-style 속성에 dotted 값을 지정하면 됩니다. 윤곽선은 요소의 테두리 바깥쪽에 그려지는 선으로, 두께는 outline-width 속성으로 함께 조절할 수 있습니다.
예제 코드
아래 예제에서는 문단(p) 요소에 두께 7px의 점선 윤곽선을 적용했습니다.
<html> <head> </head> <body> <p style = "outline-width:7px;outline-style:dotted;"> This text is having 7px dotted outline. </p> </body> </html>
코드 설명
outline-width:7px; — 윤곽선의 두께를 7픽셀로 지정합니다.
outline-style:dotted; — 윤곽선의 모양을 점선(dotted)으로 지정합니다.
이 코드를 브라우저에서 실행하면 해당 문단 텍스트 주위에 7px 두께의 점선 윤곽선이 나타나는 것을 확인할 수 있습니다.
참고: border와 outline의 차이
윤곽선(outline)은 테두리(border)와 비슷해 보이지만 다음과 같은 차이가 있습니다.
- 윤곽선은 요소의 레이아웃(너비·높이 계산)에 영향을 주지 않습니다.
- 테두리와 달리 각 변마다 다른 스타일을 따로 지정할 수 없으며, 네 방향이 항상 동일하게 적용됩니다.
- 주로 포커스 표시, 강조 효과 등 시각적인 피드백 용도로 활용됩니다.