[CSS] Border vs Outline

🌟 Border vs Outline

- 공간 차지

border은 공간을 차지하기 때문에 width가 200px인 요소에
5px의 border를 적용한다면 총 width는 (200 + 5 + 5) = 210px 이 된다.

outline은 공간을 차지하지 않기 때문에 요소 자체의 길이에는 변화가 없다.

 

- 주변 요소의 영향

border를 적용하면 해당 요소의 크기가 변하기 때문에 레이아웃에 영향을 줄 수 있다.

outline은 주변 요소를 가리거나, 주변요소에 가려질 수 있다.

 

- 스타일링

border는 border-top, border-left와 같이 한 쪽에만 border를 적용해 줄 수 있다.

outline은 한 쪽에만 적용할 수 없다.

 

- CSS Box Model

border은 CSS Box Model에 포함되지만, outline은 포함되지 않는다.

따라서 box-sizing: border-box를 지정한다면 

border를 적용한 요소의 경우, border가 차지하는 공간만큼 줄어들게 된다.

outline을 적용한 요소의 경우, 아무런 변화가 생기지 않는다.

 

- 성능

border 속성은 reflow가 발생하지만 outline은 repaint만 발생한다.

 

추가로 border-width는 reflow와 repaint가 발생하지만,

border-radius, border-style 속성은 repaint만 일어난다.

---

추가 꿀팁(이라 부르지만 꼼수)

ex) input이 포커스 될 때, 밑에만 강조를 주고 싶은데 border를 사용하면 input 안의 글씨 위치가 바뀌는 상황

border를 transparent로 설정해두었다가, input에 포커스 되었을 때 색상을 변경하면 된다!