반응형
CSS outline - 단축 속성
outline 속성은 다음과 같은 개별 outline 속성을 설정하기 위한 단축 속성입니다:
- outline-width
- outline-style (required)
- outline-color
outline 속성은 위 목록에서 하나, 둘 또는 세 개의 값으로 지정된다. 값의 순서는 중요하지 않다.
다음 예제에서는 단축 개요 속성으로 지정된 몇 가지 개요를 보여 줍니다:
CSS outline - 1개 값
| <!DOCTYPE html> <html> <head> <style> p.ex1 {outline: dashed;} </style> </head> <body> <h2>outline 속성</h2> <p class="ex1">outline 단축속성-1개의값. - 파선</p> </body> </html> |
outline 속성에 dashed 값을 설정하여 아웃라인에 파선을 설정한다. 결과 화면은 아래 그림과 같다.
CSS outline - 2개 값
| <!DOCTYPE html> <html> <head> <style> p.ex2 {outline: dotted red;} </style> </head> <body> <h2>outline 속성</h2> <p class="ex2">outline 단축속성-2개의값. - 점선, 빨강색.</p> </body> </html> |
outline 속성에 dotted red 값을 설정하여 아웃라인에 점선과 빨강색을 설정한다. 결과 화면은 아래 그림과 같다.
CSS outline - 3개 값
| <!DOCTYPE html> <html> <head> <style> p.ex3 {outline: 5px solid yellow;} </style> </head> <body> <h2>outline 속성</h2> <p class="ex3">outline 단축속성-3개의값. - 5px 실선, 노랑색.</p> </body> </html> |
outline 속성에 5px solid yellow 값을 설정하여 아웃라인에 5px 실선과 노랑색을 설정한다. 결과 화면은 아래 그림과 같다.
지금까지 CSS outline 단축 속성의 활용 예제에 대해 살펴보았다.
실습을 손으로, 눈으로, 머리로, 꼭 하시기를 추천합니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > CSS문법' 카테고리의 다른 글
| CSS 텍스트(text) (0) | 2023.07.28 |
|---|---|
| CSS outline-offset (0) | 2023.07.27 |
| CSS outline-color (0) | 2023.07.25 |
| CSS outline-width (0) | 2023.07.24 |
| CSS outline (0) | 2023.07.23 |
댓글