HTML 및 CSS 입문자를 위한

초보자를 위한 HTML 및 CSS(21부): 웹을 위한 시맨틱 (4)

튜토리얼의 모든 비디오 HTML 및 CSS 초보자를 위한

다시 한 번 강조하지만, 튜토리얼의 시작 부분에서 제시된 요소에서 기적적인 것을 기대해서는 안 된다는 점을 지적해야 합니다. 시각적으로는 그다지 인상적이지 않습니다. 하지만 문서를 논리적이고 의미적으로 구조화하는 데 사용할 수 있기 때문에 흥미롭습니다.


탐색 영역

탐색 요소는 탐색 모음이나 추가 요소의 다른 영역에 의미론적 레이블을 지정하는 데 사용할 수 있습니다. 이 요소는 주로 다른 페이지 또는 추가 정보에 대한 하이퍼링크를 표시하는 데 사용됩니다.

예시

<nav> <a href="index.html">홈 페이지</a> <a href="html5.html">HTML5 학습</a> <a href="css.HTML">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>.



탐색 내 모든 요소를 사용할 수 있습니다. 여전히 목록을 사용하여 탐색을 정의할 수 있습니다. 그러나 다른 요소도 탐색 내에서 문제 없이 사용할 수 있습니다. 탐색은 문서 내에서 여러 번 표시될 수도 있습니다.

세부 정보 지정하기

또 다른 흥미로운 요소는 세부 정보입니다. 요소 이름에서 알 수 있듯이 콘텐츠에 대한 추가 정보를 지정하는 데 사용할 수 있습니다. 세부 정보 요소요약 요소와 함께 사용할 때만 정말 흥미로워진다는 점에 유의하세요. 아래에서 이 요소에 대해 자세히 알아보세요.

먼저 세부 정보 사용의 예입니다:

<article> <details> <summary>기사에 대한 참조...</summary> <ul> <li><a href="references1.html">링크 1</a></li> <li><a href="references2.html">링크 2</a></li> <li><a href="links3.html">링크 3</a></li> </ul> </details> <details> <summary>기사에 대한 소스 정보 ...</summary> <ul> <li><a href="quelle1.html">링크 4</a></li> <li><a href="quelle2.HTML">링크 5</a></li> <li><a href="quelle3.html"">링크 6</a></li> </ul> </details> </article>



세부 정보 요소의 콘텐츠는 방문자가 세부 정보에 포함된 요약 요소를 클릭할 때까지 숨겨집니다.

초보자를 위한 HTML 및 CSS(21부): 웹을 위한 시맨틱 (4)

예를 들어 동영상 플레이어와 연결하면 흥미로울 수 있습니다. 다음은 또 다른 예입니다:

<video id="film" width="320" height="180" autoplay> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video> <details open> <summary>비디오 플레이어 컨트롤 숨기기/표시</summary> <p> <button id="start" onClick="start()">시작/일시정지</button> <button id="mute" onClick="mute()">음소거</버튼> <button id="louder" onClick="louder()">더 크게</버튼> <button id="quieter" onClick="quieter()">더 조용하게</버튼> </p> </details>



페이지가 호출되면 처음에는 플레이어 창만 표시됩니다.

초보자를 위한 HTML 및 CSS(21부): 웹을 위한 시맨틱 (4)

그러나 방문자가 표시/숨기기 링크를 클릭하면 요약에 정의된 콘텐츠가 표시됩니다.

초보자를 위한 HTML 및 CSS(21부): 웹을 위한 시맨틱 (4)

사양에 따르면 요약 요소를 찾을 수 없는 경우 브라우저는 표준 콘텐츠를 표시해야 합니다.

세부 정보에 대한 열기 속성도 흥미롭습니다.

<details open> ... </details>



이 속성을 설정하면 페이지가 로드될 때 요약 요소의 콘텐츠를 바로 볼 수 있습니다.

요약

이제 요약 요소에 대해 자세히 살펴 보겠습니다.

<article> <details> <summary>기사에 대한 참조...</summary> <ul> <li><a href="verweise1.html">링크 1</a></li> <li><a href="verweise2.html">링크 2</a></li> <li><a href="links3.html">링크 3</a></li> </ul> </details> <details> <summary>기사에 대한 소스 정보 ...</summary> <ul> <li><a href="quelle1.html">링크 4</a></li> <li><a href="quelle2.HTML">링크 5</a></li> <li><a href="quelle3.html"">링크 6</a></li> </ul> </details> </article>



요약 내에서는 아직 열리지 않은 콘텐츠가 세부 정보와 함께 정의됩니다. 요약 덕분에 필요할 때만 표시되는 추가 정보를 포함할 수 있습니다.

