HTML 요소의 배경색을 설정하려면 CSS의 background-color 속성을 사용합니다. 이 속성은 문단, 제목, div 박스 등 거의 모든 요소에 적용할 수 있으며, 인라인 스타일, 내부 스타일시트, 외부 스타일시트 어디에서든 사용 가능합니다.
예제
아래 코드를 직접 실행해 보면 background-color 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다:
<!DOCTYPE html> <html> <head> </head> <body> <p style="background-color: blue;"> 이 텍스트는 파란색 배경 위에 표시됩니다. </p> </body> </html>
다양한 색상 지정 방법
background-color 속성에는 여러 가지 방식으로 색상 값을 지정할 수 있습니다:
- 색상 이름:
background-color: blue; - HEX 코드:
background-color: #0000ff; - RGB 값:
background-color: rgb(0, 0, 255); - HSL 값:
background-color: hsl(240, 100%, 50%);
모든 방식이 동일한 파란색을 나타내며, 프로젝트의 스타일 가이드나 유지보수 편의성에 따라 적절한 형식을 선택하면 됩니다. 일반적으로는 재사용과 관리가 쉬운 외부 스타일시트에서 클래스 기반으로 배경색을 정의하는 것이 권장됩니다.