Original article: CSS Font Color – How to Style Text in HTML
개발 중인 웹 사이트의 텍스트 색상을 정하는 건 처음에는 혼란스러울 수 있습니다. 그러나 이 글을 보시면 쉽게 배우실 수 있을 거예요.
HTML에서 텍스트 색상 지정하는 방법
CSS에서 background-color 속성은 모든 것의 배경색을 설정하기에 매우 간단합니다.
페이지에서 어떤 것의 전경색을 설정하고 싶다면 어떻게 할까요? 특히 일반적인 조건에서는 배경색을 설정하고 싶지 않은 텍스트입니다.
CSS에슨 foreground-color 속성이 없기 때문에 이것을 가능하게 하는 게 color 속성입니다.
이 글에서는 색상 속성을 사용하여 텍스트의 색상을 설정하는 방법을 보여드리겠습니다. 또한 다양한 값을 사용하는 경우에 대해서도 알아보겠습니다.
색상 속성은 색상의 이름, hexadecimal, RGB, HSL 4가지 방식으로 값을 가져옵니다. 이제 각각을 살펴보겠습니다.
색상의 이름
이름에서 알 수 있듯이 색상 속성을 가져온 후 원하는 색상의 이름을 지정하여 값을 적용합니다. 이는 red, green, blue, orange, crimson, cyan 등이 될 수 있습니다. 브라우저에서 인식하는 색상의 이름은 약 147개입니다.
기본 문법은 이렇게 생겼습니다.
element {
color: colorName;
}
<p>freeCodeCamp</p>
p {
color: crimson;
}
Hexadecimal 컬러 (또는 Hex 컬러)
Hex 값은 총 6자로 색을 표시하는 데 사용됩니다. 숫자 기호는 파운드/숫자 기호(#)로 시작하여 0부터 9까지의 숫자, 그리고 마지막은 A부터 F까지의 문자입니다.
처음 두 개의 값은 빨간색, 다음 두 개는 초록색, 마지막 두 개는 파란색을 나타냅니다. Hex 값의 경우 사용할 수 있는 색의 음영에 제한이 없습니다.
<p>freeCodeCamp</p>
p {
color: #dc143c;
}
RGB 컬러
RGB는 Red(빨강), Green(초록), Blue(파랑)을 의미합니다. RGB 컬러를 사용하면 빨간색, 초록색, 파랑의 정도를 지정할 수 있습니다. 세 가지 모두 0에서 255 사이의 숫자로 표현됩니다.
RGB에는 rgba라는 타입이 있는데 여기에 추가된 'a'는 알파를 의미하며, 색의 불투명도를 지정할 수 있고 0.0에서 1.0까지 선택할 수 있습니다 – 0.0은 불투명도 0%, 0.5는 불투명도 50%, 1.0은 불투명도 100%를 의미합니다.
기본 문법은 rgba(amountOfRed, amountOfGreen, amountOfBlue, alpha)입니다.
알파 값을 원하지 않으면 rgba(amountOfRed, amountOfGreen, amountOfBlue)만 쓰셔도 됩니다.
다음은 일반 RGB 값의 문법입니다.
<p>freeCodeCamp</p>
p {
color: rgb(220, 20, 60);
}
이것은 50% (0.5) 불투명도로 작용하는 알파 값을 보여줍니다.
p {
color: rgb(219, 20, 60, 0.5);
}
HSL 컬러
HSL은 색, 채도 및 명도를 나타냅니다. 이것은 CSS에서 텍스트(그리고 색을 사용하는 다른 모든 것)에 색을 지정하는 또 다른 방법입니다.
- Hue는 360°로 색상 바퀴를 나타냅니다. 따라서 0°는 빨간색, 120°는 초록색, 240°는 파란색입니다.
- 채도는 백분율로 표현된 색의 선명한 정도입니다. 0%는 회색 음영이고 100%는 색상 자체입니다.
- 명도는 백분율로 표현된 색의 밝고 어두운 정도입니다. 0%는 검은색, 100%는 흰색입니다.
RGB 색상과 마찬가지로 색상의 불투명도를 설정할 수 있습니다. 그래서 hsla도 있습니다.
전체 기본 문법은 hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha)입니다. 알파 값을 원하지 않으면 hsl(colorDegree, saturationPercentage, lightnessPercentage)만 쓰셔도 됩니다.
<p>freeCodeCamp</p>
p {
color: hsl(348, 83%, 47%);
}
이렇게 hsl 색상에 특정 불투명도를 적용할 수 있습니다.
p {
color: hsla(348, 83%, 47%, 0.5);
}
반드시 색상의 이름, Hex 컬러, RGB 컬러, HSL 컬러로 색상을 지정해줘야 하나요?
CSS의 멋진 점 중 하나는 한 가지 일에도 다양한 방법이 있다는 것입니다. 텍스트에 색상을 적용하는 방법만 봐도 그렇죠.
4가지 방법으로 색상을 적용할 수 있기 때문에 어떤 것을 사용하는 게 가장 좋은지 궁금하실 겁니다.
색상의 이름을 사용하면 표현할 수 있는 범위가 제한됩니다. 빨간색, 초록색, 파란색, 노란색 혹은 다른 색상의 이름으로는 색을 변형시키는데 제약이 많고 브라우저에서 인식하는 약 147개의 정의된 색에만 접근할 수 있습니다.
Hexadecimal 컬러는 매우 역동적입니다. 이는 창의성에 목마른 개발자들 사이에서 가장 많이 사용됩니다. Hexadecimal 컬러를 사용하면 다양한 음영을 사용할 수 있고 심지어 아무도 사용하지 않은 색상을 사용할 수 있습니다.
RGB 컬러는 hex 컬러만큼 동적입니다. 0에서 255까지 빨간색, 초록색, 파란색의 정도를 지정할 수 있는 것 외에도 추가 알파 값을 사용하여 색상을 얼마나 투명하게 할 것인지 설정할 수 있습니다.
HSL은 이 중에서 가장 역동적입니다. 컬러 휠에서 0에서 360도로 정확히 원하는 색상을 지정하고, 백분율로 채도와 명도를 설정하고, 0.0에서 1.0 사이 불투명도를 설정합니다.
정말 여러분과 여러분의 상황에 따라 다르고 어느 정도로 창의적이고 구체적으로 원하는지에 따라 다릅니다.
결론
텍스트에 색상을 적용하면 방문자들이 더 매력적으로 느끼는 웹 사이트가 될 수 있습니다. 또한 올바른 색상 조합은 콘텐츠가 더 쉽게 읽히도록 도와줍니다.
이 글에서는 색상 속성과 함께 사용할 수 있는 4가지 다른 속성으로 텍스트에 색상을 적용하는 방법에 대해 알아봤습니다.
읽어주셔서 감사하고, 열심히 코딩하세요.