현재 HTML 문서는 일반적으로 div 요소를 사용하여 구조화됩니다. 그런 다음 이러한 컨테이너의 서식과 위치 지정은 일반적으로 CSS를 사용하여 수행됩니다. 물론 이 방식은 스크린 리더와 같은 소프트웨어에서는 특정 콘텐츠의 의미를 인식할 수 없기 때문에 쓸모가 없습니다. 하지만 새로운 구조화 요소를 사용하면 달라질 것입니다.
가장 중요한 두 가지 새로운 요소는 섹션과 글이며, 이 튜토리얼의 초점입니다.
문서 레이블 지정하기
문서 요소를 사용하여 텍스트(포럼 글, 신문 기사 등)를 문서로 레이블을 지정할 수 있습니다. 다음 예는 일반적인 문서의 정의를 보여줍니다.
<article> <h1>웹 앱 만들기(09부): jQuery 모바일(1)</h1> <p>jQuery는 의심할 여지 없이 가장 잘 알려진 JavaScript 프레임워크 중 하나입니다. 이것이 바로 "클래식" 웹사이트에서 이미 수천 번 사용된 jQuery가 사용되는 이유입니다 ...</p> ... </article>
기사 요소 덕분에 콘텐츠를 의미론적으로 구조화할 수 있습니다.
블로그가 그 좋은 예입니다.
<article> <header> <h1>웹 앱 만들기(09부): jQuery 모바일(1)</h1> <p>게시된 날짜: <time pubdate="pubdate">24/05/2014</time></p> </header> <p>jQuery는 의심할 여지 없이 가장 잘 알려진 JavaScript 프레임워크 중 하나입니다. 이것이 바로 "클래식" 웹사이트에서 이미 수천 번 사용된 jQuery가 사용되는 이유입니다...</p> ... <footer> <p><small>저작권: PSD-Tutorials.de</small></p> </footer> </article>
이 예에서 기사 요소는 일반적인 헤더, 메인 및 푸터 영역으로 나뉩니다. 그리고 이러한 구분은 블로그에서 매우 자주 발견됩니다.
섹션 만들기
섹션 요소로 계속 진행합니다. 섹션 요소는 페이지를 여러 섹션으로 나눕니다. 섹션, 챕터, 탭 등이 될 수 있습니다. 예를 들어 섹션을 사용하여 소개와 최신 뉴스 등의 영역을 논리적으로 구분할 수 있습니다.섹션은 실제 콘텐츠 관련 측면에 따라 콘텐츠를 세분화하는 데 사용됩니다. 이 튜토리얼의 마지막에 섹션과 div의 차이점에 대해 다시 설명하겠습니다.
다음 예시는 일반적인 블로그 구조를 보여줍니다. 하지만 이 구조에는 많은 블로그에서 실제로 필요한 댓글 섹션도 포함되어 있습니다. 이 댓글 영역은 섹션 요소 내에 정의됩니다. 섹션 영역 내의 개별 댓글은 각각 글 요소로 묶여 있습니다.
<article> <header> <h1>웹 앱 만들기(09부): jQuery 모바일(1)</h1> <p>게시일: <time pubdate="pubdate">24/05/2014</time></p> </header> <p>jQuery는 의심할 여지 없이 가장 잘 알려진 JavaScript 프레임워크 중 하나입니다. 그 결과, jQuery는 이미 "클래식" 웹사이트에서 수천 번 사용되고 있습니다...</p> ... <section> <h2>Comments</h2> <article> <header> <h3>Comments by: Newsfriend</h3> <p><time pubdate datetime="2024-10-05T20:10-07:00">한 시간 전</time></p> </header> <p>자습서 고마워요!</p> </article> <article> <header> <h3>Comments by: Becker <p><time pubdate datetime="2024-10-05T20:10-07:00">두 시간 전</time></p> </header> <p>Great! 도움이 되었습니다.</p> </article> </section> </article>
다시 한 번 말씀드리지만, 헤더, 푸터 등과 같이 여기에 사용된 요소에 대해 더 자세히 설명할 것입니다. 이 시점에서 이 정도만 말씀드리면, 이러한 요소를 사용하여 콘텐츠를 머리글과 바닥글 영역으로 나눌 수 있으므로 문서를 더욱 논리적으로 구조화할 수 있습니다.
다른 예시를 통해 글과 섹션 요소의 조합을 더 자세히 설명하겠습니다. 섹션 요소는 실제로 기사를 각각 고유한 제목을 가진 논리적 콘텐츠 영역으로 나누는 데 사용할 수 있습니다.
<article> <h1>앱 개발</h1> <p>여기에서 웹 앱을 만드는 방법에 대해 알아볼 수 있습니다.</p> <section> <h2>웹 앱 만들기(09편): jQuery 모바일(1)</h2> <p>jQuery는 의심할 여지 없이 가장 잘 알려진 JavaScript 프레임워크 중 하나입니다.</p> </section> <section> <h2>웹 앱 만들기(08편)</h2> </p> </section> <h2>웹 앱 만들기(08편): jQuery의 빠른 시작</h2> <p>JavaScript는 결국 모든 종류의 흥미로운 일을하는 데 사용할 수있는 웹 사이트에 좋은 것입니다.</p> </section> </article>
섹션 요소 내에 기사 요소를 정의할 수도 있습니다. 대표적인 예로 이미 표시된 것처럼 댓글 섹션을 들 수 있습니다. 그러나 블로그에서 다루는 주제로 섹션을 세분화할 수도 있습니다.
다음은 또 다른 예입니다:
<section> <h1>앱 개발</h1> <article> <h2>웹 앱 만들기(09부): jQuery 모바일(1)</h2> <p>jQuery는 의심할 여지 없이 가장 잘 알려진 JavaScript 프레임워크 중 하나입니다.</p> </article> <article> <h2>웹 앱 만들기(08부): jQuery의 빠른 시작</h2> <p>JavaScript는 웹사이트를 위한 훌륭한 도구이며, 결국 모든 종류의 흥미로운 일을 하는 데 사용할 수 있습니다.</p> </article> </section>
섹션 요소는 다른 섹션 요소를 포함할 수도 있습니다. 따라서 중첩이 허용됩니다. 다음은 또 다른 예시입니다:
<section> <h1>PSD-Tutorials.de</h1> <section> <h2>Welcome</h2> <p>우리는...</p> </section> <section> <h2>Tutorials</h2> <P>이것은 우리의 최신 튜토리얼...</p> </section> <h2>자습서...</p> </section> <aside> <p>Contact</p> </aside> </section> <footer> <p>(c) 2014 PSD-Tutorials.de</p> </footer>
이 섹션을 중첩하면 다음과 같은 구조가 됩니다:
1. PSD-Tutorials.de 1.1 환영 1.2 튜토리얼 1.3 연락처
- (c) 2014 PSD-Tutorials.de
따라서 이러한 구조화도 가능합니다.
div, 기사 및 섹션의 차이점
물론 div, 기사 및 섹션의 차이점을 이해하는 것은 쉽지 않습니다. 사실 기사 요소는 주로 블로그 글을 구조화하기 위해 정의되었습니다. 섹션 요소는 실제로 기사보다 한 단계 아래에 있습니다. 제목도 항상 섹션 요소 내에 정의해야 합니다. 실제로 제목이 정의되어 있지 않더라도 적어도 이론적으로는 해당 요소 내에 제목을 지정할 수 있어야 합니다.
물론 HTML5에서도 DIV 요소를 사용하지 않는 것은 아니지만 여전히 사용해야 합니다. 예를 들어 요소를 요약할 때 항상 흥미롭습니다.
마지막으로 지금까지 소개한 요소의 시각적 효과에 대해 다시 한 번 짚고 넘어가겠습니다. 실제로 해당 서식에는 CSS가 필요합니다. 표시된 요소의 일반적인 사용은 브라우저에서 아무런 영향을 미치지 않습니다. 여기서는 의미론적으로만 콘텐츠를 구조화하는 것입니다. 시각적 모양과 관련된 모든 것은 스타일시트를 통해 제어됩니다.
