border vs outline

CSS를 사용하면서 어떠한 태그에 테두리를 만들고자 하면 바로 떠오르는 CSS 속성은 border일 것이다.

 

기본적으로 가장 많이 사용하는 속성이자, 어느 브라우저에서나 값이 동일하게 적용되는 속성이다.

border의 경우 테두리를 모든 면에 줄 수도 있지만, 특정 테두리만 옵션을 줄 수도 있다는 장점이 있다.

 

하지만 이 border만이 테두리를 줄 수 있는 건 아니다.

outline이나 box-shadow 같은 속성들로도 테두리 효과를 줄 수 있다.

 

이 중 오늘은 outline이라는 속성과 이 border 속성의 차이를 알아보고자 한다.

 

둘의 가장 큰 차이는 다음과 같다.

 

⭐️ border과 outline ⭐️

border

border를 적용하면 선 두께 만큼 레이아웃이 변한다. 

 

outline

outline을 적용하면 레이아웃을 유지한 체 선을 그린다.

 

즉, 레이아웃에 영향을 주는가 아닌가로 분류할 수 있는 것이다.

 

 

위 사진을 보면 더 이해하기 쉬울 거다.

outline은 요소를 눈에 띄게 하기 위해 테두리(border)의 바깥쪽에 그려지는 선이다.

 

나 같으면 여기서 outline이 레이아웃에 영향을 주지 않으니까 border보다 사용하기 더 편하지 않을까 하는 생각이 들기도 했다.

 

하지만, border는 모든 브라우저에서 인식을 할 수 있지만 outline은 그렇지 않다는 점도 문제가 된다.

그래서 사람들이 테두리하면 바로 border을 많이 떠올리곤 하는 것이다.

 

또한 outline은 border와 다르게 테두리 적용이 내 마음처럼 적용할 수 있는 부분이 아니다.

위에서 border는 모든 면에도 테두리를 적용할 수 있지만, 내가 선택한 부분 일부분에만 테두리를 넣을 수도 있다고 했는데, outline은 이렇게 자유로운 border와 다르게 상하좌우 모든 테두리에 속성을 필수적으로 적용할 수 밖에 없다.

 

❗️ 결론 ❗️

border가 더 사용에 자유롭고, 모든 브라우저에서 인식할 수 있다고 해서 무조건 적으로 border만 사용할 필요는 없다.

 

때로는 레이아웃에 영향을 안주면서 테두리를 줘야할 경우가 생길 수 있다.

 

그것을 위해 outline이 존재하는 거고, 다양한 디자인으로 웹을 꾸미는 만큼 이러한 속성들의 다양성을 알고 필요에 맞춰 유용하게 사용하는 것이 좋다.