출처 : http://blog.crows.kr/5048788
요약 : DIV는 일단 내용부터 다 긁어와서 CSS해석이 아직 다 안 되어 레이아웃이 완성이 다 안 되었더라도 일단 글을 읽어나가는건 가능하지요. 근데 테이블로 만들면 역시나 몽땅 다 로딩이 될 때까지 하염없이 기다리게 된다는 것
웹 디자인을 하는 사람들은 대부분 알겠지만 일반인들은 모르는 경우가 많아서 Table 태그만 쓰는 경우가 많은데요. 브라우저에서 렌더링된 후에는 별 차이를 못 느끼기 때문에 Table 태그가 많이 사용되는 것 같습니다.
일반적으로 DIV 태그는 CSS와 같이 사용되어야만 제대로 화면에 그려지는데요. CSS가 없거나 제대로 적용되는 브라우저가 없던 시절에는 화면의 영역을 나누기 위해서는 Table 태그를 이용해야만했고 그 때 코딩되던 습관이 이어져서 지금도 사용되고 있는 것으로 생각됩니다.
DIV 태그와 Table 태그의 가장 큰 차이점은 렌더링 방법입니다. 물론 용도가 다른 만큼 이 둘을 직접적으로 비교하기에는 무리가 있지만 일반적으로 비슷한 용도로 사용하고 있는 레이아웃에서는 비교가 가능할 것 같고, 이 때는 크게 다른 모습을 보여주게 됩니다.
DIV 태그는 DIV 하나 하나가 객체로 구성되어집니다. 브라우저에서 렌더링을 할 때에는 객체 단위로 화면에 그리게 되는데요. DIV 객체가 하나가 로드가되면 바로 화면에 그리게됩니다. CSS가 제대로 지정이 되어 있다면 화면에 지정된 위치에 하나하나 차근차근 그려지기 시작하면서 페이지가 완성됩니다만, CSS가 제대로 지정되어 있지 않은 경우에는 화면상에서 객체들이 그려지면서 여기저기 움직이면서 위치를 찾아가는 경우도 발생합니다. 하지만 이건 페이지 레이아웃을 만든 사람이 잘 만들면 해결되는 문제죠. 레이아웃의 위치를 지정하는데 번거로운 과정이 따르지만 페이지를 로딩하면서 바로바로 그리기 때문에 컨텐츠 영역을 먼저 그리도록 레이아웃을 배치하면 방문자가 요구하는 컨텐츠의 내용을 보는데 지체되는 일이 적기 때문에 쾌적함을 느낄 수 있게됩니다.
반면 Table 태그는 Table 전체가 하나의 객체입니다. 보통 내용을 꾸미기 위해서는 Table 안에 셀에 내용을 채우게 되는데요. 셀의 내용이 크게되면 셀을 로드하는데 시간이 지연될 수 있습니다. 하지만 셀이 다 로드됐다고 바로 화면에 그려지는 것은 아니고, Table 태그 내에 있는 모든 셀이 로드가 되어야 화면에 그리기 시작합니다. 그래서 페이지의 내용이 보이기 시작할 때까지의 시간이 긴편입니다. 그리고 중요한건 로드가 다 끝났다고 바로 페이지가 다 열린 것이 아니라 이 때부터 그리기 시작 시작하는 것으로 플래시는 이 때부터 통신을 시작하고, 자바스크립트는 이 때부터 실행되기 시작합니다. 서버나 회선의 속도가 빨라서 로드가 빠르다면 큰 차이를 못 느끼겠지만 느리다면 화면 하나 그려지는데 짜증이 치밀어 올라오기 시작할 겁니다. 회선 속도는 충분히 빠르더라도 서버 처리 속도가 떨어져서 DB를 가져오는 게 느릴 경우에는 더 심하게 다가오는데요. 컨텐츠 영역은 이미 로드가 끝났음에도 그 뒤에 있는 셀의 내용을 서버에서 처리하고 전송하는 것이 지연된다면 그 시간만큼 Table 전체를 그리지 않고 기다리게 됩니다. Table 태그로 레이아웃을 만들 경우에 가장 큰 문제는 바로 요 문제죠. - 반면 DIV 태그는 이 전까지 로드된 부분은 이미 화면에 그린 상태구요.
그래서 레이아웃에는 Table 태그보다는 DIV 태그 사용이 권장되고 있습니다. 그러면 Table 태그는 어떤 때 사용하느냐... Table 태그의 목적이 표를 그리는 것인 만큼 표에 사용하면 됩니다. 표를 DIV 태그로도 그릴 수도 있지만 CSS를 사용해야 하는지라 자그마한 표를 만들기에는 적합하지 않고, 표 자체가 하나의 객체인데 별도의 객체로 그려지는 차이점이 발생하기 때문에 표를 그릴 때에는 DIV 태그보다 Table 태그가 더 좋습니다.
덧. 심심해서 뉴스 좀 볼까해서 어느 사이트를 들어갔더니 죄다 Table 태그로 만들어졌는데, 페이지 로딩 속도가 너무 느리길래 써봤습니다. 내용하나 보는데 걸리는 시간이 1분이상 까지도 걸리는군요...=ㅅ=;; 탭으로 같이 열어둔 다른 사이트는 DIV로 되어 있어서 페이지 로딩은 비슷한 수준으로 느리지만 컨텐츠를 보기에는 전혀 지장이 없었거든요. 너무 비교 되잖아요.[...]
덧2. 제 이글루 스킨도 DIV 태그로 레이아웃을 만든 것에 속하는데요. 메뉴나 하단에 집어넣은 위젯이 로딩되는 속도가 빨랐다 느렸다 하는 문제가 있어서 컨텐츠 영역부터 먼저 그리도록 해뒀기 때문에 메뉴가 다소 늦게 나타나지만 컨텐츠 영역은 빨리 볼 수 있도록 해놨습니다. 이글루스의 오래된 스킨들 중 Table 태그로 된 녀석도 일부 있는데 그런 스킨으로 했었다면 페이지 열리는거 기다리다가 그냥 닫아버릴 듯 싶군요.
요약 : DIV는 일단 내용부터 다 긁어와서 CSS해석이 아직 다 안 되어 레이아웃이 완성이 다 안 되었더라도 일단 글을 읽어나가는건 가능하지요. 근데 테이블로 만들면 역시나 몽땅 다 로딩이 될 때까지 하염없이 기다리게 된다는 것
웹 디자인을 하는 사람들은 대부분 알겠지만 일반인들은 모르는 경우가 많아서 Table 태그만 쓰는 경우가 많은데요. 브라우저에서 렌더링된 후에는 별 차이를 못 느끼기 때문에 Table 태그가 많이 사용되는 것 같습니다.
일반적으로 DIV 태그는 CSS와 같이 사용되어야만 제대로 화면에 그려지는데요. CSS가 없거나 제대로 적용되는 브라우저가 없던 시절에는 화면의 영역을 나누기 위해서는 Table 태그를 이용해야만했고 그 때 코딩되던 습관이 이어져서 지금도 사용되고 있는 것으로 생각됩니다.
DIV 태그와 Table 태그의 가장 큰 차이점은 렌더링 방법입니다. 물론 용도가 다른 만큼 이 둘을 직접적으로 비교하기에는 무리가 있지만 일반적으로 비슷한 용도로 사용하고 있는 레이아웃에서는 비교가 가능할 것 같고, 이 때는 크게 다른 모습을 보여주게 됩니다.
DIV 태그는 DIV 하나 하나가 객체로 구성되어집니다. 브라우저에서 렌더링을 할 때에는 객체 단위로 화면에 그리게 되는데요. DIV 객체가 하나가 로드가되면 바로 화면에 그리게됩니다. CSS가 제대로 지정이 되어 있다면 화면에 지정된 위치에 하나하나 차근차근 그려지기 시작하면서 페이지가 완성됩니다만, CSS가 제대로 지정되어 있지 않은 경우에는 화면상에서 객체들이 그려지면서 여기저기 움직이면서 위치를 찾아가는 경우도 발생합니다. 하지만 이건 페이지 레이아웃을 만든 사람이 잘 만들면 해결되는 문제죠. 레이아웃의 위치를 지정하는데 번거로운 과정이 따르지만 페이지를 로딩하면서 바로바로 그리기 때문에 컨텐츠 영역을 먼저 그리도록 레이아웃을 배치하면 방문자가 요구하는 컨텐츠의 내용을 보는데 지체되는 일이 적기 때문에 쾌적함을 느낄 수 있게됩니다.
반면 Table 태그는 Table 전체가 하나의 객체입니다. 보통 내용을 꾸미기 위해서는 Table 안에 셀에 내용을 채우게 되는데요. 셀의 내용이 크게되면 셀을 로드하는데 시간이 지연될 수 있습니다. 하지만 셀이 다 로드됐다고 바로 화면에 그려지는 것은 아니고, Table 태그 내에 있는 모든 셀이 로드가 되어야 화면에 그리기 시작합니다. 그래서 페이지의 내용이 보이기 시작할 때까지의 시간이 긴편입니다. 그리고 중요한건 로드가 다 끝났다고 바로 페이지가 다 열린 것이 아니라 이 때부터 그리기 시작 시작하는 것으로 플래시는 이 때부터 통신을 시작하고, 자바스크립트는 이 때부터 실행되기 시작합니다. 서버나 회선의 속도가 빨라서 로드가 빠르다면 큰 차이를 못 느끼겠지만 느리다면 화면 하나 그려지는데 짜증이 치밀어 올라오기 시작할 겁니다. 회선 속도는 충분히 빠르더라도 서버 처리 속도가 떨어져서 DB를 가져오는 게 느릴 경우에는 더 심하게 다가오는데요. 컨텐츠 영역은 이미 로드가 끝났음에도 그 뒤에 있는 셀의 내용을 서버에서 처리하고 전송하는 것이 지연된다면 그 시간만큼 Table 전체를 그리지 않고 기다리게 됩니다. Table 태그로 레이아웃을 만들 경우에 가장 큰 문제는 바로 요 문제죠. - 반면 DIV 태그는 이 전까지 로드된 부분은 이미 화면에 그린 상태구요.
그래서 레이아웃에는 Table 태그보다는 DIV 태그 사용이 권장되고 있습니다. 그러면 Table 태그는 어떤 때 사용하느냐... Table 태그의 목적이 표를 그리는 것인 만큼 표에 사용하면 됩니다. 표를 DIV 태그로도 그릴 수도 있지만 CSS를 사용해야 하는지라 자그마한 표를 만들기에는 적합하지 않고, 표 자체가 하나의 객체인데 별도의 객체로 그려지는 차이점이 발생하기 때문에 표를 그릴 때에는 DIV 태그보다 Table 태그가 더 좋습니다.
덧. 심심해서 뉴스 좀 볼까해서 어느 사이트를 들어갔더니 죄다 Table 태그로 만들어졌는데, 페이지 로딩 속도가 너무 느리길래 써봤습니다. 내용하나 보는데 걸리는 시간이 1분이상 까지도 걸리는군요...=ㅅ=;; 탭으로 같이 열어둔 다른 사이트는 DIV로 되어 있어서 페이지 로딩은 비슷한 수준으로 느리지만 컨텐츠를 보기에는 전혀 지장이 없었거든요. 너무 비교 되잖아요.[...]
덧2. 제 이글루 스킨도 DIV 태그로 레이아웃을 만든 것에 속하는데요. 메뉴나 하단에 집어넣은 위젯이 로딩되는 속도가 빨랐다 느렸다 하는 문제가 있어서 컨텐츠 영역부터 먼저 그리도록 해뒀기 때문에 메뉴가 다소 늦게 나타나지만 컨텐츠 영역은 빨리 볼 수 있도록 해놨습니다. 이글루스의 오래된 스킨들 중 Table 태그로 된 녀석도 일부 있는데 그런 스킨으로 했었다면 페이지 열리는거 기다리다가 그냥 닫아버릴 듯 싶군요.
'CSS' 카테고리의 다른 글
| css 속성 중 !important 선언 (0) | 2012.03.30 |
|---|---|
| 유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드 (0) | 2012.03.06 |
| em 단위 계산 (0) | 2012.03.06 |