CSS는 숙련된 개발자에게도 어렵게 느껴질 수 있습니다. 선택할 수 있는 옵션이 워낙 많기 때문입니다. 이 글에서는 별도의 스타일시트(CSS) 파일을 만들지 않고도 HTML 문서의 배경색을 변경하는 방법을 알아보겠습니다.
HTML5에서는 style 속성과 background-color 속성값을 사용해 배경색을 지정할 수 있습니다. 이 속성은 원하는 어떤 요소에도 적용할 수 있지만, 페이지 전체의 배경색을 설정하려면 <body> 태그에 style 속성을 추가해야 합니다. 실제 HTML 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:orange;">
<h1>This is our header.</h1>
<p>This is our text.</p>
</body>
</html>
이 코드를 실행하면 주황색 배경의 HTML 페이지가 완성됩니다.
다양한 웹 색상 표기법 적용하기
HTML에서 색상을 지정할 때 style 속성에는 헥스 코드(hex code), HTML 색상 이름, RGB(A) 색상 값, HSL 색상 값을 사용할 수 있습니다. 단, RGB와 HSL 방식의 경우 해당 색상 체계를 background-color 선언 안에 반드시 명시해야 합니다.
각 색상 표기법의 작성 예시는 아래와 같습니다.
헥스 코드(Hex Code)
<body style="background-color:#fbbd0e;">
</body>
HTML 색상 이름(Color Name)
<body style="background-color:orange;">
</body>
RGB 색상 값
<body style="background-color:rgb(251,189,14);">
</body>
RGBA 색상 값
<body style="background-color:rgba(251,189,14,0.5);">
</body>
HSL 색상 값
<body style="background-color:hsl(44, 96%, 51%);">
</body>
HSLA 색상 값
<body style="background-color:hsla(44, 96%, 51%, 0.5);">
</body>
주의할 점: 이 방법으로 배경색을 설정한 뒤 나중에 외부 CSS 파일을 작성할 계획이라면, 스타일이 서로 충돌하거나 덮어쓰이는 문제를 방지하기 위해 HTML에서 style 속성과 background-color 속성값을 반드시 제거해야 합니다.
마무리
이 글에서는 HTML만으로 배경색을 변경하는 방법을 살펴보았습니다. HTML을 처음 배우는 분이라면 기본 문법 가이드나 HTML 학습 기간에 관한 자료를 함께 참고하면 더욱 효과적으로 공부할 수 있습니다.