CSS - 아웃라인에 스타일 지정

아웃라인이란 요소의 윤곽선(가장자리)를 말합니다. 아웃라인과 테두리와의 간격, 색상, 아웃라인 크기를 조절할 수 있습니다.

속 성	설 명
outline-style	아웃라인 스타일을 지정 none: 테두리를 감춤 solid: 한 개의 실선 double: 두 개의 실선 groove: 안으로 들어간 선 ridge: 밖으로 돌출된 선 inset: 들어간 3차원 상자 outset: 튀어나온 3차원 상자 dotted: 도트와 공백을 교대로 출력 dashed: 대시와 공백으로 교대로 출력
outline-width	아웃라인의 두께 지정 <크기> | thin | medium | thick 중 하나를 값으로 지정. medium: 상단 아웃라인을 조금 두껍게 지정.   thin과 thick의 중간 두께. 기본 값 thin: 상단 아웃라인을 얇게 지정 thick: 상단 아웃라인을 두껍게 지정 크기: px, % 같은 길이
outline-color	아웃라인의 색상을 지정 invert: 색상반전. 기본값.   색상 배경에 관계없이 외곽선을 볼 수 있음. color: 색상. rgb, #rgb, #rrggbb, rgba …
outline-offset	아웃라인과 테두리와의 간격을 지정.
outline	outline-style, outline-width, outline-color 속성을 한꺼번에 지정함. 속성 값은 <두께> | <스타일> | <색상>을 지정.

<style>
.use-outline {
  margin: 20px;
  padding: 20px;
  border: 1px solid;
  background-color: yellow;
  outline: thick dotted red;
  outline-offset: 10px;
}
</style>
<div class="use-outline">하보니 PHP</div>

하보니 PHP