[HTML] bgcolor와 background-color, 그리고 크로스 브라우징

[HTML]

bgcolor와 background 속성, 그리고 cross-browsing

일할 때 보통 chrome 이나 firefox 를 많이 사용하고 있는데

어느 날 갑자기 Internet Explorer 로 접속해보니

하얗고 예쁘던 표가 까맣게 출력되어서 글씨를 읽을 수 조차 없게 되어있었다.

문제가 있는 코드를 보니 bgcolor를 사용했더라....

혹시 bgcolor의 문제인가 해서 이것저것 바꿔보니, bgcolor의 문제가 맞았다!

아래의 표의 모든 Column이 하얀색으로 보인다면, 

브라우저가 크롬 혹은 파이어 폭스 혹은 Microsoft Edge 일 것이다. 

Internet Explorer에서는 두번째 column이 까맣게 표현된다. 

bgcolor = "white"

bgcolor="#fff"

style=background : #fff

bgcolor="#ffffff"

브라우저에 따라 아무 이상이 없어 보일 수 있으므로,

두 가지 환경에서의 표를 캡쳐했다.

<Internet Explorer>

<Chrome, Microsoft Edge, Firefox...>

위에 보이는 것처럼 두번째 칼럼이 다르게 보일 것 이다.

코드는 다음과 같다.

<table style="background-color: black;">
        <tbody>
             <tr>
                 <td bgcolor="white">bgcolor = "white"</td>
                 <td bgcolor="#fff">bgcolor="#fff" </td>
                 <td style="background : #fff;"><p>style=background : #fff</p></td>
                 <td bgcolor="#ffffff">bgcolor="#ffffff"</td>
             </tr>
    </tbody>
</table>
 

코드에서 백그라운 컬러와 상관없는 모든 코드는 삭제하였다.

background는 반드시 style 태그 안에 넣어서 사용해야 한다.

귀찮기는 해도 습관이 되어 있어서 인지 보통 style 태그 안에 background를 넣어서 사용한다.

bgcolor 는 HTML 중간에 바로 넣어서 사용할 수 있다. (style 태그는 필요없음)

대신 위에서 보이는 것 처럼 컬러코드 3자리로 하면 Internet Explorer에서 에러를 가져온다.

6자리 컬러코드 & 문자형 컬러코드는 가능하다.

참고를 위해 rgb 코드도 테스트 해보았는데, rgb 코드 역시 사용가능하다.

bgcolor를 사용할 때는 세 자리 컬러코드 (#fff) 만 조심하자!