반응형
HTML 색상은 미리 정의된 색상 이름 또는 RGB, HEX, HSL, RGBA 또는 HSLA 값으로 지정된다.
색상이름
HTML에서 색상 이름을 사용하여 색상을 지정할 수 있습니다:
배경색(Background Color)
| <!DOCTYPE html> <html> <body> <h1 style="background-color:DodgerBlue;">날아라 HTML</h1> <p style="background-color:Tomato;"> 날아라 HTML은 HTML로 인터넷 세상을 만들고 사람들에게 인터넷을 마음껏 날아다니기를 바라는 마음으로 제작하고 있습니다. </p> </body> </html> |
글자 색상(Text Color)
HTML에서는 글자색을 설정할 수 있다.
| <!DOCTYPE html> <html> <body> <h3 style="color:Tomato;">날아라 HTML</h3> <p style="color:DodgerBlue;">날아라 HTML은 HTML로 인터넷 세상을 만들고 사람들에게 인터넷을 마음껏 날아다니기를 바라는 마음으로 제작하고 있습니다..</p> <p style="color:MediumSeaGreen;">날아라 HTML은 HTML로 인터넷 세상을 만들고 사람들에게 인터넷을 마음껏 날아다니기를 바라는 마음으로 제작하고 있습니다..</p> </body> </html> |
윤곽선 색상
윤관선 색을 설정할 수 있다.:
| <!DOCTYPE html> <html> <body> <h1 style="border: 2px solid Tomato;">날아라 HTML</h1> <h1 style="border: 2px solid DodgerBlue;">날아라 HTML</h1> <h1 style="border: 2px solid Violet;">날아라 HTML</h1> </body> </html> |
HTML 색상 값
HTML에서는 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수도 있다.
다음 세 가지 <div> 요소의 배경색은 RGB, HEX 및 HSL 값으로 설정된다:
다음 두 개의 <div> 요소는 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> |
마무리
이번 글에서는 HTML 색상에 대해 학습해보았다. HTML 문서 작성에서 글자색, 배경색, 윤관선색 및 투명도 관련해서 살펴보았다.
눈으로만 보지 말고, 직접 하나씩 실습해보면 HTML 문법에 익숙해져가는 자신의 모습을 발견할 것입니다.
모두 화이팅입니다!!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML HEX 색상 (0) | 2023.04.23 |
|---|---|
| HTML RGB와 RGBA 색상 (0) | 2023.04.22 |
| HTML 주석(Comments) (0) | 2023.04.20 |
| HTML 인용(Quotation)과 인용요소(Citation Elements) (0) | 2023.04.19 |
| HTML 글자 형식(HTML Text Formatting) (0) | 2023.04.17 |
댓글