CSS 외곽선속성(Outline Property)

CSS 속성중에 테두리를 결정하는 border 속성보다 더 외곽에 위치하고 있는 outline 속성에 대하여 알아봅니다.

outline

축약 속성이며, 테두리와 유사하지만 공간을 차지하지 않으며, 사각형이 아닐 수도 있다.

p {outline: #00FF00 dotted thick;}

• outline-color, outline-style, outline-width 순서로 속성값을 작성한다.
• 생략된 값이 있을 경우 기본값이 적용된다.

속성값

• outline-color : outline의 색상을 지정한다.
• outline-style : outline의 스타일을 지정한다.
• outline-width : outline의 너비를 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.outline="#0000FF dotted thin"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

IE8은 !DOCTYPE이 지정되어 있어야만 outline 속성을 지원한다.

outline-color

외곽선의 색상을 지정한다.

p {
  outline-style: dotted;
  outline-color: #00ff00;
}

outline-color 속성을 사용하기전에 outline-style 속성이 선언되어야 한다.

속성값

• color : css 컬러 값을 지정한다.
• invert : 색을 반전시킨다. 기본값이다.
• inherit : 부모 요소로부터 값을 상속 받는다.

outline-color 데모 보기

자바스크립트 문법

object.style.outlineColor="#00FF00"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

IE8은 !DOCTYPE이 지정되어 있어야만 outline-color 속성을 지원한다.

outline-offset

CSS3에 추가된 속성으로 기본값은 0이며, 테두리의 가장 자리와 외곽선 사이의 여백을 지정한다.

div {
  border: 2px solid black;
  outline: 2px solid red;
  outline-offset: 15px;
}

속성값

• length(길이) : 테두리의 가장자리에서부터 외곽선 사이의 여백을 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.outlineOffset="15px"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	지원	지원	지원	지원

outline-width

외곽선의 너비를 지정한다.

p {
  outline-style: dotted;
  outline-width: 5px;
}

outline-width 속성이 사용되기 전에 outline-style 속성이 선언되어야 한다.

속성값

• thin, medium, thick : 아래의 예제를 참고한다.
• length(길이) : 외곽선의 두께를 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

outline-width 데모 보기

자바스크립트 문법

object.style.outlineWidth="thin"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

IE8은 !DOCTYPE이 지정되어 있어야만 outline-style 속성을 지원한다.