코딩스쿨

HTML Colors

1. HTML Colors란?

HTML Colors는 웹 페이지에서 텍스트, 배경, 테두리 등 다양한 요소에 색상을 적용하는 방법을 의미합니다. HTML에서는 CSS를 사용하여 색상을 정의하며, 색상은 여러 가지 형식으로 지정할 수 있습니다.

2. 색상을 지정하는 방법

2.1 색상 이름 (Color Names)

미리 정의된 140개의 색상 이름을 사용하여 색상을 지정할 수 있습니다.

<p style="color: red;">이 텍스트는 빨간색입니다.</p>
<p style="background-color: lightblue;">이 배경은 밝은 파란색입니다.</p>

2.2 HEX 코드 (Hexadecimal Colors)

HEX 코드는 16진수로 표현된 색상 코드로, # 뒤에 RGB 색상을 각각 두 자리 16진수로 표현합니다.

<p style="color: #FF0000;">이 텍스트는 빨간색입니다.</p>
<p style="background-color: #ADD8E6;">이 배경은 밝은 파란색입니다.</p>

2.3 RGB 및 RGBA (Red, Green, Blue)

RGB는 각각의 색상 성분인 빨강, 초록, 파랑을 0부터 255 사이의 숫자로 표현하는 방식입니다. RGBA는 여기에 투명도를 제어하는 알파(Alpha) 채널을 추가한 방식입니다.

<p style="color: #FF0000;">이 텍스트는 빨간색입니다.</p>
<p style="background-color: #ADD8E6;">이 배경은 밝은 파란색입니다.</p>

2.4 HSL 및 HSLA (Hue, Saturation, Lightness)

HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)로 색상을 정의하는 방식입니다. HSLA는 HSL에 투명도를 제어하는 알파(Alpha) 채널을 추가한 방식입니다.

<p style="color: hsl(0, 100%, 50%);">이 텍스트는 빨간색입니다.</p>
<p style="background-color: hsla(200, 100%, 80%, 0.5);">이 배경은 50% 투명한 밝은 파란색입니다.</p>

3. 자주 사용하는 색상

HTML에서는 여러 가지 색상 이름을 미리 정의하고 있습니다. 다음은 자주 사용되는 몇 가지 색상입니다.

<p style="color: red;">Red</p>
<p style="color: green;">Green</p>
<p style="color: blue;">Blue</p>
<p style="color: white; background-color: black;">White on Black</p>

4. 배경 색상 적용

HTML에서 배경 색상은 background-color 속성을 사용하여 설정할 수 있습니다. 텍스트뿐만 아니라 페이지 전체 또는 특정 영역의 배경에 색상을 적용할 수 있습니다.

<body style="background-color: lightgray;">
    <h1 style="background-color: yellow;">노란색 배경의 제목</h1>
    <p>이 텍스트는 밝은 회색 배경 위에 있습니다.</p>
</body>

5. 텍스트와 배경 색상의 조합

텍스트 색상과 배경 색상을 적절히 조합하는 것은 웹 디자인에서 매우 중요합니다. 색상 대비가 충분하지 않으면 텍스트가 읽기 어려워질 수 있습니다.

<p style="color: yellow; background-color: white;">이 텍스트는 가독성이 좋지 않습니다.</p>
<p style="color: black; background-color: white;">이 텍스트는 가독성이 좋습니다.</p>

6. 투명도와 색상

RGB 및 HSL 색상 시스템에서는 Alpha(알파) 채널을 추가하여 색상의 투명도를 설정할 수 있습니다.

<p style="background-color: rgba(0, 0, 255, 0.3);">이 배경은 30% 투명한 파란색입니다.</p>

7. 색상 선택 도구

색상을 선택할 때는 다양한 컬러 피커(Color Picker) 도구를 사용할 수 있습니다. 이러한 도구는 색상을 시각적으로 선택하고, 그에 대한 HEX, RGB, HSL 값을 제공하여 CSS 코드에 적용할 수 있습니다.

코딩 스쿨 HTML