CSS 경계선 속성
정의와 사용법
outline(경계선)은 요소 주위에 그려지는 선으로, 경계선 외곽에 위치하며 요소를 강조할 수 있습니다.
주석:경계선은 공간을 차지하지 않으며 반드시 사각형이 아닌 것도 있습니다.
outline 줄임属性은 하나의 선언에서 모든轮廓속성을 설정합니다.
순서대로 다음과 같은 속성을 설정할 수 있습니다:
값을 설정하지 않으면 문제가 발생하지 않습니다. 예를 들어 outline:solid #ff0000;도 허용됩니다.
추가로 참조:
CSS 강의:CSS 외곽선
HTML DOM 참조 매뉴얼:outline 속성
CSS 문법
outline: outline-width outline-style 아웃라인-컬러|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| 아웃라인-컬러 | 봉투의 색상을 정의합니다. 참조:아웃라인-컬러 가능한 값. |
| outline-style | 봉투의 스타일을 정의합니다. 참조:outline-style 가능한 값. |
| outline-width | 봉투의 너비를 정의합니다. 참조:outline-width 가능한 값. |
| inherit | outline 속성 설정이 부모 요소에서 상속되어야 합니다. |
기술 세부 사항
| 기본 값: | invert none medium |
|---|---|
| 상속성: | no |
| 버전: | CSS2 |
| JavaScript 문법: | object.style.outline="#0000FF dotted thin" |
TIY 예제
- 요소 주위에 선 그리기
- 이 예제에서 outline 속성을 사용하여 요소 주위에 선을 그리는 방법을 보여줍니다.
브라우저 지원
표에 나타난 숫자는 이 속성을 최초로 지원하는 브라우저 버전을 나타냅니다.
| 크롬 | IE / 엣지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
주석:DOCTYPE가 지정되면 IE8은 outline 속성을 지원합니다.
