HTML에서 배경색을 설정하려면 style 속성을 사용합니다. style 속성은 특정 요소에 인라인 스타일을 지정하는 역할을 하며, HTML <body> 태그와 함께 CSS의 background-color 속성을 조합하면 페이지 전체의 배경색을 손쉽게 변경할 수 있습니다.
bgcolor 속성은 더 이상 사용되지 않습니다
과거에는 <body> 태그에 bgcolor 속성을 직접 작성해 배경색을 지정했지만, HTML5에서는 이 속성을 더 이상 지원하지 않습니다. 현재는 CSS 스타일을 통해 배경색을 추가하는 것이 표준 방식이며, 기존의 bgcolor 속성은 공식적으로 폐기(deprecated)된 상태입니다.
style 속성 사용 시 주의사항
style 속성으로 지정한 인라인 스타일은 전역으로 설정된 스타일보다 항상 우선 적용된다는 점을 기억해야 합니다. 즉, HTML 문서 내 <style> 태그나 외부 스타일시트에서 정의한 스타일이 있더라도, 인라인 스타일이 그보다 높은 우선순위를 가지며 기존 설정을 덮어쓰게 됩니다.
예제 코드
아래 예제 코드를 실행하면 HTML에서 배경색을 설정하는 과정을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Background Color</title> </head> <body style="background-color:grey;"> <h1>Products</h1> <p>We have developed more than 10 products till now.</p> </body> </html>
실행 결과
위 코드를 실행하면 body 요소에 회색(grey) 배경색이 적용되어, 제목과 단락 텍스트가 회색 배경 위에 표시됩니다.
