【CSS】요소를 두드러지게 보이게 하는 윤곽선/외곽선(outline)

아웃라인(outline, 운곽선)은 보더(border)의 외부에 그려지는 선으로써 요소를 돋보이게 합니다.

outline 속성은 윤곽선의 스타일, 굵기, 색상(outline-style, outline-width, outline-color)을 함께 지정하는 데 사용합니다.

임의의 순서로 공백으로 구분하여 지정합니다.

border 속성과 달리 outline 속성은 공백을 만들지 않기 때문에 페이지의 레이아웃에 영향을 주지 않습니다. 또한 상하 좌우의 개념이 없습니다.

선택자 { outline: 속성 값; }

<style> 
 .outline1 {
 　　outline: #00FF00 dotted 1px;
　　　　　 } 
 .outline2 {
 　　outline-width: 1px;
 　　outline-style: dotted;
 　　outline-color: #00ff00;}
　　　　　}
</style>

위의 두 가지 CSS는 아래처럼 같은 결과로 나타납니다. 첫 번째는 outline 속성을 색상, 스타일, 두께 순으로 정리하여 지정하고 있습니다. 두 번째는 각 속성을 나누어 지정했습니다.

윤곽선(한꺼번에 지정)

윤곽선(나누어서 지정)

outline-offset: 속성 값;

<style> 
 .outline3 {
 　　outline: #00FF00 dotted 1px;
 　　outline-offset:3px;
</style>

CSS3에서 추가된 속성으로 초기 값은 "0" 입니다. 보더 주변과 윤곽선 사이의 여백을 지정합니다. 여기서는 3px로 지정해 보았습니다.

윤곽선(나누어서 지정)

outline,box-shadow를 사용한 BOX 디자인

<style> 
  .box{
　　border:1px solid #eee;
　　outline:1px solid #4c4c4c;
　　box-shadow:inset 0 2px 45px #7c7c7e;
　　  }
</style>

바깥 쪽은 outline(짙은 회색)과 boder(얇은 회색), 안쪽은 box-shadow(중간 회색)으로, 박스 안쪽에 그림자를 붙이는 설정으로 아래와 같은 결과가 되었습니다.