지금까지 쭈욱 IE, 그리고 계속적인 업데이트를 하며 써오다가 파이어폭스라는 나의 마음을 뒤흔든 녀석이 나타난 이후로, 이들 브라우저간의 호환성을 유지하려고 참 애쓰고 있다...
그러다가 IE와 FF간의 큰 차이를 보이는 것이 border에 대한 값이었다.
레이아웃에 맞추어서 구현하려다보면 IE와 FF와의 표현이 너무 다른 적이 많았다.
이걸 고치면 여기선 되는데 저기선 안되고 이런 것들...
검색을 하다가 어느 글을 읽고 border 의 적용이 브라우저마다 다르다는 것을 알게되었고,
보고 퍼올 수도 있었지만 내가 직접 해보고 익히는 게 좋을 것 같아 직접해봤고, 그 결과를 아래에 올렸다.
현재 IE 7에서는 FF와 동등하게 구현된다. 원래 이렇게 나와야 하는건데 IE6에서 이상하게 파싱하고 있었던 것이다. 그림에서 처럼 IE6에서도, HTML 페이지 맨 상단에 <!DOCTYPE ... 을 주면 정상적으로 나온다. 그러나 요즘 페이지는 대부분 그것이 없다..
그럼 그 결과는 맨 아래 그림과 같이 나오는데, width를 적용해 놓고 나면 border는 width 안에 들어간다. 그 안에 또 padding이 비집고 들어가는 것이다..
표준안에 권고된 내용상으로는,
width가 기본적인 box bound를 잡게 되고, 이는 contents가 들어가는 범위이다.
여기서부터 padding, border, margin이 차례대로 적용된다.
padding은 background가 적용되는 범위,
border가 그 바깥을 둘러싸고 있고,
margin은 border 바깥에 위치한다.
left, top(,right,bottom) 속성은 이 margin 까지 적용되고 난 부분이 기준이 되는 것이다.
사실 이전 IE6까지의 파싱을 이용하면 편한점이 있다.
left, top 값을 주고 width와 height만 가지고도 완벽한 레이아웃이 나올 수 있다.
border, padding 을 생각하지 않고서다. 하지만 이는 기본적인 레이아웃의 법칙을 어긴다고 볼 수 있다.
코더가 생각하기 좀 복잡하더라도 원칙에 맞춰서 해 나가야지 않을까.
그러다가 IE와 FF간의 큰 차이를 보이는 것이 border에 대한 값이었다.
레이아웃에 맞추어서 구현하려다보면 IE와 FF와의 표현이 너무 다른 적이 많았다.
이걸 고치면 여기선 되는데 저기선 안되고 이런 것들...
검색을 하다가 어느 글을 읽고 border 의 적용이 브라우저마다 다르다는 것을 알게되었고,
보고 퍼올 수도 있었지만 내가 직접 해보고 익히는 게 좋을 것 같아 직접해봤고, 그 결과를 아래에 올렸다.
현재 IE 7에서는 FF와 동등하게 구현된다. 원래 이렇게 나와야 하는건데 IE6에서 이상하게 파싱하고 있었던 것이다. 그림에서 처럼 IE6에서도, HTML 페이지 맨 상단에 <!DOCTYPE ... 을 주면 정상적으로 나온다. 그러나 요즘 페이지는 대부분 그것이 없다..
그럼 그 결과는 맨 아래 그림과 같이 나오는데, width를 적용해 놓고 나면 border는 width 안에 들어간다. 그 안에 또 padding이 비집고 들어가는 것이다..
표준안에 권고된 내용상으로는,
width가 기본적인 box bound를 잡게 되고, 이는 contents가 들어가는 범위이다.
여기서부터 padding, border, margin이 차례대로 적용된다.
padding은 background가 적용되는 범위,
border가 그 바깥을 둘러싸고 있고,
margin은 border 바깥에 위치한다.
left, top(,right,bottom) 속성은 이 margin 까지 적용되고 난 부분이 기준이 되는 것이다.
사실 이전 IE6까지의 파싱을 이용하면 편한점이 있다.
left, top 값을 주고 width와 height만 가지고도 완벽한 레이아웃이 나올 수 있다.
border, padding 을 생각하지 않고서다. 하지만 이는 기본적인 레이아웃의 법칙을 어긴다고 볼 수 있다.
코더가 생각하기 좀 복잡하더라도 원칙에 맞춰서 해 나가야지 않을까.
