블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

calendar

1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
2006. 11. 30. 14:22 Programing/HTML/JavaScript/CSS

렌더링 계산 방식의 차이

DIV로 레이어를 잡을때 가장 골치 아픈 문제가 레이어의 위치를 잡기가 어렵다는것이다.
테이블처럼 마음대로 위치를 잡는 일이 여간 힘든게 아니다.
이리 해도 안되고 저리 해도 안되서 결국엔 그냥 테이블로 짜는 경우가 허다하다.
하지만 테이블 본연의 임무는 표(grid)를 표시하는 일이니 억지로 다른일을 시키면 안되겠다.

아직까지는 모질라와 IE양대 진영의 브라우져간 렌더링 방식의 차이로 인해
코드 하나로 두 버전의 브라우져에서 동일한 표현을 하기는 쉽지 않다.
표준을 지키지 않는 IE때문에 개발자들만 이리저리 피곤하다.

W3C의 제안은 width값에 Border+Padding+Margin 값을 합산하는걸 표준으로 정하고 있다.
하지만 IE는 반대다.
width 값에서 Border+Padding+Margin을 뺀다.


firefox에서 가로 100px, border: 1px,padding: 10px; margin: 10px;의 박스를 그리려면
1*2 + 10*2 + 10*2 = 42
42 + 100 = 142
즉 내용이 들어갈 공간(content)의 크기는 100px이 지만 실제 표시되는 박스의 크기는 142px이 된다.

ie에서는 100-42 = 58 이므로 박스 사이즈는 100이지만
내용이 들어갈 공간의 크기는 58px이 되는것이다.



자리잡기

float,clear 두개의 속성만 이해하면 레이어의 자리잡기는 끝난다.

<div style="overflow: auto; border: solid 1px #D9D9D9;">
  <div style="border: solid 1px #D9D9D9; margin: 1px; width: 100px; height: 100px; float: left;">1</div>
  <div style="border: solid 1px #D9D9D9; margin: 1px; width: 100px; height: 100px; float: left;">2</div>
  <div style="border: solid 1px #D9D9D9; margin: 1px; width: 100px; height: 100px; clear: left; float: left;">3</div>
  <div style="border: solid 1px #D9D9D9; margin: 1px; width: 100px; height: 100px; float: left;">4</div>
  <div style="border: solid 1px #D9D9D9; margin: 1px; width: 100px; height: 100px; clear: left; float: left;">5</div>
  <div style="border: solid 1px #D9D9D9; margin: 1px; width: 100px; height: 100px; float: left;">6</div>
</div>

위 코드를 FireFox 에서 실행해 보자.

가로로 두개씩 세 줄에 걸쳐 박스 6개가 출력된다.

flat: 속성을 주면 div는 왼쪽 또는 오른쪽으로 정렬이 된다.

<div style="border: solid 1px #D9D9D9; margin: 1px; width: 100px; height: 100px; float: left;">1</div>
  <div style="border: solid 1px #D9D9D9; margin: 1px; width: 100px; height: 100px; float: left;">2</div>

clear: 속성은 float: 속성을 끝내는 속성이다.

위 코드에서 바스 하나를 추가 하면 2번 옆으로 가서 붙는다.
아래쪽에 새로운 박스를 추가 하려면 다음과 같이 clear: 속성을 추가 한다.

<div style="border: solid 1px #D9D9D9; margin: 1px; width: 100px; height: 100px; float: left; clear: left;">3</div>

2번 박스에서 float: 속성 값이 left 였기 때문에 clear: left 로 left로 지정된 floating을 끝내는 것이다.
float: right 였다면 clear: right 로 속성 값을 주면 된다.
단, clear: both 는 left와 right 를 모두 포함한다.

이 코드를 IE에서 실행해 보자.

1,2,4,6번 박스가 첫줄에 모두 표시가 되고
3,5번에 아래로 이어진다.

이것은 IE가 CSS를 올바로 해석하지 못하기 때문이다.
http://positioniseverything.net/ 이곳에 가면 IE의 버그를 확인할 수 있다.
posted by 초딩입맛제주아재