티스토리 뷰

티스토리 공부

css outline 속성 강좌

잉고래 2017.04.04 23:49

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속성에 대해 알아보았습니다.

신고

'티스토리 공부' 카테고리의 다른 글

css font 속성  (0) 2017.09.26
css text  (0) 2017.09.18
css outline 속성 강좌  (0) 2017.04.04
box model의 이해  (0) 2017.04.03
margin css order  (0) 2017.03.29
CSS Height와 Width  (0) 2017.03.28
댓글
댓글쓰기 폼
Total
7,105,916
Today
188
Yesterday
1,646
«   2017/11   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
글 보관함