css outline 속성, 포커스선

CSS의 outline 속성은 border 속성과 비슷한 방식으로 작성할 수 있습니다.

outline은 border의 바깥 외곽선을 말하며 어느 부분을 두드러지게 보이기 위해 사용합니다.

border와의 또다른 차이점은 border는 레이아웃의 넓이에 영향을 주고 구조가 흐트러질 수 있지만 outline은 레이아웃 구조에 관여되지 않습니다.

한번에 작성하는 예는 아래와 같습니다.

outline:2px solid #000;

outline 속성을 세분화하여 css를 나열한다면 아래와 같은 속성들을 사용할 수 있습니다.

위에서 속성값들은 아래와 같은 값을 나타내고 있습니다.

outline-color = #000

ex) outline-color:#000;

outline-style =solid

ex) outline-style:solid;

outline-width =2px

ex) outline-width:2px;

대부분 outline의 나타나는 현상은 키보드 탭(Tab)으로 이동시 발생할 수 있는데 기본 제공되는 outline 색이나 크기가 안보인다면 outline 속성을 이용하여 수정할 수 있습니다.