HTML 요소에 배경색을 추가하려면 CSS의 background-color 속성을 사용하면 됩니다.
예를 들어 다음과 같은 HTML 마크업이 있고, <body> 요소에 배경색을 지정하고 싶다고 가정해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Changing background color in HTML/CSS</title>
</head>
<body>
<h1>Here's an awesome website!</h1>
</body>
</html>배경색을 추가하는 가장 간단한 방법은 HTML 문서 내부에 <style> 요소를 만드는 것입니다.
HTML의 <head> 요소 안에 <style></style> 태그를 작성한 뒤, 그 안에 배경색에 대한 CSS 스타일 규칙을 추가하면 됩니다.
<head>
<meta charset="UTF-8">
<title>Changing background color in HTML/CSS</title>
<style>
body {
background-color: #78a8eb;
}
</style>
</head>위의 HTML과 CSS 코드를 적용하면 아래와 같은 웹페이지가 완성됩니다!
색상 표기법
background-color 속성에 사용된 #78a8eb 값은 16진수 표기법(hexadecimal, 헥스 코드)으로 작성된 것입니다. 헥스 코드는 빨강(Red), 초록(Green), 파랑(Blue) 각 채널을 문자 조합으로 표현하며, 숫자 0부터 9까지와 알파벳 A부터 F까지를 사용합니다. 여기서 0이 가장 낮은 값, F가 가장 높은 값을 의미합니다.
CSS에서는 헥스 코드 외에도 다양한 표기법으로 색상을 나타낼 수 있습니다.
먼저 함수형 표기법(functional notation)에서는 색상을 rgba() 형식으로 작성합니다. 앞선 예제의 배경색을 이 방식으로 표현하면 다음과 같습니다.
background-color: rgb(120, 168, 235);또한 HSL(Hue, Saturation, Lightness, 즉 색조·채도·명도) 표기법을 사용하면 아래처럼 작성할 수 있습니다.
background-color: hsl(215, 74%, 70%);이 세 가지 방식 중 어떤 것을 사용해도 최신 브라우저에서는 모두 정상적으로 동작합니다.
더 이상 사용하지 않는 방법 (사용 금지)
과거 웹 표준에서는 HTML 태그 자체에 bgcolor 속성과 헥스 색상 코드를 함께 사용하는 방식이 흔했습니다.
<body bgcolor="#78a8eb" ></body>하지만 이것은 배경색을 설정하는 구식 방법입니다. 이제는 더 이상 사용해서는 안 되며, 색상 제어는 반드시 CSS 스타일로 작성하는 것이 올바른 방법입니다.