HTML Colors.
HTML 색상은 미리 정의된 색상 이름 또는 RGB, HEX, HSL, RGBA 또는 HSLA 값으로 지정됩니다.
색상 이름
HTML에서는 색상 이름을 사용하여 색상을 지정할 수 있습니다.
약 140개의 표준 색상 이름을 지원합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 200px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 16px;
font-weight: bold;
color: white;
}
.tomato { background-color: tomato; }
.orange { background-color: orange; }
.dodgerblue { background-color: dodgerblue; }
.mediumseagreen { background-color: mediumseagreen; }
.gray { background-color: gray; }
.slateblue { background-color: slateblue; }
.violet { background-color: violet; }
.lightgray { background-color: lightgray; }
</style>
</head>
<body>
<div class="box tomato">Tomato</div>
<div class="box orange">Orange</div>
<div class="box dodgerblue">DodgerBlue</div>
<div class="box mediumseagreen">MediumSeaGreen</div>
<div class="box gray">Gray</div>
<div class="box slateblue">SlateBlue</div>
<div class="box violet">Violet</div>
<div class="box lightgray">LightGray</div>
</body>
</html>
배경색.
인라인 스타일로 배경색을 설정할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Green;">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>
</body>
</html>Hello World
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.
텍스트 색상.
인라인 스타일로 텍스트 색상을 설정할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>Hello World
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.
테두리 색상.
인라인 스타일로 테두리 색상을 지정할 수 있습니다.
<!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>Hello World
Hello World
Hello World
색상 값.
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>Same as color name "Tomato":
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
Same as color name "Tomato", but 50% transparent:
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
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.
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 튜토리얼 - HTML Links & URL 구조 (0) | 2023.07.13 |
|---|---|
| HTML 튜토리얼 - CSS (0) | 2023.07.12 |
| HTML 튜토리얼 - HTML 텍스트 서식 / 인용문 / 인용 요소 (0) | 2023.07.07 |
| HTML 튜토리얼 - HTML Styles (0) | 2023.06.23 |
| HTML 튜토리얼 - HTML Basic Examples (0) | 2023.06.22 |