웹1.0/CSS, CSS2
css outline 속성, 포커스선
커드만
2016. 2. 15. 17:30
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 속성을 이용하여 수정할 수 있습니다.