HTML - 색상

웹 개발의 열망하는 분들 환영합니다! 오늘 우리는 HTML 색상의 다채로운 세상으로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 화려한 여정을 안내해 드리는 것을 기대하고 있습니다. 이 튜토리얼의 끝까지 따라오시면, 디지털 피카소의 자신감으로 웹을 그릴 수 있을 것입니다!

HTML - Colors

HTML 색상 코드 방법

우리가 웹 페이지에 색상을 뿌리기 전에, HTML에서 색상을 어떻게 표현할 수 있는지 이해해 보겠습니다. 색상을 지정하는 여러 가지 방법이 있으며, 각각의 매력이 있습니다. 하나씩 살펴보겠습니다:

색상 이름
16진수 값
RGB 값
RGBA 값
HSL 값
HSLA 값

다음은 이 방법들을 요약한 유용한 표입니다:

방법	예시	설명
색상 이름	`red`	사전 정의된 색상 이름
16진수	`#FF0000`	RGB 값을 나타내는 6자리 코드
RGB	`rgb(255, 0, 0)`	적, 녹, 청 값 (0-255)
RGBA	`rgba(255, 0, 0, 0.5)`	RGB에 알파 (투명도) 값
HSL	`hsl(0, 100%, 50%)`	색상, 채도, 밝기
HSLA	`hsla(0, 100%, 50%, 0.5)`	HSL에 알파 값

이제 이게 알파벳 스튜프 Looks like alphabet soup right now. 단계별로 설명해 드리겠습니다!

텍스트 색상 설정

간단한 것부터 시작해 보겠습니다: 텍스트 색상을 변경하는 방법입니다. 이를 위해 CSS의 color 속성을 사용합니다. 다음은 예시입니다:

<p style="color: blue;">이 텍스트는 파란색입니다!</p>

이 예제에서 우리는 인라인 스타일을 사용하여 색상을 설정하고 있습니다. style 속성을 통해 HTML 요소에 직접 CSS를 추가할 수 있습니다. color: blue; 부분은 브라우저에게 이 텍스트를 파란색으로 렌더링하도록 지시합니다.

하지만 특정 색상을 사용하고 싶다면, 다른 색상 코드 방법을 사용할 수 있습니다:

<p style="color: #0000FF;">이 것도 파란색입니다, 16진 코드를 사용하여!</p>
<p style="color: rgb(0, 0, 255);">이것은 RGB 값을 사용한 파란색입니다!</p>

이 두 가지 모두 첫 번째 예제와 같은 파란색을 생성합니다. 16진 코드 #0000FF와 RGB 값 rgb(0, 0, 255) 모두 순수한 파란색을 나타냅니다.

배경 색상 설정

이제 우리의 페이지에 살기를 더해 보겠습니다. 배경 색상을 설정하는 데 사용되는 background-color 속성입니다:

<div style="background-color: yellow; padding: 10px;">
이 div는 노란 배경색을 가집니다!
</div>

이 예제에서 우리는 div 요소의 배경색을 노란색으로 설정하고 있습니다. padding: 10px;은 텍스트에 공간을 주기 위함입니다.

알파 채도를 사용한 RGBA를 사용할 수 있는 경우도 있습니다:

<div style="background-color: rgba(255, 255, 0, 0.5); padding: 10px;">
이 div는 반투명한 노란 배경색을 가집니다!
</div>

rgba(255, 255, 0, 0.5)의 끝에 있는 0.5는 투명도를 50%로 설정하여 반투명 효과를 줍니다.

테두리 색상 설정

우리의 작업을 아름다운 테두리로 둘러싸보겠습니다:

<div style="border: 2px solid green; padding: 10px;">
이 div는 초록 테두리를 가집니다!
</div>

여기서 우리는 border 속성을 사용하여 div 요소 주위에 2픽셀 두께의 실선 초록 테두리를 생성하고 있습니다.

테두리의 각 쪽에 다른 색상을 사용할 수도 있습니다:

<div style="border-top: 2px solid red;
border-right: 2px solid green;
border-bottom: 2px solid blue;
border-left: 2px solid yellow;
padding: 10px;">
이 div는 각 테두리에 다른 색상을 가집니다!
</div>

HTML 색상 - 색상 이름

HTML은 사용할 수 있는 사전 정의된 색상 이름을 제공합니다. 이 것들은 프로토타입 작성이나 빠른 색상 선택에 매우 유용합니다.

