CSS Outline vs Border

CSS Outline Properties

CSS Outline 속성을 사용하여 요소의 Box 주위의 윤곽선 영역을 정의할 수 있습니다. 윤곽선은 요소의 Border 가장자리 바로 밖에 그려진 선입니다. Outline은 일반적으로 단추, 링크, 양식 필드 등과 같은 요소의 초점 또는 활성 상태를 나타내는 데 사용됩니다. 다음 절에서는 아웃라인의 스타일, 색상 및 너비를 설정하는 방법에 대해 설명합니다.

 

Outlines Vs Borders

Outline과 Border는 비슷해 보이지만 다음과 같은 차이점이 있습니다.

• Outline은 항상 요소의 Box 위에 배치되어 페이지의 다른 요소와 겹칠 수 있기 때문에 공간을 차지하지 않습니다.
• Border와는 달리, 외곽선은 각 모서리를 다른 너비로 설정하거나 각 모서리의 색상과 스타일을 설정할 수 없습니다. Outline은 Box상의 각변이 모두 동일합니다.
• Outline은 겹치는 것 외에 주변 요소에 영향을 미치지 않습니다.
• Border와는 달리 Outline은 요소의 크기나 위치를 변경하지 않습니다.
• Outline은 직사각형이 아닐 수 있지만 원형 Outline을 만들 수는 없습니다.