HTML에서 요소의 배경색을 표시하는 방법

HTML에서 요소의 배경색 표시하기

HTML에서 요소의 배경색을 표시하려면 bgcolor 속성을 사용합니다. 이 속성은 HTML 요소의 배경을 제어하며, 특히 페이지 본문(body)과 테이블(table)의 배경색을 지정할 때 활용됩니다.

참고: bgcolor 속성은 HTML5에서 더 이상 지원되지 않습니다. 최신 웹 표준에서는 CSS의 background-color 속성을 사용하여 배경색을 설정하는 것이 권장됩니다.

bgcolor 속성으로 지정할 수 있는 색상 형식

색상 이름: yellow, red, blue 등 미리 정의된 색상 이름
16진수(Hex) 값: #6666FF와 같은 여섯 자리 코드
RGB 값: rgb(255, 0, 255) 형태의 함수 표기법

예제 코드

아래 코드를 실행하면 bgcolor 속성을 실제로 어떻게 구현하는지 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Background Colors</title>
   </head>
   <body>
      <!-- 방식 1 - 색상 이름 사용 -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               이 배경은 노란색입니다
            </td>
         </tr>
      </table>

      <!-- 방식 2 - 16진수 값 사용 -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               이 배경은 하늘색입니다
            </td>
         </tr>
      </table>

      <!-- 방식 3 - RGB 값 사용 -->
      <table bgcolor = "rgb(0,255,0)" width = "100%">
         <tr>
            <td>
               이 배경은 초록색입니다
            </td>
         </tr>
      </table>
   </body>
</html>

CSS를 활용한 현대적인 대체 방법

HTML5부터는 bgcolor 속성이 폐기(deprecated)되었으므로, 아래와 같이 CSS의 background-color 속성을 사용하는 것이 좋습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table {
            width: 100%;
         }
         .bg-yellow {
            background-color: yellow;
         }
         .bg-skyblue {
            background-color: #6666FF;
         }
         .bg-green {
            background-color: rgb(0, 255, 0);
         }
      </style>
   </head>
   <body>
      <table class="bg-yellow">
         <tr><td>이 배경은 노란색입니다</td></tr>
      </table>

      <table class="bg-skyblue">
         <tr><td>이 배경은 하늘색입니다</td></tr>
      </table>

      <table class="bg-green">
         <tr><td>이 배경은 초록색입니다</td></tr>
      </table>
   </body>
</html>

CSS 방식은 구조와 스타일을 분리할 수 있어 유지보수가 쉽고, 모든 최신 브라우저에서 일관되게 동작한다는 장점이 있습니다.