많은 div 태그를 사용하는 것이 정말 나쁘니?-JS 튜토리얼-php.cn

Is Using Lots of div Tags Really That Bad?

많은 div 태그를 사용하는 것이 정말 나쁘니? 우리의 최신 책인 논란의 여지가있는 제목을 가진 책은 헛간 댄스에서 개구리 버킷보다 많은 논쟁과 무릎을 꿇는 반응을 일으켰습니다. 내가 자주 게시 한 주석은“테이블 태그를 테이블로 표시하는 DIV로 테이블 태그를 교체하는 것은 다르지 않습니다. 당신은 단지 테이블을 사용할 수도 있습니다.” 논쟁은 주석가가 테이블 태그를 사용하지 않는 유일한 이유는 관련된 태그 수의 수라는 것을 암시하기 때문에 흥미 롭습니다. 나는 목을 내밀어 예라고 말할 것입니다. 테이블 요소와 같은 모든 테이블, TR 및 TD 태그를 DIV 태그로 교체하더라도 레이아웃에 HTML 테이블을 사용하는 것보다 낫습니다.

. 구조 DIV 태그의 과도한 사용에 의해 아무도 부정적인 영향을받지 않습니다. 레이아웃에 HTML 테이블을 사용하는 것도 마찬가지입니다.

레이아웃에 중첩 테이블을 사용하는 웹 페이지는 인쇄하기 어렵고 모바일 장치에서는보기가 어렵고 화면 리더 사용자를 위해 탐색하기가 어렵습니다. 스크린 리더 애플리케이션은 종종 중첩 된 HTML 테이블 위에 걸려 넘어지며, 테이블 내용에 들어갈 때 "5 행과 2 개의 열이있는 테이블"과 같은 것을 알리고 떠날 때 "테이블 엔드"와 같은 것을 발표합니다. Nested Div 요소를 사용하는 동일한 웹 페이지는 모바일 장치의 인쇄 및보기를 위해 깔끔하게 쌓기 위해 스타일링 할 수 있으며 스크린 리더는 DIV 요소를 무시합니다. HTML 테이블을 사용하면 각 셀의 내용이 동일한 행과 동일한 열에서 다른 셀의 내용과 관련이 있음을 암시합니다. 반면에 DIV는 다른 DIV 요소와 그러한 관계가 없음을 의미합니다. 단순히 콘텐츠 스캐 폴딩이며 사용에서 의미가 없습니다.

Ok, 모든 테이블 관련 태그를 DIV 요소로 맹목적으로 교체하는 것은 문제에 대한 올바른 접근 방식이 아니지만 레이아웃에 HTML 테이블을 사용하는 것만 큼 "나쁘다"고 말하는 것은 잘못된 것입니다. HTML 4.01 DIV를 "일반 언어/스타일 컨테이너"또는보다 구체적으로 정의합니다.

DIV 및 SPAN 요소는 ID 및 클래스 속성과 함께 문서에 구조를 추가하기위한 일반적인 메커니즘을 제공합니다. 이러한 요소는 컨텐츠를 인라인 (SPAN) 또는 블록 레벨 (DIV)으로 정의하지만 내용에 대한 다른 프리젠 테이션 관용구를 부과하지 않습니다. 따라서 저자는 스타일 시트, 랑 속성 등과 함께 이러한 요소를 사용하여 HTML을 자신의 요구와 취향에 맞게 조정할 수 있습니다. 따라서 우리는 div 요소를 사용하여 컨텐츠 블록을 정의 할 수 있습니다. 콘텐츠 구조화를 위해 중첩 된 DIV 요소를 사용하는 것과 같은 소리는 완벽하게 유효합니다. 제목, 단락, 블록 큐어, 목록 및 테이블 데이터에 대한 테이블과 같은 더 적절한 요소 대신 DIV 요소를 사용하지 않는 한, 잘하고 있습니다.