<p style="color: tomato;">이 텍스트는 토마토색입니다!</p>
<p style="color: skyblue;">이 텍스트는 하늘색입니다!</p>
<p style="color: mediumseagreen;">이 텍스트는 중간 바다 푸른색입니다!</p>

W3C 표준 16 색상

W3C(세계 광범위 정보 통신망 협의회)는 모든 브라우저에서 지원되는 16개의 표준 색상을 정의했습니다. 이들은 다음과 같습니다:

Black
Silver
Gray
White
Maroon
Red
Purple
Fuchsia
Green
Lime
Olive
Yellow
Navy
Blue
Teal
Aqua

다음은 간단한 시연입니다:

<table>
<tr>
<td style="background-color: black; color: white;">Black</td>
<td style="background-color: silver;">Silver</td>
<td style="background-color: gray;">Gray</td>
<td style="background-color: white;">White</td>
</tr>
<tr>
<td style="background-color: maroon; color: white;">Maroon</td>
<td style="background-color: red;">Red</td>
<td style="background-color: purple; color: white;">Purple</td>
<td style="background-color: fuchsia;">Fuchsia</td>
</tr>
<tr>
<td style="background-color: green; color: white;">Green</td>
<td style="background-color: lime;">Lime</td>
<td style="background-color: olive;">Olive</td>
<td style="background-color: yellow;">Yellow</td>
</tr>
<tr>
<td style="background-color: navy; color: white;">Navy</td>
<td style="background-color: blue; color: white;">Blue</td>
<td style="background-color: teal; color: white;">Teal</td>
<td style="background-color: aqua;">Aqua</td>
</tr>
</table>

배경 색상 설정 - 색상 이름 사용

이미 배경 색상을 설정하는 방법을 보았지만, 색상 이름을 사용하여 다시 강조해 보겠습니다:

<div style="background-color: lavender; padding: 10px; margin: 5px;"> lavander 배경</div>
<div style="background-color: mistyrose; padding: 10px; margin: 5px;"> misty rose 배경</div>
<div style="background-color: honeydew; padding: 10px; margin: 5px;"> honeydew 배경</div>

이 부드럽고 연한 색상들은 웹 페이지에 안정적인 효과를 줄 수 있습니다. 색상 선택은 사이트의 분위기와 가독성에 큰 영향을 미칩니다!

브라우저 안전 색상

웹의 초기 시절에는 "브라우저 안전" 색상 - 다양한 브라우저와 운영 체제에서 일관되게 표시되는 216개의 색상 팔레트에 대해 고려해야 했습니다. 현대 디스플레이에서는 이 문제가 덜 중요하지만, 과거와의 호환성이나 구형 시스템 설계 시에는 여전히 유용할 수 있습니다.

다음은 브라우저 안전 색상의 작은 샘플입니다:

<div style="background-color: #FF0000; color: white; padding: 5px; margin: 2px;">Red (#FF0000)</div>
<div style="background-color: #00FF00; padding: 5px; margin: 2px;">Green (#00FF00)</div>
<div style="background-color: #0000FF; color: white; padding: 5px; margin: 2px;">Blue (#0000FF)</div>
<div style="background-color: #FFFF00; padding: 5px; margin: 2px;">Yellow (#FFFF00)</div>
<div style="background-color: #00FFFF; padding: 5px; margin: 2px;">Cyan (#00FFFF)</div>
<div style="background-color: #FF00FF; padding: 5px; margin: 2px;">Magenta (#FF00FF)</div>

이제 여러분은 웹 페이지에 색상을 더하는 지식을 갖추셨습니다. 위대한 색상을 가지고 있지만, 그 책임감도 있습니다 - 시각적으로 매력적이고 접근성 있는 웹 사이트를 만들기 위해 새로운 힘을 사용하십시오.

마무리하며, 여러분에게 웹 개발자의 재미있는 이야기를 들려드리겠습니다: 왜 웹 개발자들이 다크 모드를 좋아할까요? 그 이유는 밝은 색상이 벌레를引来하기 때문입니다!

색상을 실험하고, 창의적으로 만들어 보세요. 행복한 코딩을 기원하며, 여러분의 웹 페이지가 항상 아름답게 색이 가득 차기를 바랍니다!

Credits: Image by storyset