outline 속성

outline 은 border 처럼 테두리를 표시하는 속성입니다. 
IE의 경우는 8부터 지원하지만 처럼 표준 웹이 되어야 사용할 수 있죠. 
이녀석의 특징은 간단합니다. 일단 테두리를 표시합니다. 
outline:white solid thick; 
 

border 로 테두리가 표시되쪄

outline 으로 테두리가 표시되쪄

네. 그렇다면 border 와 다를 게 없는데 outline 이 대체 무슨 특징이 있냐고 하신다면 지금부터 소개해 드리도록 하겠습니다. 

- 레이아웃에 영향을 받지 않습니다. 레이아웃 크기에 영향을 주는 border 에 비해 이녀석은 레이아웃 변경 없이 테두리를 입히게 됩니다. 

이게 다입니다. 나머진 border 와 설정법이 같습니다. 
하지만 이녀석은 border 에 비해 불편한 점도 있습니다. 

바로 이녀석은 부분 적용이 안된다는 것이죠. 

자. 설명은 끝났습니다. 그러면 왜 팁텍에 이 글을 올렸나? 

크롬 사용하시는 분들 포커스 가능한 입력란 등에 파란 테두리를 보실 겁니다. 
그게 바로 outline 적용된 겁니다. 그게 다입니다. 

하지만 그 outline 을 없애고자 하는 분들이 있을 겁니다. 간단합니다. 모든 포커스 가능한 요소에 outline 을 안주면 됩니다. 

*:focus{ 
outline:0; 
} 

그러면 입력창 등이 활성화 되도 테두리는 표시되지 않습니다. 
하지만 어디를 가리킬 것인지 불분명해서 사용자 측면에서는 불편할 수 있습니다. 
그래서 링크 #1 을 가보시면 일종의 캠페인이 있습니다. outline:0 쓰지 말라구요. 

대신, 원하는 방향으로 대체를 할 수는 있습니다. outline 을 바꾸거나, background-color 를 바꾸는 등의 일도 할 수 있습니다. :focus 가상 선택자로요. 

그리고 outline 의 또하나의 특징은, 기본 버튼이나 입력양식의 스타일을 변경시키지 않는다는 겁니다. 
border 나 background 속성을 주면 입력란이나 버튼은 촌스러운 스타일로 변경됩니다. 
물론 다른 스타일로 변경하면 되지만, 둘 중 하나만 줘도 기본 스타일이 사라진다는 특징을 알아두시면 됩니다. 


 기본 버튼 


 border 만 준 버튼 


 background 만 준 버튼 


 둘 다 준 버튼 


 outline 만 준 버튼 


여기서는 사이트 내 스타일시트 때문에 올바르게 보이지 않을 수 있으니 링크 #2를 보면 정확한 예제 결과를 볼 수 있습니다. 
이것으로 팁을 마치겠습니다. 
끝.