[css] outline 속성
CSS의 outline 속성은 요소 주위에 테두리를 추가하는 데 사용됩니다. 일반적으로 outline은 요소의 외형을 강조하고 포커스 상태를 시각적으로 나타내는 데 중요한 역할을 합니다.
outline 속성의 구문
outline 속성은 다음과 같은 형식으로 사용됩니다.
selector {
outline: <크기> <유형> <색상>;
}
여기서,
<크기>는 테두리의 크기를 지정합니다. 기본값은medium이며,thin,thick, 혹은 픽셀 값으로 지정할 수 있습니다.<유형>은 테두리의 유형을 지정하며,dotted,dashed,solid,double등이 가능합니다.<색상>은 테두리의 색상을 지정하며, 색상 이름, HEX 코드, RGB 값 등을 사용할 수 있습니다.
outline과 border의 차이
outline과 border는 비슷해 보일 수 있지만, 몇 가지 중요한 차이점이 있습니다.
border는 요소의 크기를 차지하는 반면,outline은 그렇지 않습니다. 따라서outline은 요소의 크기나 위치를 변경하지 않으며 레이아웃에 영향을 주지 않습니다.outline은 키보드 포커스를 받은 요소를 시각적으로 나타내는데 사용됩니다.
outline-offset 사용
outline-offset 속성은 기본적으로 outline과 함께 사용되며, 테두리와 요소 사이의 간격을 조절합니다. outline-offset을 사용하면 요소의 테두리를 더 정확하게 조절할 수 있습니다.
selector {
outline: 2px solid blue;
outline-offset: 5px;
}
적절한 사용 사례
outline 속성은 주로 포커스 상태를 시각적으로 보여주는 데 사용됩니다. 또한, 사용자 환경 설정에 따라 포커스 스타일을 재정의할 때에도 outline이 유용하게 활용될 수 있습니다.
outline 속성은 시각적 강조에 사용되는 것이 목적이므로, 일반적인 요소 사이에 공간을 나눌 때 등으로는 border 속성을 사용하는 것이 바람직합니다.
결론
outline 속성은 CSS로 요소의 테두리를 지정할 때 유용한 기능입니다. 특히, 클릭이나 키보드 포커스 상태를 시각적으로 나타내는 데에 활용됩니다. outline 속성은 border와는 달리 레이아웃을 변경하지 않는 것이 중요한데, 이 점을 염두에 두고 적절하게 활용해야 합니다.
참고 문헌: