> 웹 프론트엔드 > HTML 튜토리얼 > 웹사이트에서 div와 테이블의 유용성 비교

웹사이트에서 div와 테이블의 유용성 비교

yulia
풀어 주다: 2018-09-25 12:00:30
원래의
2648명이 탐색했습니다.

Div와 테이블은 페이지 레이아웃에 자주 사용되는데, 페이지에서는 어떤 특징이 있나요? 이 글에서는 웹사이트에서 div와 테이블의 사용성 비교에 대해 설명하겠습니다.

DIV와 TABLE 사이에는 장단점이 없습니다. 소위 웹 표준에서는 태그의 올바른 사용을 권장합니다. 예를 들어 DIV는 레이아웃에 사용되는 반면 TABLE은 원래 2차원 데이터를 변환하는 데 사용됩니다. TABLE이 해야 할 일을 하도록 놔둔다고 해서 TABLE이 페이지에 나타나지 않는다고 해서 그토록 멋진 것은 아닙니다.

조판에 DIV를 사용하는 장점은 설명하지 않지만 모든 사람이 명확하게 알아야 한다는 것입니다. DIV는 표준이자 일반적인 추세이지만 모든 페이지가 사용하기에 적합하다는 의미는 아닙니다.

중국 포털과 해외 포털 사이에는 큰 차이가 있습니다. 중국 네티즌들은 정보가 적은 페이지를 좋아하지 않습니다. 그러나 YAHOO는 중국어 페이지로 변경된 이후로 방문 수가 감소했습니다. 간결한 페이지가 너무 좋아서 며칠만에 다시 바꿨습니다. 공식적으로 소후(Sohu), 시나(Sina) 같은 포털을 만든 것은 중국의 국내 사정이다.

이들에게 DIV가 적합하지 않은 이유는 무엇인가요? 아래 여러 측면에서 하나씩 설명하겠습니다.

간단한 코드:

다들 DIV 레이아웃이 코드를 단순화한다고 하지만 TABLE 대신 DIV를 사용하여 저장된 코드는 제거됩니다. CSS(style)에 의해 이루어지며 이러한 스타일의 대부분은 DIV의 레이아웃을 제어하는 ​​데 사용됩니다. 그러면 CSS를 외부적으로 재사용할 수 있다고 말할 것입니다. 이 질문에 대한 답을 얻으려면 아래를 읽어 보십시오.

재사용성 및 다운로드량:

.css 스타일 시트 파일을 일률적으로 사용하면 전체 사이트를 한 번 수정하는 효과를 얻을 수 있어 유지 관리 비용이 낮아집니다. 하지만 다른 관점에서 생각해보세요. 모든 페이지가 로드 시 파일에 액세스해야 한다면, 특히 Sohu 및 Sina 웹사이트 플랫폼에서 이 파일의 일일 다운로드 횟수는 수억에 달할 것입니다. 프런트엔드 웹서버가 지원을 하고 있고, 백엔드 비용도 많이 올랐습니다. 배경지원이 제대로 이루어지지 않으면 페이지가 흐릿하게 나타나 이전 ​​작업이 무용지물이 됩니다. 많은 사람들이 이렇게 묻습니다. 그럴 확률은 너무 적습니다. 우리가 하는 일은 이 두 가지 사고를 방지하는 것입니다. 사고가 발생하면 포털에 대한 결과는 재앙이 될 것입니다.

HTTP 통신:

통합 스타일 시트 파일은 외부 호출 형식을 채택하므로 단일 페이지가 로드될 때마다 서버에 하나 이상의 http 요청이 발생하고 서버는 응답을 하나 더 추가합니다. 이는 프런트 엔드 웹 서버 소비에 매우 클 것입니다. 알고보니 외부 호출 형식보다는 오랫동안 페이지 앞부분에 CSS와 JS가 작성되어 있었습니다(sohu와 sina의 페이지를 보면 대부분 이 형식을 사용합니다). 서버 소비에 추가 코드를 추가하지 않기 위해.

페이지 캐시:

사용자가 페이지를 방문할 때마다 일정 기간 동안 브라우저 캐시에 저장되어 다음에 사용자가 페이지를 방문할 때 페이지 표시 속도가 크게 향상될 수 있습니다. . 수정을 할 때마다 페이지가 다시 다운로드되며, CSS 파일이 수정되면 웹사이트에서 방문한 모든 페이지가 다시 다운로드됩니다. 페이지가 수정되었습니다. 페이지를 다시 다운로드해야 합니다.

호환성:

모든 브라우저와 모든 버전의 CSS(스타일 시트)가 이를 잘 지원하는 것은 아닙니다. 예를 들어 IE5 이전의 브라우저는 CSS를 잘 지원하지 않습니다. 요즘에는 IE5 이전에 브라우저를 사용하는 사용자가 적지 않습니다. 이를 위해서는 호환성을 보장하기 위해 페이지 생성 과정에서 다양한 브라우저 버전을 테스트해야 하며, 이는 또한 많은 작업량을 증가시킵니다(적어도 제가 연락하는 개발자의 경우). div 페이지는 테이블 페이지보다 깁니다.

크로스커팅 및 연성:

크로스커팅 - 전통적인 레이아웃 방법은 페이지를 더 빠르게 다운로드하기 위해 페이지를 위에서 아래로 여러 블록으로 나누지만 레이아웃에 DIV를 사용하는 페이지에서 종종 발생합니다. 경우 각 블록의 중간 열이나 다른 열의 콘텐츠 항목 수가 고정되어 있지 않기 때문에 양쪽 열이 동시에 적응되지 않아 공백이 발생합니다.

이에 비해 전통적인 테이블 방식은 이러한 상황을 피하는 것이 더 쉽습니다.

우리는 기술 자체가 아닌 특정 분야에서 특정 기술의 유용성에 대해서만 논의하고 있습니다.

이것은 DIV의 레이아웃 방식이 좋지 않다는 것이 아니라, 남들이 말하는 것을 따르기보다는 대규모 컨텐츠 기반 포털에서 Table의 역할을 올바르게 봐야 한다는 것입니다. 대형 웹사이트에서 DIV 레이아웃 방식을 사용하지 않는 이유는 포털이 기술이 낙후되어 DIV를 사용하지 않는다는 것이 아니라 내부 사람들이 미래지향적이지 않기 때문이 아니라 다양한 이유에 의해 결정됩니다. NetEase가 모두 DIV를 사용하는 이유는 콘텐츠가 주요 초점이 아니기 때문입니다. 다른 포털의 경우 이러한 결정은 확인 시간에 따라 달라집니다. 다만 지금은 아직 때가 무르익지 않았을 뿐입니다. ?

위 내용은 웹사이트에서 div와 테이블의 유용성 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