outline
outline속성은 border 속상과 비슷하다.
boder를 테두리라고 한다면 outline은 border 바깥 외곽선을 말한다.
outline 속성의 용도는 요소를 강조하기 위해 사용한다.
outline 사용하기
outline 속성을 사용하면, 외곽선 색상, 모양 , 너비를 한꺼번에 지정할 수 있고
outline-color, outline-style, outline- widtht 속성으로 각각 지정할 수 있다.
하지만 outline-style은 항상 필수로 지정해야 한다.
선이 있어야, 색상이나 너비를 지정할 수 있기 때문이다.
outline은 border와 마찬가지로 외곽선 스타일을 지정할 수 있다.
outline-style 속성
- dotted : outline을 점선으로 설정한다.
- dashed : outline을 dotted보다 긴 점선으로 설정한다.
- solid : outline을 실선으로 설정한다.
- double : outline을 이중 실선으로 설정한다.
- groove : outline을 3차원적인 입체적인 선으로 설정하고 outline-olor 속성 값에 영향을 받는다.
- ridge : outline을 3차원적인 능선 효과가 있는 선으로 설정하고 outline-color 속성 값에 영향을 받는다.
- inset : 요소가 페이지에 박힌 것처럼 외곽선을 그리고 outline-color 속성 값에 영향을 받는다.
- outset : 요소가 페이지 밖으로 나온 것 처럼 그리고 outline-color 속성값에 영향을 받는다.
- none : outline을 없앤다.
- hidden : outline을 숨긴다.
토이 프로젝트를 진행하면서 css에 대해 많이 알아가는 것 같다.
토이프로젝트를 하면서 배우는 게 많은 만큼 어려운 것도 많고
디버깅에 소요되는 시간도 확실히 길어진 것 같다.
돌다리도 두들겨 건너봐야 하는 것처럼 정말 코딩은
확인 작업이 중요한 것 같다!
'html과 css' 카테고리의 다른 글
| TIL] ajax (0) | 2021.04.28 |
|---|---|
| TIL] ::before 과 ::after (0) | 2021.04.27 |
| TIL] css포지션(position) (0) | 2021.04.25 |
| TIL] input type과 box-sizing (0) | 2021.04.23 |
| TIL] innerHTML (0) | 2021.04.21 |