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 등)
====예제====
The outline-width Property
A thin outline.
A medium outline.
A thick outline.
A 4px thick outline.
\\
\\
======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-width''
* ''outline-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 | 아웃라인의 너비를 설정합니다. |
{{tag>오션, CSS outline }}