• CSS Outline

아웃라인 (outline)은 한 요소의 테두리(border) 외부에 그려지는 선으로, 해당 요소를 쉽게 눈에 띄게 합니다.


CSS에는 아래와 같은 아웃라인 속성들이 있습니다.

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

Note:
아웃라인은 테두리 (borders)와 다릅니다. 테두리와는 다르게, 아웃라인은 해당 요소의 테두리 외부에 표시되고 다른 콘텐츠들d에 겹쳐질 수 있습니다.
또한 아웃라인은 해당 요소의 치수의 부분이 아닙니다. 해당 요소의 전체 너비와 높이는 아웃라인의 너비에 영향을 받지 않습니다.

olutline-style속성은 아웃라인의 스타일을 지정하고, 하기의 값들 중 하나를 가질 수 있습니다.

• dotted - 점선 테두리를 정의합니다.
• dashed - 파선 테두리를 정의합니다.
• solid - 실선 테두리를 정의합니다.
• double - 이중 테두리를 정의합니다.
• groove - 3D 그루브 테두리를 정의합니다.
• ridge - 3D 리지 테두리를 정의합니다.
• inset - 3D 인셋 테두리를 정의합니다.
• outset - 3D 아웃셋 테두리를 정의합니다.
• none - 테두리가 나타나지 않습니다.
• hidden - 숨겨진 테두리를 정의합니다.

아래의 예제들은 다양한 outline-style 값을 보여줍니다.

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}