목차

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에는 아래와 같은 아웃라인 속성들이 있습니다.


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

CSS Outline Style

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


아래의 예제들은 다양한 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 속성은 아웃라인의 너비를 지정하고, 하기의 값들 중 하나를 가질 수 있습니다

예제

<!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”와 같은 컬러 이름을 지정합니다.

예제

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


예제

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* red */
}

RGB Values


예제

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}

HSL Values


예제

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속성은 상기 목록처럼 지정할 수 있습니다. 순서는 중요하지 않습니다. 

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 아웃라인의 너비를 설정합니다.
, ,