[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...>



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


코드는 다음과 같다.



1
2
3
4
5
6
7
8
9
10
11
<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>
 
cs



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


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


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


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


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


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


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




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



반응형
Posted by 모두/Modoo
: