CSS Outline(선)

(outline) 경계선은 요소(예: 버튼, 활성 폼 필드 등)의 경계선 외부에 그려진 선으로, 그 요소를 강조합니다.

경계선(Outline) VS 경계(Border)

경계선은 일반적으로 요소를 강조하기 위해 사용됩니다. 경계선은 한 눈에 보면 경계와 매우 유사하지만, 다음과 같은 면에서 경계와 다릅니다:

• 경계선은 공간을 차지하지 않습니다. 그들은 항상 요소 상자의 최상단에 배치되어 있으며, 이는 그들이 페이지上的 다른 요소와 중복될 수 있습니다.

• 경계와 달리, 경계선은 각 경계에 다른 너비를 설정할 수 없으며, 각 경계에 다른 색상과 스타일을 설정할 수도 없습니다. 경계선은 모든 면에서 동일합니다.

• 경계선은 중복 외에도 주변 요소에 대한 어떠한 영향도 미치지 않습니다.

• 경계와 달리, 경계선은 요소의 크기나 위치를 변경하지 않습니다.

• 경계선은 사각형이 아닐 수 있습니다.

outline-width 경계선 너비 속성

outline-width속성은 요소에 추가할 경계선의 너비를 지정합니다. 그 값은 CSS 길이(px, pt, em 등) 또는 허용된 키워드 중 하나여야 합니다. 단, 퍼센트나 부정 값은 허용되지 않습니다. 같은border-width재산이 같습니다。

p {
　　　　outline-width:　thick;
}

outline-style 경계선 스타일 속성

이 outline-style속성은 경계선 스타일을 설정합니다. 예를 들어: solid, dotted 등.

이 속성은 다음 중 하나의 값을 취할 수 있습니다: none, hidden, dashed, dotted, double, groove, inset, outset, ridge, solid. 같은border-style값이 같습니다。

p {
　　　　outline-style:　double;
}

outline-color 경계선색상 속성

outline-color속성이 경계선의 색상을 설정합니다。

p {
　　　　outline-style:　solid;
　　　　outline-color: #0000ff;
}

outline-color을 투명으로 사용하면

轮廓 스플래시 속성

CSS outline 속성은 하나나 여러 개의 단일轮廓 속성을 설정하는 스플래시 속성 outline입니다-style, outline-width 및 outline-color 단일 규칙에서 사용됩니다.

p {
　　　　outline:　5px solid #9acd32;
}

轮廓 스타일 속성을 설정할 때 단일轮廓 속성의 값을 무시하거나 지정하지 않으면, outline은 해당 속성의 기본 값을 사용합니다(만약 있으면).

아래의 예제에서轮廓은 너비가5px의 검은색 실선:

p {
　　　　color: black;
　　　　outline:　5px solid;
}

하지만, 경우outline-style이 값을 생략하면轮廓이 표시되지 않습니다. 왜냐하면 outline-styleproperty의 기본 값은 none입니다.

아래의 예제에서는轮廓이 없을 것입니다:

p {
　　　　outline:　5px #00ff00;
}

활성 링크 주위의 선을 제거

이 outline 속성은 활성 링크 주위의 선을 제거하는 데 널리 사용됩니다.

a, a:acive, a:focus {
　　　　outline: none;　/*　Firefox, Chrome, IE에서 작동8　and above　*/
}