[2021.07.26] 인턴 +147 HTML Comment Tags & HTML Colors(Colors, RGB, HEX, HSL) - 5
HTML Comment Tags
<!-- 주석(Comment)를 할 text를 여기에 입력
* 즉 HTML5 에서 주석을 사용하려면 <!-- -->
* HTML Colors 에는 총 4가지(Colors, RGB, HEX, HSL) 종류가 있다.
----------------------------------------------------------------------------------------------------------------------
우선, HTML Colors(Colors)에 대해서 알아보도록 하자.
배경색 색상 종류들
<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>
<!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>
<실행 결과>
----------------------------------------------------------------------------------------------------------------------
배경색(Background Color)
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<실행 결과>
----------------------------------------------------------------------------------------------------------------------
텍스트 색상(Text Colors)
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<실행 결과>
----------------------------------------------------------------------------------------------------------------------
테두리 색상(Border Color)
<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>
<실행 결과>
---------------------------------------------------------------------------------------------------------------------------------색상 값 (Color Values)
* <div> 요소에서 RGB, HEX, HSL 값으로 설정 가능함
-> ... 은 text
<h1 style="background-color:rgb(255, 99, 71);"> ... </h1>
<h1 style="background-color:#ff6347;"> ... </h1>
<h1 style="background-color:hsl(9, 100%, 64%);"> ... </h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);"> ... </h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);"> ... </h1>
<실행 결과>
------------------------------------------------------------------------------------------------------------------------
* 140 가지의 칼라 색상 (link)
https://www.w3schools.com/colors/colors_names.asp
HTML Color Names
HTML Color Names Color Names Supported by All Browsers All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors): Click here to see the 140
www.w3schools.com
https://www.w3schools.com/colors/colors_hex.asp
HTML Color Values
HTML Color Values Named Colors Sorted by HEX Value Click here to see the colors sorted by name
www.w3schools.com
-> 위의 링크로 test를 해보자
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#FF1493;">도끼 장인</h1>
<h1 style="background-color:#87CEFA;">드레이븐</h1>
<h1 style="background-color:#FFA07A;">Now02</h1>
</body>
</html>
<실행 결과>
------------------------------------------------------------------------------------------------------------------------
그다음, HTML Colors(RGB)에 대해서 알아보도록 하자.
<h1 style="background-color:rgb(red, green, blue);"> ... </h1>
위와 같은 형태로 쓰면되는데, 느끼지만 RGB 보단, 위의 칼라 링크에 들어가서 원하는 칼라 값을 넣는 방법이 더 쉬운 거 같다.
----------------------------------------------------------------------------------------------------------------------------
자 그다음으론, HTML Colors(HEX)에 대해서 알아 보자.
<h1 style="background-color:#FFA07A;">Now02</h1>
내가 위에서 언급한 것처럼, 나는 HEX 방법으로 쓰는 것이 편하다.
자신의 입맛에 맞는 방식으로 쓰면 좋을 꺼 같다.
----------------------------------------------------------------------------------------------------------------------------
마지막으론 , HTML Colors(HSL)에 대해서 알아 보자.
<h1 style="background-color:hsl(9, 100%, 64%);"> ... </h1>
'Web' 카테고리의 다른 글
| [2021.07.27] 인턴 +148 HTML Link - 7 (1) | 2021.07.27 |
|---|---|
| [2021.07.27] 인턴 +148 HTML Styles(CSS) - 6 (0) | 2021.07.27 |
| [2021.07.26] 인턴 +147 HTML5 Quotation and Elements(인용 및 요소들) - 4 (0) | 2021.07.26 |
| [2021.07.26] 인턴 +147 HTML5 HTML Text Formatting -3 (0) | 2021.07.26 |
| [2021.07.26] 인턴 +147 HTML5 스타일 문법 (HTML5 Style Grammar) - 2 (0) | 2021.07.26 |
댓글