outline 이란?

outline은 요소의 border 바깥쪽에 그려지는 선이다.

outline

outline은 border와 다르다! border와 달리 outline은 요소의 border 외부에 그려지고 다른 content와 오버랩될 수 있다. 또한 요소의 너비와 높이에 영향을 주지 않는다.

속성

1
2
3
4
5
outline-style
outline-color
outline-width
outline-offset
outline /* shorthand */

다른 속성은 이미 다뤄봤으니 outline-offset 속성에 대해 알아보자

outline-offset

outline-offset은 outline과 border 사이의 공간을 추가하는 속성이다. 이 공간은 투명하다.

1
2
3
4
5
6
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

outline