outline 속성은 일반적인 border 속성과 다르게 공간을 차지하지 않습니다.
그래서 두께를 아무리 크게 늘리더라도 전체적인 레이아웃에 영향을 주지 않습니다.
우리가 접근성을 위해 브라우저에서 Tab 키를 누르면 링크나 버튼영역에 생기는 띠나 도트라인도
다 브라우저에서 기본으로 제공되는 outline 속성입니다. 이는 기본적으로 브라우저 자체에서 제공되는 부분이므로
변경을 위해서는 outline 속성을 이용하여 변경해야 한다는 것을 알고 넘어 갔으면 합니다. ^^
그럼 간단하지만 쉽게 지나칠 수 있는 outline 속성에 대한 부분을 설명 하겠습니다.
1. outline 속성 분류
- outline-style : dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
- outline-color : 색상값
- outline-width : px, em 등...
- outline-offset : 아웃라인의 오프셋 거리, 음수 지정 가능. (CSS3 기술)
2. outline 속성 속기형
기본적으로 border 속기형 처럼 작성 합니다.
outline:1px solid #000;
3. 지원 브라우저
Internet Explorer |
Firefox |
safari |
chrome |
opera |
지원 |
지원 |
지원 |
지원 |
지원 |
