XHTML 구조화 2: 사례 연구: W3school의 구조화 태그

어떤 경우에도 이 장을 건너뛰지 마세요. 이 장을 읽으면 기술을 향상시키고, 웹 페이지를 줄이며, 태그와 디자인 간의 차이에 대한 더 명확한 이해를 얻을 수 있습니다. 이 장의 이념은 쉽게 배울 수 있지만, 웹사이트의 성능을 크게 향상시키고, 디자인, 제작 및 웹사이트 업데이트의 편리성을 크게 향상시킬 수 있습니다.

이 장에서는 논리적이고 촉진적인 태그를 작성하는 방법을 배우게 됩니다. 이를 통해_bandwidth 트래픽을 약 50% 감소시키고, 서버 부하와 스트레스를 줄이면서 웹사이트의 로드 시간을 줄일 수 있습니다. 효과가 없는 요소를 제거하고, 아무런 이점이 없는 나쁜 습관을 개선함으로써 이 목표를 달성할 수 있습니다.

이 나쁜 습관은 인터넷의 많은 사이트에 있으며, 특히 CSS 코드와 주로 테이블 기반 레이아웃을 혼합한 사이트에 많이 있습니다. 이 방법은 미숙하며 비효율적이며, 다른 분야에서 많은 경험을 가진 디자이너들에게도 마찬가지입니다. 또한, 이 문제가 발생할 가능성은 모두 동일합니다. 그들은 직접 코드를 작성하는 사이트든, Dreamweaver와 GoLive와 같은 보이는 편집 도구를 사용하여 사이트를 생성하는 사이트든 그렇습니다.

이 장에서는 이러한 일반적인 오류를 제기하여 이를 인식하고 방어하고, 오류를 수정하는 방법을 배울 수 있습니다. 우리는 유일한 식별자 속성 (id)을 자세히 설명하며, 이는 여러분이 어떻게 매우 간결한 XHTML 코드를 작성할 수 있는지 보여줍니다. 여기에는 혼합 레이아웃이나 순수 CSS 레이아웃을 생성하는 것에 관계없이 관련됩니다.

모든 요소는 구조화되어야 합니까?

지난 장에서 설명한 것처럼, 각 요소는 구조화될 수 있습니다. CSS는 순서 있는 또는 순서 없는 목록을 완전한 네비게이션 바로 displaying할 수 있으며, 이 중에는 반전 버튼 효과도 포함됩니다. 문서의 내용은 일반적인 요소로 표시될 수 있으며, 이 요소는 특정 구조화 속성을 사용하여 그들이 웹 디자인에서 담당하는 의미적 역할을 나타냅니다.

2006년에 CodeW3C.com의 첫 번째 중국어 테스트 버전을 만들었습니다. 초기에는 CSS를 사용하여 레이아웃을 구성하고, XHTML을 사용하여 문서를 구조화했습니다. 이 가운데 각 요소는 구조화되었습니다. 제목부터 목록, 파라그래프에 이르기까지 모두 구조화되었습니다. CodeW3C의 각 페이지에서는 반전 효과가 있는 메인 버튼과 두 번째 메뉴 버튼을 볼 수 있습니다. 이 두 구성 요소의 XHTML 코드는 다음과 같습니다:

<div id="header"><h1><a href="/">codew3c 온라인 교육</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html 강의">html 강의</a></li>
<li id="x"><a href="/x.asp" title="XML 강의">XML 강의</a></li>
<li id="b"><a href="/b.asp" title="브라우저 스크립트">브라우저 스크립트</a></li>
<li id="s"><a href="/s.asp" title="서버 스크립트">서버 스크립트</a></li>
<li id="d"><a href="/d.asp" title="dot net 교육">dot net 교육</a></li>
<li id="m"><a href="/m.asp" title="미디어 교육">미디어 교육</a></li>
<li id="w"><a href="/w.asp" title="웹사이트 만들기 가이드">웹사이트 만들기 가이드</a></li>
</ul>
</div>

div, id 및 다른 도구

적절하게 사용된 경우, div는 구조화된 마크업의 좋은 도구가 될 수 있으며, id는 매우 유용한 작은 도구로, 매우 간결한 XHTML을 작성할 수 있게 하고, CSS를 효과적으로 사용하여 표준 문서 객체 모델 (DOM)을 통해 사이트에 복잡하고 정교한 행동을 추가할 수 있습니다.

