반응형
색상은 미리 정의된 색상 이름 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정할 수 있다.
CSS 색상이름
CSS에서 색상은 미리 정의된 색상 이름을 사용하여 지정할 수 있다:
아래 코드는 색상이름을 활용한 예제이다. 이름을 익힐겸 실습하기를 추천합니다.
| <!DOCTYPE html> <html> <body> <h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:Orange;">Orange</h1> <h1 style="background-color:DodgerBlue;">DodgerBlue</h1> <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1> <h1 style="background-color:Gray;">Gray</h1> <h1 style="background-color:SlateBlue;">SlateBlue</h1> <h1 style="background-color:Violet;">Violet</h1> <h1 style="background-color:LightGray;">LightGray</h1> </body> </html> |
실행 결과는 아래 그림과 같다.
CSS 배경색상(CSS Background Colors)
HTML 요소의 배경색을 설정할 수 있다:
| <!DOCTYPE html> <html> <body> <h1 style="background-color:DodgerBlue;">애국가</h1> <p style="background-color:Tomato;"> 동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 </p> </body> </html> |
위의 코드 실행 결과가 아래 그림이다.
CSS 글자색상(CSS Text Colors)
CSS에서 글자색상 활용 예제이다.
| <!DOCTYPE html> <html> <body> <h1 style="color:DodgerBlue;">애국가</h1> <p style="color:Tomato;"> 동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 </p> </body> </html> |
위의 코드를 실행한 결과가 아래 그림이다.
CSS 테두리 색상(CSS Border Colors)
| <!DOCTYPE html> <html> <body> <h1 style="border: 2px solid Tomato;">Hello World</h1> <h1 style="border: 2px solid DodgerBlue;">Hello World</h1> <h1 style="border: 2px solid Violet;">Hello World</h1> </body> </html> |
위의 코드를 실행한 결과가 아래 그림이다.
CSS 색상값(CSS Color Values)
CSS에서는 RGB 값, HEX 값, HSL 값, RGBA 값, HSLA 값을 사용하여 색상을 지정할 수도 있다:
아래 그림 색상값은 "토마토" 색상이름과 같은 값을 여러 형태로 표시해보았다.
같은 토마토 색상에 투명도를 50% 설정한 값은 아래 그림과 같다.
| <!DOCTYPE html> <html> <body> <p>Same as color name "Tomato":</p> <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1> <h1 style="background-color:#ff6347;">#ff6347</h1> <h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1> <p>Same as color name "Tomato", but 50% transparent:</p> <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1> <p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p> </body> </html> |
위의 코드는 색상값을 활용한 예제이다. 결과는 아래 그림과 같다.
지금까지 CSS 색상에 대해서 살펴보았다.
꼭 실습하시기를 추천합니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > CSS문법' 카테고리의 다른 글
| CSS HEX Colors (0) | 2023.07.04 |
|---|---|
| CSS RGB색상(CSS RGB Colors) (0) | 2023.07.03 |
| CSS 주석(CSS Comments) (0) | 2023.07.01 |
| CSS 추가하는 방법 (0) | 2023.06.30 |
| CSS 선택기(selector) (0) | 2023.06.29 |
댓글