outline

정의 및 사용

outline 은 요소 바깥 주위에 둘러지는 선이며 만약 요소에 border 가 적용되어 있다면 outline 은 그 바깥에 생성된다. outline-color, outline-style, outline-width 세 가지 속성의 축약 속성이며 {outline:solid #FF0000} 과 같이 style-color 또는 style-width 만 적어도 무방하다. 대신 어떤 값을 주던 style 속성은 반드시 선언해주어야 한다.

outline 은 요소의 면적에 포함되지 않으므로 요소의 width 와 height 속성에 outline 의 두께는 포함되지 않는다.

정의 및 사용
기본값 개별 속성값 참고
상속 no
버전 CSS2
자바스크립트 구문 object.style.outline=”#0000FF dotted thin”

브라우저 지원

IE6 지원 안함IE7 지원 안함IE8 지원IE9 지원IE10 지원Chrome 지원Firefox 지원Opera 지원Safari 지원

모든 주요 브라우저에서 지원

구문

속성 값 설명
설명
outline-width 바깥 선의 너비(굵기)를 지정
outline-style 바깥 선의 스타일을 지정
outline-color 바깥 선의 색상을 지정
inherit 지정 요소의 바깥 선 속성을 부모(상위) 요소로부터 상속받음

예제

버그 및 이슈

  • IE에서는 올바른 문서선언(!DOCTYPE)이 선언되어야 제대로 표현된다.
  • outline은 요소의 영역을 차지하는 부분이 아니기 때문에 어떤 요소에 outline을 주더라도 width와 height에는 영향 받지 않는다.

목록 으로

댓글