CSS outline

outline은 border 바깥에, 요소를 두드러지게 하는, 요소 주변에 그려지는 것이다.

outline

border

content

outline-style

outline-color

outline-width

outline-offset

outline과 같은 속성이 있다.

outline은 border와 다르다. 요소의 border 바깥에 그려지고 컨텐츠를 감쌀 수 있다. 요소의 총 너비와 높이는 outline의 너비에 영향을 받지 않는다.

outline-style은 dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden이 있다.

outline color

색깔은 name, RGB, Hex, invert 등의 방식으로 설정될 수 있다.

p.ex1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
}

p.ex2 {
    border: 1px solid black;
    outline-style: double;
    outline-color: green;
}

p.ex3 {
    border: 1px solid black;
    outline-style: outset;
    outline-color: yellow;
}

A solid red outline.

A double green outline.

An outset yellow outline.

아래 예제는 배경색에 상관 없이 outline이 보이게 해준다.

p.ex1 {
    border: 1px solid yellow;
    outline-style: solid;
    outline-color: invert;
}

outline-width는 outline의 너비를 지정한다.

outline shorthand property

값의 순서에 상관 없이 outline-width, outline-style(필수), outline-color

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

outline offset

outline과 border 사이에 공간을 추가한다. 그 공간은 투명하다.

p {
    margin: 30px;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;

 background: red;

}

This paragraph has an outline 15px outside the border edge.

https://www.w3schools.com/css/css_outline.asp