CSS 입문 | CSS 박스 모델 | 아웃라인(outline)

Tags:

아웃라인(outline)

outline 속성은 HTML 요소의 가장 바깥 부분을 둘러싸고 있는 아웃라인 부분의 스타일을 설정한다.
이 속성은 border 속성과 마찬가지로 style, width, color 속성을 가진다.

하지만 outline 속성은 border 속성과는 달리 HTML 요소의 전체 크기에는 포함되지 않는다.
HTML 요소의 높이나 너비는 outline의 두께에 전혀 영향을 받지 않는다.

CSS outline 속성

속성 설명
outline 모든 outline 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
outline-style 아웃라인(outline)를 다양한 모양으로 설정함.
outline-width 아웃라인(outline)의 너비를 설정함.
outline-color 아웃라인(outline)의 색상을 설정함.
outline-offset 테두리(border)와 아웃라인(outline) 사이의 여백을 설정함.

outline-style 속성

outline-style 속성을 이용하면 아웃라인(outline)을 다양한 모양으로 설정할 수 있다.

  1. dotted : 아웃라인을 점선으로 설정함.
  2. dashed : 아웃라인을 약간 긴 점선으로 설정함.
  3. solid : 아웃라인을 실선으로 설정함.
  4. double : 아웃라인을 이중 실선으로 설정함.
  5. groove : 아웃라인을 3차원인 입체적인 선으로 설정하며, outline-color 속성값에 영향을 받음.
  6. ridge : 아웃라인을 3차원인 능선효과가 있는 선으로 설정하며, outline-color 속성값에 영향을 받음.
  7. inset : 3차원인 내지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받음.
  8. outset : 3차원인 외지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받음.
  9. none : 아웃라인(outline)을 없앰.
  10. 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;}
    p.none {outline-style: none;}
    p.hidden {outline-style: hidden;}
</style>

익스플로러 8과 그 이전 버전에서는 HTML 문서에 <!DOCTYPE html>태그가 삽입되어 있어야 outline 속성이 제대로 표현됩니다.

outline-width 속성

outline-width 속성은 아웃라인(outline)의 두께를 설정한다.
px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정할 수 있다.
또한, 미리 설정해 놓은 예약어인 thin, medium, thick을 사용하여 설정할 수도 있다.

<style>
    p.solidA { outline-style: solid; outline-color: violet; outline-width: 2px; }
    p.solidB { outline-style: solid; outline-color: coral; outline-width: 7px; }
    p.dashedA { outline-style: dashed; outline-color: violet; outline-width: thin; }
    p.dashedB { outline-style: dashed; outline-color: coral; outline-width: thick; }
</style>

outline-color 속성

outline-color 속성은 아웃라인(outline)의 색상을 설정한다.
기본적인 color 속성값들뿐만 아니라 색반전을 나타내는 invert 속성값을 사용할 수 있다.
또한, invert 속성값은 배경색과 상관없이 아웃라인을 보여주기 위한 색반전을 설정한다.

<style>
    p { border: 1px solid black; outline-style: dashed; }
    p.red { outline-color: red; }
    p.green { outline-color: rgb(0,255,0); }
    p.blue { outline-color: #0000FF; }
    p.invert { outline-color: invert; }
</style>

아웃라인 축약 표현(outline shorthand)

모든 outline 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

<style>
    p { border: 1px solid black; }
    p.none { border-style: none; }
    p.good { outline: 3px solid teal; }
    p.wrong { outline: 5px teal; }
</style>

outline 속성을 설정하기 위해서는 반드시 outline-style 속성이 먼저 설정되어 있어야 한다.




최종 수정 : 2021-08-27