CSS의 외곽선 (border와 outline 비교하기)

border와 outline은 둘다 요소의 외곽을 꾸미는 속성이지만 차이가 있어 용도에 따라 선택하여 사용할 수 있다.

 

 

 

1. 외곽선의 스타일링

선의 색상, 두께, 스타일 등 기본적인 스타일은 두 속성 다 지정이 가능하지만 차이가 발생하는 부분도 있다.

 

• 개별 외곽선 스타일

border에서는 border-top, border-right 등의 속성을 활용해서 한쪽 면에만 외곽선 스타일을 지정할 수 있다. 그러나 outline에서는 지원하지 않아 개별적인 스타일링은 불가능하고 전체 외곽선 설정만 가능하다.

 

• 둥근 모서리

border는 border-radius 속성을 이용해 둥근 모서리를 적용할 수 있다. 하지만 outline에는 outline-radius같은 속성이 존재하지 않는다. 하지만 outline이 적용된 요소에 border-radius를 적용하면 둥근 모서리 효과를 적용할 수 있다.

 

• offset

outline에서만 지원하지 않던 여러 기능들과 다르게 이 기능은 outline에서만 지원하는 기능이다. outline-offset을 원하는 만큼 설정하여 요소에서 얼마나 떨어진 위치에 외곽선을 그릴지 지정해 줄 수 있다.

 

 

 

 

2. 차지하는 공간

border와 outline의 사용상의 차이를 만드는 가장 큰 차이점이다. 외곽선을 만드는 형태나 스타일은 두 속성이 비슷하지만 레이아웃에서 공간을 차지하는것에서 차이가 발생한다.

• border : 외곽선이 layout에서 공간을 따로 차지한다. 예를들어 30*30px의 상자에 5px의 border 외곽선을 추가하면 40*40px의 공간을 차지하게 된다. 아래 예시처럼 hover 액션에 border 값을 추가하게되면 layout이 변경되는(아래 요소가 밀려남)것을 알 수 있다.

See the Pen border test by PARKSEONGSU (@ahuiogadjfgo) on CodePen.

 

 

• outline : 외곽선이 layout에 영향을 주지 않는다. 기존 레이아웃을 해치지 않고 외곽선을 추가할 수 있지만 요소가 겹쳐보일수 있다. 아래 예시처럼 기존 layout을 해치지 않고 hover 이벤트 등에 활용할 수 있지만 요소가 겹쳐질수 있다는 점을 고려하여 설계해야한다.

See the Pen outline test by PARKSEONGSU (@ahuiogadjfgo) on CodePen.

 

 

이러한 특성을 가진 두 요소는 각각 상황에 맞게 골라서 사용할 수 있다.

• border : layout의 영향을 고려한 기본 외곽선 설계에 사용한다. 최종적으로 차지하는 공간에 내부 여백을 줄수 있다. 또한 특정 방향의 외곽선만 필요할때에도 사용할 수 있다.
• outline : layout을 해치지 않는다는 특성을 활용하여 기본적으로 설계가 끝난 구조에 hover, focus 등의 이벤트를 줄때 유용할 수 있다. 사용자에게 피드백을 주는 UI를 제작할때 layout을 해치지 않고 스타일을 추가할 수 있다.

 

▶ 정리

 

두 속성의 차이를 표로 정리하면 다음과 같다.

	border	outline
선 스타일	O (solid, dashed, dotted 등)
색상	O
너비	O
단축속성	O (1px solid black 형식)
개별 외곽선 스타일	O (border-top등)	X
둥근 모서리	O (border-radius)	X (border-radius 요소를 포함한 둥근모서리 가능)
레이아웃 영향	O	X
offset 지원	X	O