정의
바깥 주위에 둘러지는 선이며 만약 요소에 border 가 적용되어 있다면 outline 은 그 바깥에 생성.
outline 은 요소의 면적에 포함되지 않으므로 요소의 width 와 height 속성에 outline 의 두께는 포함되지 않음.
기본값
개별 속성값 참고
브라우저 지원 :
구문
{ outline:width style color; }
설정 속성
| 값 | 설명 | 값 속성 | 속성 설명 |
|---|---|---|---|
| outline-color | 지정된 요소 바깥 선의 색상을 지정 | invert (기본값) | 배경색에 관계없이 outline 색상이 보여지도록 반전 색상을 지정 |
| color | 바깥 선의 색상을 지정 | ||
| inherit | 지정 요소의 바깥 선 색상을 부모(상위) 요소로부터 상속받음 | ||
| outline-style | 지정된 요소의 바깥 선 스타일을 지정 | none (기본값) | 테두리 없음 |
| hidden | 숨겨진 윤곽을 지정 | ||
| dotted | 도트(점선) 바깥 선 지정 | ||
| dashed | 대시 기호(-) 바깥 선 지정 | ||
| solid | 일반적인 바깥 선 지정 | ||
| double | 두 줄로 바깥 선 지정 | ||
| groove | groove 는 홈이란 뜻으로 움푹 파인 효과를 가진 바깥 선을 지정 | ||
| ridge | ridge 는 산등성이처럼 솟은 부분이란 뜻으로 해당 요소가 위로 올라온 것 같은 효과를 가진 바깥 선을 지정 | ||
| inset | top(상)-left(좌)의 바깥 선이 진하게 표시되어 요소가 안으로 들어간 느낌을 지정 | ||
| outset | right(우)-bottom(하)의 바깥 선이 진하게 표시되어 요소가 밖으로 나온 느낌을 지정 | ||
| inherit | 지정 요소의 테두리 스타일을 부모(상위) 요소로부터 상속받음 | ||
| outline-width | 지정된 요소의 바깥 선 두께를 지정 | medium (기본값) | 중간 정도 두께의 바깥 선으로 지정(3px) |
| thin | 얇은 바깥 선으로 지정(1px) | ||
| thick | 굵은 바깥 선으로 지정(5px) | ||
| length | pixel 값으로 바깥 선을 지정 | ||
| inherit | 지정 요소의 바깥 선 두께를 부모(상위) 요소로부터 상속받음 |