TIL] outline

outline

outline속성은 border 속상과 비슷하다.

boder를 테두리라고 한다면 outline은 border 바깥 외곽선을 말한다.

outline 속성의 용도는 요소를 강조하기 위해 사용한다.

---

outline 사용하기

outline 속성을 사용하면, 외곽선 색상, 모양 , 너비를 한꺼번에 지정할 수 있고

outline-color, outline-style, outline- widtht 속성으로 각각 지정할 수 있다.

하지만 outline-style은 항상 필수로 지정해야 한다.

선이 있어야, 색상이나 너비를 지정할 수 있기 때문이다.

outline은 border와 마찬가지로 외곽선 스타일을 지정할 수 있다.

---

outline-style 속성

1. dotted : outline을 점선으로 설정한다.
2. dashed : outline을 dotted보다 긴 점선으로 설정한다.
3. solid : outline을 실선으로 설정한다.
4. double : outline을 이중 실선으로 설정한다.
5. groove : outline을 3차원적인 입체적인 선으로 설정하고 outline-olor 속성 값에 영향을 받는다.
6. ridge : outline을 3차원적인 능선 효과가 있는 선으로 설정하고 outline-color 속성 값에 영향을 받는다.
7. inset : 요소가 페이지에 박힌 것처럼 외곽선을 그리고 outline-color 속성 값에 영향을 받는다.
8. outset : 요소가 페이지 밖으로 나온 것 처럼 그리고 outline-color 속성값에 영향을 받는다.
9. none : outline을 없앤다.
10. hidden : outline을 숨긴다.

---

토이 프로젝트를 진행하면서 css에 대해 많이 알아가는 것 같다.

토이프로젝트를 하면서 배우는 게 많은 만큼 어려운 것도 많고

디버깅에 소요되는 시간도 확실히 길어진 것 같다.

돌다리도 두들겨 건너봐야 하는 것처럼 정말 코딩은

확인 작업이 중요한 것 같다!