웹 코딩은 다소 번거로운 작업이 될 수 있습니다. 원하는 결과에 도달하는 방법은 여러 가지가 있으며, 그중 일부는 다른 방법보다 더 효율적이거나 효과적일 수 있습니다. 게다가 어떤 해결책은 모든 환경에서 작동하지 않을 수도 있습니다. 좋은 웹사이트와 훌륭한 웹사이트의 차이는 접근 방식의 선택에 달려 있는데, 이는 HTML 색상 코딩에서 특히 두드러집니다. HTML 색상 속성을 코딩하는 일은 스트레스가 될 수 있으며, 어떤 방식으로 진행할지 고민하다 보면 머리가 아파질 수도 있습니다.
하지만 HTML 색상 속성 코딩이 반드시 어려운 작업일 필요는 없습니다. 이 가이드에서는 사이트의 HTML을 다듬고 다채로운 색상을 구현할 수 있는 네 가지 방법을 소개합니다. 간단한 지침만 따라 하면 웹사이트가 곧 매력적인 색조로 빛나며, 경쟁 사이트보다 한발 앞선 비즈니스 페이지를 완성할 수 있습니다.
1. HSL 값 사용하기
현대 브라우저는 색조(Hue), 채도(Saturation), 명도(Lightness)를 나타내는 HSL 값을 잘 지원합니다. 이 방식은 다른 방법만큼 자주 사용되지는 않지만 안정적으로 작동하고 구현하기도 쉽습니다. HSL 값을 지정하는 것은 빠르게 결과를 얻을 수 있는 옵션이기도 합니다.
HSL을 적용하려면 표준 style 속성을 사용하고, 유형을 "hsl"로 지정한 뒤 괄호 안에 값을 할당하면 됩니다.
<body style="background-color:hsl(0,0%,96%);">
</body>
알파 채널에 hsl을 전달하면 불투명도도 함께 제어할 수 있습니다. 접두사 "hsla"를 사용하고, 괄호 안에 0(투명)에서 1(불투명) 범위의 네 번째 값을 추가하세요.
<body style="background-color:hsla(0,0%,96%,0.8);">
</body>
2. RGB 값 활용하기
빨강(Red), 초록(Green), 파랑(Blue) 값을 사용해 HTML 배경색을 지정하는 방법은 HSL보다 더 널리 쓰입니다. RGB는 오래된 브라우저와 최신 브라우저 모두에서 작동하기 때문에, 폭넓은 사용자층을 대상으로 하는 사이트를 만들려는 개발자에게 특히 매력적인 선택지입니다.
RGB는 HSL과 거의 같은 방식으로 적용합니다. 동일한 style 속성 형식을 사용하되, "hsl"을 "rgb"로 바꾸고 괄호 안에 세 가지 색상 값을 입력하면 됩니다.
<body style="background-color:rgb(102,0,51);">
</body>
HSL과 마찬가지로 RGB 역시 알파 채널에 할당하고, 괄호 안에 0에서 1 사이의 네 번째 변수를 추가하여 불투명도를 조절할 수 있습니다.
<body style="background-color:rgba(102,0,51, 0.2);">
</body>
3. 검증된 헥스 코드 활용하기
헥스 코드는 오랫동안 검증된 기본 선택지입니다. 대부분의 브라우저에서 인식되기 때문에 HTML 색상 속성을 코딩할 때 가장 인기 있는 방법 중 하나입니다. 또한 헥스 코드는 오류 가능성이 있는 여러 개의 변수 대신 단일 변수로 색상을 지정할 수 있다는 장점이 있습니다.
헥스 코드로 HTML 색상을 지정하려면 동일한 style 속성에서 "hsl" 또는 "rgb" 자리에 헥스 코드를 넣기만 하면 됩니다.
<body style="background-color:#228B22;">
</body>
단, 헥스 색상의 동작은 적용 위치에 따라 달라질 수 있다는 점을 기억하세요. 헥스 색상 코드를 지정할 때는 항상 인라인 요소인지, 블록 레벨 요소인지 먼저 확인하는 것이 좋습니다.
4. 확실하지 않다면 색상 이름 사용하기
헥스 코드나 HSL 값에 익숙하지 않은 분이라면 언제든 색상 이름을 활용할 수 있습니다. HTML에서는 140개의 색상 이름을 사용할 수 있으므로, 사이트 색상을 신속하게 변경해야 할 때 이 방법이 특히 유용합니다.
사용 방법은 앞서와 동일합니다. 같은 style 속성에서 헥스 코드 대신 색상 이름을 넣으면 됩니다.
<body style="background-color:brown;">
</body>
색상 이름 사용은 복잡한 과정 없이 간단한 색상 변경이 필요할 때 탁월한 방법입니다. 급하게 스타일을 수정해야 하는 상황이라면 색상 이름을 적극적으로 활용해 보세요!
지금까지 HTML 색상 속성을 코딩하는 가장 빠르고 간단한 네 가지 방법을 살펴보았습니다. 다음에 사이트에 색감을 더해야 할 때는 고민하거나 애먹지 말고, 이 가이드를 참고해 아름답게 완성된 웹사이트를 만들어 보세요!