물론 JavaScript를 사용하여 확장 및 축소 가능한 영역을 쉽게 구현할 수도 있습니다. 하지만 브라우저에서 JavaScript가 비활성화되어 있으면 애플리케이션이 작동하지 않습니다. 따라서 가까운 시일 내에 세부 정보요약에 대한 광범위한 지원이 필요합니다.

여백 영역 및 여백

추가 정보, 여백, 상호 참조 등은 HTML5에서 aside 요소를 사용하여 레이블을 지정할 수 있습니다. 이러한 방식으로 마크업된 콘텐츠는 전체 문서의 맥락에 있지만 문서와 직접적으로 연관되어 있지는 않습니다.

HTML5 사양에는 사이드 표시를 통해 표시된 영역에 어떤 차원을 적용해야 하는지 명시되어 있지 않다는 점에 유의하세요. 따라서 사이드사이드 콘텐츠는 예를 들어 여백으로 표시될 수도 있고 사이드바로 표시될 수도 있습니다.

다음 예는 사이드 영역의 정의를 보여줍니다.

<body> <header> <h1>PSD-Tutorials.de</h1> </header> <article> <h2>웹 앱 만들기(10부): jQuery 모바일(2)</h2> <p>이 자습서에서는 첫 번째 실제 jQM 페이지가 만들어집니다. 이를 위한 전제 조건은 이미 학습한 기본 HTML 프레임워크입니다.</p> <aside> <h3>추가 정보</h3> <ul> <li><a href="#/fn1">추가 정보를 사용할 수 있습니다....</a></li> </ul> </aside> </article> <aside> <nav> <h2>내비게이션</h2> <ul> <li><a href="#">홈페이지</a></li> <li><a href="#">연락처</a></li> </ul> </nav> </aside> </body>

시간 정보 추가

시간 정보는 새로운 Tim 요소를 사용하여 특별히 레이블을 지정할 수 있습니다. 이 요소의 특별한 특징은 사람과 기계가 시간 정보를 읽을 수 있다는 것입니다.

사람의 경우 시간 정보는 시간 요소에 기록됩니다. 시간 요소의 날짜/시간 속성은 브라우저에도 시간 정보를 읽을 수 있는 기회를 제공하기 위해 사용됩니다.

<p>우리는 4월 15일 오후 7시에 <time datetime="2014-04-15 19:00">에 만날 것입니다</time>.</p>.



이 시점에서 다시 한 번 말씀드리지만, 현재 브라우저에서는 시각적 효과가 없으며 시간 정보를 기계가 읽을 수 있도록 하기 위한 것임을 알려드립니다.

초보자를 위한 HTML 및 CSS(21부): 웹을 위한 시맨틱 (4)

텍스트 강조

마크 요소를 사용하면 단어 또는 전체 텍스트 구절을 시각적으로 강조할 수 있습니다. HTML5 사양에는 이 요소가 텍스트 콘텐츠와 함께 사용되어야 한다고 명시되어 있습니다. 또한 문맥과 특정한 관계가 있어야 합니다.

예를 들어 보겠습니다:

<p>이 자습서에서는 첫 번째 실제 jQM 페이지가 만들어집니다. 이를 위한 전제 조건은 이미 학습한 <mark>HTML 프레임워크</mark>입니다.</p>



브라우저에서 강조 표시를 구현하는 방법은 고정되어 있지 않습니다.

초보자를 위한 HTML 및 CSS(21부): 웹을 위한 시맨틱 (4)



그러나 Google Chrome과 Firefox는 모두 노란색 배경을 사용합니다.

대화 강조 표시

HTML5는 대화 상자를 별도로 강조 표시하도록 설계되었습니다. 이를 위해 대화 요소가 존재합니다. 그러나 대화 요소는 현재 Safari와 Google 카나리아, 즉 브라우저의 개발자 버전에서만 지원됩니다.

초보자를 위한 HTML 및 CSS(21부): 웹을 위한 시맨틱 (4)

다음은 다른 예시입니다:

<dialogue id="dialogue" style="width:50%;background-color:#F4FFEF;border:1px 점선 검은색;"> <p>이것이 상자의 내용입니다.</p> <button id="hide">닫기</button> </dialogue> <button id="show">콘텐츠 표시</button> </div> <script type="text/JavaScript"> (function() { var dialog = document.getElementById('dialog'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })(); </script>



버튼을 클릭하자마자 대화 상자가 표시됩니다. 모든 것을 작동시키기 위해 이전 예제에서는 HTML5, CSS 및 JavaScript를 조합하여 사용했습니다.

초보자를 위한 HTML 및 CSS(21부): 웹을 위한 시맨틱 (4)