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>
배경색을 추가하는 가장 간단한 방법은 내부 <style>를 만드는 것입니다. HTML 문서의 요소입니다.
<head>에서 HTML의 요소에서 <style></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 코드는 다음과 같은 웹페이지를 생성합니다!
색상 표기
#78a8eb background-color 값 속성은 16진수라고도 하는 16진수 표기법으로 작성됩니다. Red, Green, Blue 채널 각각에 대한 문자 집합으로 색상을 나타냅니다. 문자 범위는 숫자 0에서 9, 그 다음 문자 A-F입니다. 영(0)이 가장 낮은 값이고 F가 가장 높은 값입니다.
다른 표기법을 사용하여 CSS에서 색상을 나타낼 수도 있습니다.
예를 들어, 기능 표기법에서 색상은 rgba() 형식으로 지정됩니다. . 이 예에서 배경색은 다음과 같이 작성됩니다.
background-color: rgb(120, 168, 235);또는 HSL(Hue, Saturation, Lightness) 표기법에서는 다음과 같이 작성됩니다.
background-color: hsl(215, 74%, 70%);색상을 작성하는 이 세 가지 방법 중 하나는 최신 브라우저에서 사용할 수 있습니다.
사용되지 않는 메소드(사용하지 않음)
이전 버전의 웹 표준에서는 사람들이 bgcolor를 사용했습니다. HTML 태그 자체에 16진수 색상이 있는 속성:
<body bgcolor="#78a8eb" ></body>그러나 이것은 배경색을 설정하는 오래된 방법입니다. 더 이상 사용하지 마세요. CSS 스타일을 작성하여 색상을 제어하면 됩니다.