동영상 강좌보기

CSS윤곽선(outline)

윤곽선은 요소를 '눈에 띄게' 만들기 위해 테두리를 제외한 요소 주위에 그려지는 선입니다.(border바깥)

CSS에는 다음과 같은 윤곽선속성이 있습니다.

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

** 윤곽선은 테두리와 다릅니다. 테두리와는 달리 윤곽선은 테두리외부에 그려지며 다른 요소와 겹칠 수 있습니다. 또한 윤곽선은 요소를 이루는 구성의 일부가 아닙니다. 요소의 전체 너비와 높이는 윤곽선의 너비에 영향을 받지 않습니다.

outline-style

outline-style속성은 윤곽선의 스타일을 지정하며 다음값중 하나를 가질 수 있습니다.

• dotted - 점선으로 된 윤곽선을 정의합니다.
  
• dashed - 파선 테두리를 정의합니다.
  
• solid - 단색 테두리를 정의합니다.
  
• double - 이중 윤곽선을 정의합니다.
  
• groove - 3D 그루브 아웃 라인을 정의합니다.
  
• ridge - 3D ridged윤곽선을 정의합니다.
  
• inset - 3D 인세트 윤곽선을 정의합니다.
  
• outset - 3D 아웃셋 윤곽선을 정의합니다.
  
• none - 윤곽선을 정의하지 않습니다.
  
• hidden - 숨겨진 윤곽선을 정의합니다.
  

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;}

** outline-style속성이 설정되지 않으면 다른 윤곽선 속성을 아무런 영향을 미치지 않습니다.

윤곽선 색(outline-color)

outline-color속성은 윤곽선의 색을 설정하는데 사용됩니다.

색은 다음과 같이 설정할 수 있습니다.

• name - "red"와 같이 웹에서 미리 설정된 색상이름(영어)를 사용할 수 있습니다.
  
• RGB - 'rgb(255,0,0)'처럼 RGB값을 지정할 수 있습니다.
  
• Hex - "#ff0000"와 같이 16진수값을 지정할 수 있습니다.
  
• invert - 색상 반전을 사용할 수 있습니다. (색상배경에 관계없이 윤곽선을 볼 수 있음)
  

p.ex1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
}

p.ex2 {
    border: 1px solid black;
    outline-style: double;
    outline-color: green;
}

p.ex3 {
    border: 1px solid black;
    outline-style: outset;
    outline-color: yellow;
}

윤곽선 너비(outline-width)

outline-width속성은 윤곽선의 너비를 지정하며 다음값 중 하나를 가질 수 있습니다.

• thin(약 1px)
  
• medium(약 3px)
  
• thick (약 5px)
  
• 사용자 지정크기 (px, pt, cm, em,...)
  

p.ex1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: thin;
}

p.ex2 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: medium;
}

p.ex3 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: thick;
}

p.ex4 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: 4px;
}

윤곽선 - 속기 속성

outline속성은 다음과 같은 개별 윤곽선 속성을 설정하기 위한 속기 속성입니다.

• outline-width
  
• outline-style(필수)
  
• outline-color
  

outline속성은 위 목록에서 2 또는 3의 값으로 지정되며 값의 순서는 중요하지 않습니다.

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

윤곽선 오프셋

outline-offset속성은 윤곽선과 요소의 가장자리/테두리 사이에 공백을 추가합니다.

요소와 그 윤곽선 사이의 공간은 투명합니다.

p {
    margin: 30px;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

다음 예제는 요소와 윤곽선 사이의 공간이 투명함을 보여줍니다.

p {
    margin: 30px;
    background: yellow;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}