W3C는 그 가장 최신의 XHTML2 초안의 XHTML 구조 모델에서 div를 이렇게 정의합니다:

div 요소는 id, class 및 role 속성과 함께 사용하여 문서에 추가적인 구조를 제공하는 일반적인 기계를 제공합니다. 이 요소는 내용에 표현 스타일을 정의하지 않습니다. 따라서, 작성자는 이 요소를 스타일 시트, xml:lang, 속성 등과 함께 사용하여 XHTML를 자신의 필요와 취향에 맞게 조정할 수 있습니다.

div는 division의 약자입니다. division은 분할, 영역, 그룹을 의미합니다. 예를 들어, 여러 링크를 모아서 문서의 하나의 division이 형성됩니다.

구조의 일반적인 메커니즘

HTML을 작성하는 모든 사람은 문단과 제목과 같은 일반적인 요소에 대해 잘 알고 있지만, div에 대해서는 그렇지 않을 수도 있습니다. W3C의 설명에서 div 요소 이해의 열쇠를 찾을 수 있습니다. "구조를 추가하는 일반적인 메커니즘"입니다.

이 사이트의 메인 페이지에서는 강의 목록을 div 안에 포장했습니다. 이는 강의 목록이 본문의 어떤 요소의 일부도 아니기 때문입니다. h2 요소는 각 강의의 제목을 표시하며, ul 목록 요소는 각 강의의 상세 목록을 표시합니다. 하지만 더 크고 구체적인 의미에서, 이 강의 목록은 구조화된 역할을 합니다. 즉, 두 번째 네비게이션 구성 요소입니다. 이 역할을 강조하기 위해 navsecond 이라는 id를 사용하여 이 div를 표시했습니다.

<div id="navsecond">
<h2>HTML 강의</h2>
<ul>
<li><a href="/html/index.asp" title="HTML 강의">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML 강의">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS 강의">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP 강의">TCP/IP</a></li>
</ul>
<h2>XML 강의</h2>
<ul>
<li><a href="/xml/index.asp" title="XML 강의">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL 언어">XSL</a></li>
... ...
... ...
</div>

任何命名都可以使用。"Gladys"과 "orangebox"은 모두 XHTML의 명명 규칙에 완전히 맞습니다. 하지만 의미의 (semantic) 또는 메타 구조화 (meta-structural) 명명이 가장 좋습니다(즉, 요소가 수행하는 기능을 설명하는 명명입니다).

고객이 파란색을 선택할 때, 사이트의 일부를 "orangebox"(오렌지 박스)이라고 이름 지정하는 것이 매우 어리석을 것 같습니다. 아래의 경우에서 더 어리석을 것 같습니다. 마지막 배달까지 6개월이 남았을 때, 스타일 시트를 조정하려고 했지만, "Gladys"(여성 이름)가 가이드 라인,サイ드바, 또는 검색 상자를 나타내는지 기억할 수 없었습니다.

따라서, id를 "menu"、"content" 또는 "searchform"으로 표시하면 기억하는 데 도움이 됩니다. 더 나아가, 태그는 디자인이 아니며, 구조가 좋은 페이지는 원하는 모양으로 포맷될 수 있습니다. 이렇게 하면,纯粹 CSS 레이아웃이나 혼합 레이아웃을 사용하든, 표현 태그를 사용하여 생각하고 작업하는 습관을 완전히 버릴 수 있습니다.

id 대비 class

id 속성은 XHTML에서 새로운 것이 아닙니다; class 속성이나 div 요소도 마찬가지입니다. 이들은 모두 HTML 시대로 거슬러 올라갈 수 있습니다. id 속성은 요소에 독특한 이름을 할당합니다. 각 이름은 할당된 페이지에서만 사용할 수 있습니다. (예를 들어,如果你的页面包含 id 为 content 的 div，那么另外一个 div 또는 다른 어떤 요소도 이 이름을 사용할 수 없습니다. 반대로, class 속성은 페이지에서 여러 번 사용할 수 있습니다. (예를 들어, 페이지의 다섯 개의 단락은 "small" 또는 "footnote"라는 이름의 class 이름을 사용할 수 있습니다). 아래의 표시는 id와 class의 차이를 설명하는 데 도움이 됩니다:

<div id="searchform">검색 양식 요소는 여기에 위치합니다. 이
페이지의 섹션은 독특합니다.</div>
<div class="blogentry">
   <h2> 오늘의 블로그 기사</h2>
   <p> 블로그 내용은 여기에 있습니다.</p>
   <p> 블로그 내용의 또 다른 단락입니다.</p>
   <p> 페이지에 많은 단락이 있듯이, 페이지에 많은 단락이 있습니다.
   블로그에 많은 기사가 있을 수 있습니다. 블로그 페이지는 다음과 같은 것을 사용할 수 있습니다.
   클래스 "blogentry"(또는 다른 어떤 클래스)의 여러 인스턴스가 있습니다.
   class).</p>
