CSS 아웃라인 색상 속성
정의와 사용법
outline(轮廓)은 요소 주위에 그려지는 선으로, 테두리边缘 외곽에 위치하며, 요소를 강조하는 역할을 합니다. outline 속성은 요소 주위의轮廓선을 설정할 수 있습니다.
주석:항상 outline-color 속성 앞에 outline-style 속성을 선언하세요. 요소가轮廓을 얻은 후에야轮廓의 색상을 변경할 수 있습니다.
주석:轮廓선은 공간을 차지하지 않으며, 반드시 사각형이 아닙니다.
outline-color 속성은 요소의 전체轮廓에 대해 보이는 부분의 색상을 설정합니다. 기억해야 할 것은,轮廓의 스타일이 none가 아니어야轮廓이 나타나야 합니다.
추가로 참조:
CSS 가이드:CSS 경계선
CSS 참조 가이드:outline 속성
HTML DOM 참조 가이드:outlineColor 속성
CSS 문법
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| color_name | 색상 이름을轮廓 색상으로 지정합니다(예: red). |
| hex_number | 16진수 값을轮廓 색상으로 지정합니다(예: #ff0000). |
| rgb_number | rgb 코드의 색상 값을轮廓 색상으로 지정합니다(예: rgb(255,0,0)). |
| invert | 기본. 색상 반전(역색)을 수행하여 다른 배경 색상에서도轮廓이 보이도록 합니다. |
| inherit | 부모 요소에서轮廓 색상 설정을 상속받아야 합니다. |
기술 세부 사항
| 기본값: | invert |
|---|---|
| 상속성: | no |
| 버전: | CSS2 |
| JavaScript 문법: | object.style.outlineColor="#0000FF" |
TIY 예제
- 轮廓의 색상 설정
- 이 예제에서는轮廓의 색상을 설정하는 방법을 보여줍니다.
브라우저 지원
표에 나타난 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
| 크롬 | IE / 엣지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
주석:DOCTYPE가 지정되어 있다면, IE8는 outline 속성을 지원합니다.
