[css] outline 속성, 용도는?

 

 

[css] outline 속성, 용도는?

 

오늘 배울 outline 속성은 border 속성과 비슷합니다.

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

 

boder를 테두리라고 한다면 outline은 border 바깥 외곽선을 말 합니다.

 

outline 속성의 용도는 요소를 두드러져 보이게 만들고자 할 때 사용 합니다.

 

주로, 레이아웃을 완성한 후에 문제점을 보기 위해 요소를 눈에 띄게 표시할 수 있는데요

 

border 선을 표시한다면, border 너비가 레이아웃에 관여하기 때문에

 

레이아웃이 흐트러질 수 있습니다.

 

하지만 outline 선의 너비는 레이아웃에 관여하지 않고, 눈에만 선이 보입니다.

 

 

 outline 속성 사용 법

 

outline 속성을 사용 하면, 외곽선 색상, 모양, 너비를 한꺼번에 지정할 수 있습니다.

 

outlne-color(색상), outline-style(모양), outline-width(너비) 속성으로 각각 지정할 수도 있습니다.

 

하지만, outline-style을 항상 필수로 지정합니다. 선이 있어야, 색상이나 너비를 지정할 수 있기 때문

 

또한,  ie8에서, doctype 선언해야 정상 작동합니다.

 

 DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)

 

 

 

▶outline 속성 사용 예:

#side_left {outline: red solid 5px;}

 

▶outline-style 속성 사용 예:

#side_left {outline-style: dashed;}

 

▶outline-color 속성 사용 예:

 

#side_left {

outline-color: red;

outline-style: dashed;}

 

 

 

  자세히 알아보기

 

 

outline 속성

 

속성값 =>  

 

아래에 나오는 outline-color, outline-style, outline-width 속성값들을 참조하여 적음.

순서는, outlne-color, outline-style, outline-width 순임.

 

outline-style은 필수 지정.

 

기본값 : invert none medium

 

 

outline-color 속성

 

: 외곽선 색상을 지정

 

속성값 =>  outline-color: invert|color|initial|inherit;

 

invert: 색상 반전

color: 칼라 코드, rgb, 색상 이름 중에서 선택하여 적음

initial : 초기화

inherit : 상속

 

 

outline-style 속성

:외곽선 스타일을 지정.

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

 

 

 

outline-width 속성

 

: 외곽선 너비 지정.

 

outline-width: medium|thin|thick|length|initial|inherit;

 

lenght는 px, cm, em 등의 단위로 적음

 

  실제 사용 예:

 

비교적 화면 구성이 심플한 구글 사이트에서, div에 전부 outline: red solid 3px;를 지정해 보았습니다.

 

div로 된 부분은 모두 3px의 빨간색으로 표시가 되었습니다.

 

outline은 퇴화 태그를 속출하는 데도 유용합니다.

 

frameset, font, center{outline: red solid 3px;} 라고 지정하면,

 

html 문서에서 frameset, font, center 태그가 들어간 곳은 모두 빨간색으로 굵게 표시가 됩니다~

 

 

 

구글 사이트에서, div에 모두 외곽선을 표시함