</div>
<div class="blogentry">
   <h2>어제의 블로그 글</h2>
   <p>실제로, 여기서 우리는 다른 클래스 div 내에 있습니다.
   "blogentry."</p>
   <p>쥐처럼 번식합니다.</p>
   <p>이 페이지에 10개의 블로그 글이 있으면,
   class="blogentry"로 지정된 div가 10개 있을 수 있습니다.</p>
</div>

이 예제에서 searchform이라는 이름의 div는 검색 양식을 포함한 페이지 영역을 포장하는 데 사용되며, div class="blogentry"는 블로그의 각 문서 엔트리를 포장하는 데 사용됩니다. 페이지에 단 하나의 검색 양식이 있기 때문에, 우리는 이 유일한 구성 요소를 id로 표시했습니다. 그러나 블로그는 많은 (문서) 엔트리를 가지고 있기 때문에 class 속성이 이 상황에 적용됩니다. 마찬가지로, 뉴스 사이트는 일반적으로 여러 개의 div를 가지고 있으며, 이러한 div의 클래스는 "newsitem"이나 다른 이름으로命名为 될 수 있습니다.

하지만 모든 사이트가 div를 필요로하지 않습니다. 블로그 사이트는 단순히 h1, H2, h2 제목과 <p> 단락만 사용할 수 있습니다. 뉴스 사이트도 마찬가지입니다. 여기서 blogentry 클래스를 가진 div를 보여주는 것은 사이트에 div를 너무 많이 넣는 것을 권장하는 것이 아니라, 동일한 HTML 문서에서 여러 번 클래스를 사용할 수 있지만 id는 한 번만 사용할 수 있다는 원칙을 보여주기 위해입니다.

스티커 이론

id 속성을 스티커로 비유하여 생각해보면 도움이 될 것입니다. 저는 유제비를 사야 한다는 것을 기억하기 위해 냉장고에 스티커를 찍고, 연락처에 스티커를 붙여逾期 미납하는 고객에게 전화를 걸어야 한다는 것을 기억하도록 합니다. 또한, 이달 15일까지 납부해야 하는 청구서를 기억하기 위해 청구서 가지에 스티커를 붙입니다.

id는 문서의 특수한 영역을 표시하여 해당 영역이 특별한 처리가 필요한지 알려주는 데 사용됩니다. 이 점에서 id 속성은 스티커와 유사합니다. 특별한 처리를 실현하기 위해 특별한 id를 사용하여 스타일 시트에서 여러 규칙을 작성하거나 JavaScript 파일에 몇 줄의 코드를 추가해야 합니다. 예를 들어, CSS 파일에 특정한 규칙이 있으며, 이 규칙은 searchform이라는 id를 가진 div 내의 요소에만 적용됩니다.

특정한 CSS 규칙의 일렬로 사용되는 id 속성이 강력한 물체(자석)로 사용될 때, 그것은 CSS 선택자라고 합니다. 많은선택자 생성방법은 많지만, id는 쉽게 사용되고 다양한 용도가 있습니다.

id의 힘

id 속성은 신비로운 강력합니다. 다음과 같은 능력을 가집니다:

  • 스타일 시트 선택자로 사용되어, 최소화된 XHTML을 작성할 수 있는 능력을 제공합니다.
  • 과时的 name 속성을 대체하는 하이퍼텍스트의 목표 앵커로 사용됩니다.
  • DOM 기반 스크립트에서 특정 요소를 위치시키는 방법으로 사용됩니다.
  • 객체 요소의 이름으로 사용됩니다.
  • 종합적인 용도 처리(일반적인 처리) 도구로 사용됩니다(W3C의 예제에서는, "HTML 페이지에서 데이터를 데이터베이스로 추출하거나 HTML 문서를 다른 형식으로 변환하는 등의 경우에, 도메인 인식 도구로 사용됩니다.").

