Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
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
31
Archives
Today
Total
관리 메뉴

web sprit

css outline 속성, 포커스선 본문

웹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 속성을 이용하여 수정할 수 있습니다.

Comments