. html 테이블 요소를 사용하여 레이아웃을 만들 때 취하는 접근 방식은 웹 페이지를 스타일링하기 전에 먼저 HTML의 레이아웃을 잠그는 것입니다. 이것은 잘못되었고 모범 사례에 직면하여 날아갑니다. 프레젠테이션을 콘텐츠에서 분리하십시오. 이것은 많은 DIV 요소를 사용하는 경우에도 CSS 레이아웃 접근법과 완전히 다릅니다. 예를 들어, DIV 태그의 사이트 브랜딩을 나타내는 모든 컨텐츠와 다른 DIV 태그의 추가 사이트 정보를 나타내는 모든 컨텐츠를 포장 할 수 있습니다. CSS에서는 웹 페이지 상단에 사이트 브랜딩을 배치하고 추가 사이트 정보를 하단에 배치하는 스타일을 적용 할 수 있다는 사실은 아직 중요하지 않습니다. 레이아웃 단계에서 나는 그렇게 할 수도 있거나 CSS 테이블 관련 디스플레이 값을 사용하여 열이나 행으로 만들 수 있습니다. 마크 업은 HTML 마크 업에서 레이아웃을 잠그지 않기 때문에 여러 가지 방법으로 스타일을 유지할 수 있습니다. html

의 div 태그에 대한 자주 묻는 질문 (FAQ)

html에서 div 태그를 사용하는 주요 목적은 무엇입니까?

html의 div 태그는 다른 페이지 요소를 캡슐화하고 HTML 문서를 섹션으로 나누는 컨테이너 장치입니다. 웹 개발자는 DIV 태그를 사용하여 HTML 요소를 함께 그룹화하고 한 번에 많은 요소에 CSS 스타일을 적용합니다. 컨텐츠를 구성하고 웹 레이아웃에 구조를 제공하는 방법입니다.

DIV 태그 사용에 대한 대안이 있습니까?

예, DIV 태그 사용에 대한 대안이 있습니다. html5는

,, ,

, 및와 같은 div 태그 대신에 사용할 수있는 새로운 시맨틱 요소를 도입했습니다. 이 태그는 코드를 읽고 이해하기 쉽게 만들 수 있도록 코드 내에 포함 된 컨텐츠 유형에 대한 자세한 정보를 제공합니다.

CSS를 사용하여 div 태그를 구성하는 방법은 무엇입니까?

DIV 태그를 선택자로 사용하여 DIV 태그를 선택할 수 있습니까? 예를 들어, div의 배경색을 빨간색으로 설정하려면 다음 코드를 작성합니다. div {

배경 색상 : 빨간색; 너무 많은 div 태그를 사용하면 HTML 문서를 혼란스럽고 읽기 어려울 수 있습니다. 각 DIV 태그가 브라우저가 처리 해야하는 요소 수에 추가되므로 웹 사이트의 성능에도 영향을 줄 수 있습니다. DIV 태그를 드물게 사용하는 것이 가장 좋습니다.

div 태그가 스팬 태그와 어떻게 다릅니 까?

div 태그와 스팬 태그의 주요 차이점은 컨텐츠를 처리하는 방법입니다. DIV 태그는 블록 레벨 요소를 생성하므로 새 라인에서 시작하여 사용 가능한 전체 폭을 차지합니다. 반면에 스팬 태그는 필요한만큼 폭을 차지하는 인라인 요소를 만듭니다.

DIV 태그가 SEO에 영향을 줄 수 있습니까?

DIV 태그 자체는 SEO에 직접 영향을 미치지 않지만 사용 방식은 사용할 수 있습니다. DIV 태그가 깨끗하고 잘 구조화 된 레이아웃을 생성하는 데 사용되는 경우, 검색 엔진 봇에 컨텐츠에 액세스 가능하고 읽을 수있게하여 SEO를 개선 할 수 있습니다.

DIV 태그의 클래스 또는 ID 란 무엇입니까?

DIV 태그의 클래스 또는 ID는 해당 특정 DIV를 식별하는 데 사용됩니다. 이는 CSS 스타일 또는 JavaScript 기능을 적용하는 데 유용 할 수 있습니다. ID는 고유하며 페이지 당 한 번만 사용할 수 있지만 클래스는 여러 번 사용할 수 있습니다.

html 이메일에서 div 태그를 사용할 수 있습니까?

예, HTML 이메일에서 div 태그를 사용할 수 있습니다. 그러나 일부 이메일 클라이언트는 DIV 태그의 모든 CSS 속성을 지원하지 않으므로 여러 클라이언트에서 이메일을 올바르게 표시하는 것이 가장 좋습니다.

DIV 태그 내의 콘텐츠를 중심으로하는 방법은 DIV 태그 내의 컨텐츠를 중심으로 CSS를 사용할 수 있습니다. 텍스트를 중심으로하는 경우 텍스트 정렬 속성을 사용할 수 있습니다. 블록 레벨 요소를 중심으로하는 경우 여백 속성을 사용할 수 있습니다. 예는 다음과 같습니다.

div {