id의 규칙

id 값은 문자나 언더스코어로 시작해야 합니다; 숫자로 시작할 수 없습니다. W3C 검증은 이 오류를 잡지 않지만, XML 파서는 잡습니다. 또한, id를 양식에서 JavaScript와 함께 사용할 때, id 이름과 값은 유효한 JavaScript 변수여야 합니다. 공백과 하이픈, 특히 하이픈은 허용되지 않습니다. 그리고 class나 id 이름에 언더스코어를 사용하는 것은 좋지 않은 생각입니다. 이는 CSS2.0(또는 일부 브라우저)의 제한 때문입니다.

의미 기호와 접근성

지금까지 널리 사용되는 XHTML 요소(특히 div와 id)에 대해 논의했습니다. 이제 이 사이트의 홈페이지에 대한 예제를 보겠습니다. 먼저 이 브라우저 헤더 위치에 있는 메뉴를 돌아보겠습니다:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html 강의">html 강의</a></li>
<li id="x"><a href="/x.asp" title="XML 강의">XML 강의</a></li>
<li id="b"><a href="/b.asp" title="브라우저 스크립트">브라우저 스크립트</a></li>
<li id="s"><a href="/s.asp" title="서버 스크립트">서버 스크립트</a></li>
<li id="d"><a href="/d.asp" title="dot net 교육">dot net 교육</a></li>
<li id="m"><a href="/m.asp" title="미디어 교육">미디어 교육</a></li>
<li id="w"><a href="/w.asp" title="웹사이트 만들기 가이드">웹사이트 만들기 가이드</a></li>
</ul>
</div>

우리는 일곱 개의 링크를 가지고 있으며, 각 링크는 해당 내용에 맞는 id를 할당받습니다. 예를 들어, h id는 HTML 교육에 맞게, 이와 같이 계속됩니다. 이 링크들은 menu라는 목록 요소에 포함되어 있으며, menu id는 이 목록의 기능을 나타냅니다 - 메뉴 목록, 그리고 더 외곽의 navfirst div는 페이지 내 해당 섹션을 표시하며, 주요 내용(maincontent), 사이드바(sidebar), 푸터(footer)와 같은 요소와 구분합니다.

div와 ul 요소는 실제 구조를 제공하며, 내용의 기능(네비게이션 패널)과 문서 내 위치(페이지 헤더 위치)를 명시합니다. 반면 전통적인 테이블 레이아웃은 데이터에 대한 의미 정보를 제공하지 않으며, 네트워크_bandwidth를 3배 더 소비할 수 있습니다.

이 마크업은 img 태그를 포함하지 않기 때문에 width, height, background, border 등과 같은 속성에 대한 문제가 발생하지 않습니다. 또한 테이블 셀을 사용하지 않기 때문에 관련 속성에 대한 문제도 발생하지 않습니다. 매우 깔끔하고 작은 마크업이며, 이를 이해할 수 있는 모든 정보를 제공합니다.

CSS와의 협력을 통해 이 마크업은 방문자에게 신뢰할 수 있는 빠르게 로드되는 레이아웃을 제공합니다. 또한 방문자에게 더 유연하고 다양한 외관을 만들어 줄 수 있는 가능성을 제공합니다. 그리고 CSS가 없는 환경에서도 구조화된 마크업은 모든 내용을 혼란 없이 제공할 수 있습니다.

목요한 독자라면 이미 알고 있을 것입니다. a 요소에 포함된 텍스트는 브라우저에 표시되지 않습니다. 이는 구조화된 마크업과 CSS의 완벽한 협력 덕분입니다. 몇 줄의 CSS 규칙을 통해 트리거 메커니즘을 정의할 수 있으며, 사용자가 그래픽 브라우저를 사용할 때는 아름다운 네비게이션 버튼을 볼 수 있으며, 사용자가 텍스트 레더를 사용할 때는 전체 텍스트를 받을 수 있습니다. 이렇게 하면 모든 사용자에게 동일한 내용이 제공됩니다.

또한, 태그가 이미지와 테이블 셀을 포함하지 않기 때문에, 이 네비게이션 컴포넌트는 구조를 변경하지 않고 사이트 내의 모든 페이지에서 참조될 수 있으며, 다른 시각적 효과를 부여할 수 있습니다. 간단히 말해서, 코드를 모듈화함으로써 코드의 재사용성을 높였습니다.