CSS에서 텍스트에 색상을 적용하려면 color 속성과 background-color 속성을 사용합니다. 이 속성들에는 CSS 기본 색상 키워드, 16진수(HEX) 값, RGB 또는 HSL 값 등 다양한 색상 값을 지정할 수 있습니다. color 속성의 기본 문법은 다음과 같습니다: color: yourcolor;
CSS 글꼴 색상 적용 방법
웹사이트에서 텍스트의 색상과 배경색을 설정하는 것은 웹 디자인의 필수 요소입니다.
이때 사용되는 것이 바로 CSS의 color 속성과 background-color 속성입니다. color 속성은 HTML 텍스트의 색상을 지정하고, background-color 속성은 텍스트의 배경색을 정의합니다.
이번 글에서는 예제와 함께 CSS로 텍스트 색상을 설정하는 방법을 살펴보고, 이어서 텍스트 요소의 배경색을 설정하는 방법도 알아보겠습니다.
CSS 글꼴 색상(color)이란?
CSS 글꼴 색상은 color 속성으로 설정합니다. color 속성은 요소의 배경이 아닌 텍스트 자체의 색상을 지정하며, CSS 색상 키워드나 16진수 문자열 같은 색상 값을 사용할 수 있습니다.
color 속성의 기본 문법은 다음과 같습니다:
p {
color: red;
}
위 코드는 HTML 문서 내 모든 <p> 태그의 텍스트 색상을 빨간색으로 설정합니다.
여기서는 CSS 색상 키워드를 사용했습니다. "red"나 "paleblue"처럼 표준 색상을 간편하게 지칭할 때 이 키워드들이 유용합니다. 하지만 키워드만으로 스펙트럼 전체의 모든 색상을 표현할 수는 없습니다. 특정 색상을 정확하게 지정하고 싶다면 다른 형태의 색상 표기법을 사용하는 것이 좋습니다.
color 속성에는 다음 값들을 사용할 수 있습니다:
| 값 | 설명 | 예시 |
| 색상 이름 | 색상 이름 그대로 지정 | blue, hotpink |
| HEX 색상 | 16진수 색상 코드. 여섯 자리로 구성됩니다. | #f7f7f7, #0000ff |
| RGB 색상 | 빨강(Red), 초록(Green), 파랑(Blue)의 조합 | rgb(0, 50, 28), rgb(0, 0, 255) |
| HSL 색상 | 색조(Hue), 채도(Saturation), 명도(Lightness)의 조합 | hsl(0, 50%, 50%), hsl(180, 50%, 25%) |
웹 페이지의 기본 텍스트 색상은 <body> 태그에 적용된 색상을 따릅니다. 별도로 지정하지 않으면 검은색이 기본값입니다.
또한 color 속성을 활용해 스타일 시트에서 링크 색상을 정의할 수도 있습니다.
그럼 color 속성이 실제로 어떻게 작동하는지 예제를 통해 살펴보겠습니다.
CSS 글꼴 색상 변경 예제
예를 들어, 지역 식료품점 '피터슨 앤 선즈(Peterson and Sons)'를 위한 웹사이트를 디자인한다고 가정해 보겠습니다. 운영자는 웹사이트의 특정 텍스트 블록을 회색 글꼴로 표시하기를 원합니다. 다음 코드로 이를 구현할 수 있습니다:
<html>
<p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese.
Today, Peterson and Sons operates five stores across the Seattle area.</p>
<style>
p {
color: gray;
}
</style>
HTML의 <p> 태그로 피터슨 앤 선즈 식료품점을 소개하는 단락을 정의했습니다. 그다음 CSS 코드에서 모든 <p> 태그의 텍스트 색상을 회색으로 설정하는 스타일을 만들었습니다. 이때 색상 이름 값("gray")을 사용했습니다.
"gray" 대신 "rgb(128, 128, 128)"처럼 RGB 색상 값을 지정할 수도 있습니다. 물론 16진수 값이나 HSL 값으로 회색을 표현할 수도 있습니다.
이 예제에서는 별도의 CSS 파일을 사용하지 않고, HTML 문서 안의 <style> 태그로 스타일을 감싸 작성했습니다.
CSS 텍스트 배경색 설정
CSS의 background-color 속성은 요소의 배경색을 설정합니다. 이 속성 역시 앞서 설명한 모든 색상 값(색상 이름, HEX, RGB, HSL)을 지원하며, 텍스트의 배경색을 지정할 수 있습니다.
background-color 속성의 기본 문법은 다음과 같습니다:
p {
background-color: blue;
}
위 코드는 페이지의 모든 <p> 태그에 파란색 배경을 적용합니다.
CSS 텍스트 배경색 예제
이번에는 위 예제의 단락 중 한 문장에 주황색 배경을 추가해 보겠습니다.
강조하고 싶은 문장은 "Today, Peterson and Sons operates five stores across the Seattle area."입니다. 그리고 이전과 마찬가지로 단락 전체 텍스트는 회색으로 유지합니다. 다음 코드로 이를 구현할 수 있습니다:
<html>
<p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese.
<span>Today, Peterson and Sons operates five stores across the Seattle area.</span></p>
<style>
p {
color: gray;
}
span {
background-color: orange;
}
</style>
HTML 파일에서 <p> 태그로 단락을 정의한 뒤, 마지막 문장만 <span> 태그로 감쌌습니다. 덕분에 해당 문장에만 개별적인 스타일을 적용할 수 있었습니다.
CSS 코드에는 두 가지 규칙을 작성했습니다. 첫 번째 규칙은 <p> 태그 내 모든 텍스트의 색상을 회색으로, 두 번째 규칙은 <span> 태그 내 텍스트의 배경색을 주황색으로 설정합니다.
결과적으로 <span> 태그로 감싼 마지막 문장에만 주황색 배경이 적용된 것을 확인할 수 있습니다. 이것이 두 번째 스타일 규칙이 만든 결과입니다.
마무리
CSS의 color 속성으로 웹 페이지의 텍스트 색상을, background-color 속성으로 텍스트의 배경색을 설정할 수 있습니다.
이번 글에서는 예제와 함께 이 두 가지 작업을 수행하는 방법을 살펴봤습니다. 이제 전문 웹 디자이너처럼 글꼴 색상과 텍스트 배경색을 자유롭게 변경할 수 있습니다!
HTML을 더 깊이 학습하고 싶다면 HTML 학습 가이드를 참고해 보세요. 전문가의 학습 팁과 유용한 코딩 리소스를 확인할 수 있습니다.