CSS outline-color 속성
outline-color 속성은 윤곽선의 색상을 설정하는 데 사용된다.
색상은 다음과 같이 설정할 수 있다:
- name - "빨간색"과 같은 색상 이름을 지정합니다
- HEX - "#ff0000"과 같은 16진수 값을 지정합니다
- RGB - "rgb(255,0,0)"와 같은 RGB 값을 지정합니다
- HSL - "hsl(0, 100%, 50%)"과 같은 HSL 값을 지정합니다
- invert - 색상 반전을 수행합니다(색상 배경에 관계없이 윤곽선을 볼 수 있음)
CSS outline-color name
| p.ex1 { border: 2px solid black; outline-style: solid; outline-color: red; } |
outline-color를 이름 red로 설정하는 예제는 다음과 같다.
| <!DOCTYPE html> <html> <head> <style> p.ex1 { border: 2px solid black; outline-style: solid; outline-color: red; } </style> </head> <body> <h2>outline-color 속성</h2> <p>The outline-color property out-line 색을 설정하는데 사용된다.</p> <p class="ex1">outline-color name 예제 : border(2px, solid, block), outline(solid, red)</p> </body> </html> |
border(2px, solid, block), outline(solid, red)으로 설정하였다. 결과 화면은 아래 그림과 같다.
아래 그림에서와 같이 테두리는 2px, 검정색이며 outline은 실선에 빨강색으로 표시된다.
CSS outline-color HEX
outline-color는 16진수 값(HEX)을 사용하여 지정할 수도 있다:
| <!DOCTYPE html> <html> <head> <style> p.ex1 { border: 2px solid black; outline-style: solid; outline-color: #ff0000; } </style> </head> <body> <h2>outline-color 속성</h2> <p>The outline-color property out-line 색을 설정하는데 사용된다.</p> <p class="ex1">outline-color name 예제 : border(2px, solid, block), outline(solid, red)</p> </body> </html> |
outline-color값을 16진수 #ff0000(빨강색)으로 설정하는 것을 볼 수 있다. 결과 화면은 아래 그림과 같다.
CSS outline-color RGB
outline-color는 rgb()을 사용하여 지정할 수도 있다:
| <!DOCTYPE html> <html> <head> <style> p.ex1 { border: 2px solid black; outline-style: solid; outline-color: rgb(255, 0, 0); /* red */ } </style> </head> <body> <h2>outline-color 속성</h2> <p>The outline-color property out-line 색을 설정하는데 사용된다.</p> <p class="ex1">outline-color name 예제 : border(2px, solid, block), outline(solid, red)</p> </body> </html> |
outline-color값을 rgb(255,0,0)으로 설정하는 것을 볼 수 있다. 결과 화면은 아래 그림과 같다.
CSS outline-color HSL
outline-color는 hsl()을 사용하여 지정할 수도 있다:
| <!DOCTYPE html> <html> <head> <style> p.ex1 { border: 2px solid black; outline-style: solid; outline-color: hsl(0, 100%, 50%); /* red */ } </style> </head> <body> <h2>outline-color 속성</h2> <p>The outline-color property out-line 색을 설정하는데 사용된다.</p> <p class="ex1">outline-color name 예제 : border(2px, solid, block), outline(solid, red)</p> </body> </html> |
outline-color값을 hsl(0, 100%, 50%)으로 설정하는 것을 볼 수 있다. 결과 화면은 아래 그림과 같다.
지금까지 CSS outline-color 에 name, 16진수, rgb, hsl 등의 값을 활용하여 아웃라인 색상을 설정하는 실습을 살펴보았다.
보는 것에 멈추지 말고 직접 손으로, 눈으로, 머리로 익히며 실습하기를 바랍니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS outline-offset (0) | 2023.07.27 |
|---|---|
| CSS outline 단축 속성 (0) | 2023.07.26 |
| CSS outline-width (0) | 2023.07.24 |
| CSS outline (0) | 2023.07.23 |
| CSS box model (0) | 2023.07.22 |
댓글