목차
CSS Outline
- description : CSS Outline width, color, shorthand, offset
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-08
Source of the article
CSS Outline
아웃라인 (outline)은 한 요소의 테두리(border) 외부에 그려지는 선으로, 해당 요소를 쉽게 눈에 띄게 합니다.
CSS에는 아래와 같은 아웃라인 속성들이 있습니다.
outline-styleoutline-coloroutline-widthoutline-offsetoutline
Note:
아웃라인은 테두리 (borders)와 다릅니다. 테두리와는 다르게, 아웃라인은 해당 요소의 테두리 외부에 표시되고 다른 콘텐츠들d에 겹쳐질 수 있습니다.
또한 아웃라인은 해당 요소의 치수의 부분이 아닙니다. 해당 요소의 전체 너비와 높이는 아웃라인의 너비에 영향을 받지 않습니다.
CSS Outline Style
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;}
Note: outline-style속성이 설정되어 있지 않으면 다른 아웃라인 속성들은 어떤 영향돌 미치지 않습니다.
CSS Outline Width
outline-width 속성은 아웃라인의 너비를 지정하고, 하기의 값들 중 하나를 가질 수 있습니다
- thin (일반적으로 1px)
- medium (일반적으로 3px)
- thick (일반적으로 5px)
- 특정 크기 (px, pt, cm, em 등)
예제
<!DOCTYPE html> <html> <head> <style> p.ex1 { border: 1px solid green; outline-style: solid; outline-color: red; outline-width: thin; } p.ex2 { border: 1px solid black; outline-style: solid; outline-color: dodgerblue; outline-width: medium; } p.ex3 { border: 1px solid orange; outline-style: solid; outline-color: blue; outline-width: thick; } p.ex4 { border: 1px solid Turquoise; outline-style: solid; outline-color: yellow; outline-width: 4px; } </style> </head> <body> <h2>The outline-width Property</h2> <p class="ex1">A thin outline.</p> <p class="ex2">A medium outline.</p> <p class="ex3">A thick outline.</p> <p class="ex4">A 4px thick outline.</p> </body> </html>
CSS Outline Color
outline-color속성은 아웃라인의 컬러를 지정하기 위해 사용합니다.
컬러는 하기에 의해 설정될 수 있습니다.
* 컬러 이름 - “red”와 같은 컬러 이름을 지정합니다.
- HEX - “ff0000”과 같은 HEX 값을 지정합니다.
- RGB - “rgb(255, 0, 0)“과 같이 RGB 값을 지정합니다.
- HSL - “hsl(0, 100%, 50%)“처럼 HSL 값을 지정합니다.
- invert - 컬러 배경에 상관없이 아웃라인이 보여지는 것을 보장하는 색상 반전(color inversion)을 수행합니다.
예제
p.ex1 { border: 2px solid black; outline-style: solid; outline-color: red; } p.ex2 { border: 2px solid black; outline-style: dotted; outline-color: blue; { p.ex3 { border: 2px solid black; outline-style: outset; outline-color: grey; }
HEX Values
- 테두리 컬러는 16진수 값(hexadecimal value, HEX)을 사용하여 지정할 수 있습니다.
예제
p.ex1 { outline-style: solid; outline-color: #ff0000; /* red */ }
RGB Values
- 테두리 컬러는 RGB 값을 사용하여 지정할 수 있습니다.
예제
p.ex1 { outline-style: solid; outline-color: rgb(255, 0, 0); /* red */ }
HSL Values
- 테두리 컬러는 HSL 값을 사용하여 지정할 수 있습니다.
예제
p.ex1 { outline-style: solid; outline-color: hsl(0, 100%, 50%); /* red */ }
Invert Color
하기의 예제는 outline-color: invert를 사용하고, 이것은 색상 반전 (color inversion)을 수행합니다. 이 속성은 배경 컬러에 상관없이 아웃라인이 보여지게 합니다.
예제
p.ex1 { border: 1px solid yellow; outline-style: solid; outline-color: invert; }
CSS Outline Shorthand
outline속성은 하기와 같은 개별 아웃라인 속성을 설정하기 위한 shorthand 속성입니다.
outline-widthoutline-style(꼭 필요)outline-color
outline속성은 상기 목록처럼 지정할 수 있습니다. 순서는 중요하지 않습니다.
p.ex1 {outline: dashed;} p.ex2 {outline: dotted red;} p.ex3 {outline: 5px solid yellow;} p.ex4 {outline: thick ridge pink;}
CSS Outline Offset
outline-offset속성은 아웃라인과 한 요소의 가장자리(edge)/테두리(border) 사이에 공간을 추가합니다. 요소와 아웃라인 사이의 공간은 투명합니다.
예제
p { margin: 30px; border: 1px solid black; outline: 1px solid red; outline-offset: 15px; }
p { margin: 30px; background: yellow; border: 1px solid black; outline: 1ps solid red; outline-offset: 15px; }
All CSS Outline Properties
| Property | Description |
|---|---|
| outline | 하나의 선언에서 outline-width, outline-style, outline-color를 설정하기 위한 shorthand 속성 |
| outline-color | 아웃라인의 컬러를 설정합니다. |
| offline-offset | 아웃라인과 한 요소의 가장자리 또는 테두리 사이의 공간을 설정합니다. |
| outline-style | 아웃라인의 스타일을 설정합니다. |
| outline-width | 아웃라인의 너비를 설정합니다. |
