css outline 속성 강좌

outline 속성

outline은 한글로 하면 윤곽선, 외곽선인데요. css에서 outline 속성은 요소 바깥 외곽선의 스타일, 색상, 폭을 정할때 사용합니다. 이 말이 무슨말이냐면 요소를 "눈에 띄게" 만들기 위해 테두리 주위에 그려진 선이 바로 윤곽선입니다. 요소(element)를 도드라져 보이게 만드는거죠.

어떻게 보면 border 속성하고 비슷해 보이기도 하지만 border 속성과 다른 큰 특징을 갖습니다. 바로 요소의 일부가 아니라는 점입니다. 이 말은 outline의 폭을 조절해도 요소의 전체 크기에 영향을 주지 않습니다. 또 outline의 폭이 요소 바깥으로 넘어갈 수도 있다는 뜻이죠. 하지만 border는 해당 속성의 너비와 높이가 요소 전체 크기에 포함을 주어 영향을 줍니다.

outline 속성들

• outline-style : 외곽선의 스타일을 설정합니다.
• outline-color : 외곽선의 색상을 설정합니다.
• outline-offset : outline-offset 속성은 외곽선과 요소의 가장자리 또는 border 사이에 공백을 추가합니다.
• outline-width : 외곽선의 폭을 설정합니다.
• outline : 하나의 선언으로 모든 외곽선의 속성들을 설정합니다.

outline-style

border 속성처럼 outline-style: solid; 처럼 사용해서 외곽선의 선 스타일을 지정합니다.

• {outline-style: dotted;}
• {outline-style: dashed;}
• {outline-style: solid;}
• {outline-style: double;}
• {outline-style: groove;}
• {outline-style: ridge;}
• {outline-style: inset;}
• {outline-style: outset;}

outline-color

외곽선의 색상을 설정합니다. 다른 속성들의 색상 지정과 똑같습니다. "red"와 같은 컬러이름이나 rgb(255,0,0)와 같은 rgb값, #ff0000과 같은 hex값 마지막으로 색상 배경에 관계없이 외곽선을 볼 수 있는 invert 값이 있습니다. {outline-color: red;}

outline-offset

요소와의 사이에 공백을 추가할 때 사용합니다. {outline-offset: 15px;}

outline-width

{outline-width: 3px;}과 같이 외곽선 폭을 지정합니다.

outline

{outline: 5px dotted red;} 처럼 외곽선 속성을 모두 설정하고 싶을 때 사용합니다. 여기까지 outline속성에 대해 알아보았습니다.