문득 DIV객체에 위, 아래, 오른쪽, 왼쪽에 각각 border를 다른 색상으로 주면 모서리 부분은 어느쪽이 우선하게 될까라는 의문이 들었습니다.
쉽게 말해 왼쪽과 위쪽에 테두리를 설정하고 각각 다른 색으로 했을때 그 테두리끼리 만나는 부분이 어느쪽 색이 되는가 그런말이지요.
별 쓸데없는 의문이지만 궁금한것은 못참으니 해결하기 위해 간단하게 테스트 해보았습니다.
물론 브라우저별로 결과도 달라질것같아 브라우저별로 결과를 살펴보았습니다.
테스트한 브라우저는 Internet Explorer7, Firefox3.01, Opera9.52입니다.
본론
일단 아래와 같이 간단하게 DIV를 만들고 테두리를 각각 다른 색상으로하여 두께를 10px으로 하였습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">이건 예상하셨듯이 모든 브라우저가 같은 결과를 내줍니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> border test </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#d{
width:200px;
height:200px;
margin:0 auto;
border-top:10px solid #ddd;
border-right:10px solid #33c;
border-bottom:10px solid #c33;
border-left:10px solid #3c3;
}
</style>
</head>
<body>
<div id="d"></div>
</body>
</html>
IE7 border:10px
FF3, border:10px
OP9.52, border:10px
그런데 이와 같은 실험으로는 처음에 제기한 문제의 궁금증을 해결할 수 없습니다. 그래서 두께를 1px로 해서 다시한번 해보도록 합시다. 위의 소스에서 두께만 1px로 바꾸겠습니다.
그러면 결과는 아래처럼 됩니다.
이것도 역시 확대해 보겠습니다. 한눈에 보기 좋게 확대후 원본의 모양대로 붙여보았습니다.
IE7에서 모서리 우선권은 오른쪽 > 위/아래 > 왼쪽 순이 되네요.
파이어폭스에서는 마찬가지로 모서리 부분이 중간값색으로 나옵니다.
Firefox에서는 우선권이 없는거 같군요.
오페라에서는 위쪽 테두리가 우선하는 부분같군요.
Opera에서의 모서리 우선권은 위 > 왼쪽/오른쪽 > 아래 순이 됩니다.
결론
이런걸 알아서 뭐에 써먹느냐하시는 분도 계시겠지만 그냥 알고는 있자는 차원에서 실험해 봤습니다. 물론 몰라도 상관은 없습니다만 알아두면 재미있겠죠.
브라우저별로 왜 다른 결과가 나오는지는 저도 모르겠습니다. 개인적으로는 FF처럼 중간값을 내는게 더 좋아 보이기는 하네요. 물론 장단이 있겠지요. 어느게 웹표준 권고안에 맞는지는 잘 모르겠네요.
'웹 이야기' 카테고리의 다른 글
| 구글 Chrome잠깐 써본 소감. (0) | 2008/09/03 |
|---|---|
| 구글의 새로운 웹브라우저 Chrome. 내일 베타테스트 시작 (0) | 2008/09/02 |
| 브라우저별 DIV객체에 부여한 border에 대한 실험. (9) | 2008/08/24 |
| 네이버의 오픈캐스트. 정보선택권을 이용자에게 돌려주겠다. (0) | 2008/07/01 |
| 레몬펜 버그? (2) | 2008/05/14 |
| 토종웹브라우저 Korean browser? 그 실체는? (2) | 2008/04/30 |
이 글에
트랙백이 없고,
댓글이 9개달렸습니다.
엮인글보내기 주소 : http://jugug.net/trackback/154
블로그의 글에 대한 저작권 안내
E-MAIL
RSS
표준안에 명시되어 있지 않은 사항이기 때문에 어느 브라우저가 맞다 틀리다라고 말할 수 없는 사항이네요. 좋은 내용 잘 봤습니다.
방문감사합니다.
역시 이런것까진 표준안에 명시되어있진 않군요. 좋은정보 감사합니다.
재밌는 실험 결과네요.
FF는 중립이라. 어떻게 보면 engineer 입장에서는 가장 맞는 결과일 수도..하지만 일반 사용자에게는 별로....
FF의 현재 국내에서의 실정과 딱 맞아떨어지는 실험결과인듯.
방문 감사합니다.
딱히 어떤결과가 좋다고 말 할수 없는 부분이죠.
저 역시 FF의 방식이 맞는 것 같습니다.
도아님도 그렇게 생각하시는 군요.
와우~ 희주님이 트랙백 걸지 않았다면 저는 이런걸 평생 모르고 살았을꺼에요. 저보다 더 괴짜시군요. ㅎㅎ. 알아두면 좋은 내용! 감사합니다.
저도 갑자기 생각나지 않았으면 평생 모르고 지냈을겁니다.
오...좋은실험이네요 잘보고가요^^