[H48] ol, ul, dl을 이용하여 '목록' 또는 '링크 목록' 만들기

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H48.html

---

목록은 목록 요소 사용하기~! 이것이 마크업의 올바른 사용 방법입니다.

---

기술설명

이 기술은 목록을 만들 때 특성에 맞는 목록 요소를 사용하는 것입니다.

'ol 요소'는 순서가 중요한 목록에 사용하며, 'ul 요소'는 목록의 순서가 중요하지 않은 목록에 사용합니다.

'dl 요소'는 용어와 그에 대한 정의를 그룹화 하여 목록으로 만드는데 사용됩니다.

이렇게 목적에 맞게 목록 요소를 사용하면 목록에 대한 가독성을 높일 수 있지만 모든 목록에 이런 기술이 필요한 것은 아닙니다.

예를 들어 쉼표(,)로 나열된 항목들을 목록 요소로 만들 필요는 없습니다.

 

시각적으로만 목록처럼 보이게 하고 싶다면, 목록 요소를 사용하지 말고 항목 앞에 별표를 넣거나 항목 뒤에 'br 요소'를 넣어 목록처럼 보이게 할 수도 있습니다.

 

일부 '보조 기술'은 목록에서 목록으로 또는 항목에서 항목으로 이동할 수 있게 합니다.

이 기능을 이용하고 싶지만 시각적으로는 목록이 아닌 것처럼 보이게 하고 싶다면, 목록 요소를 사용한 다음에 CSS를 이용하여 표현 방법을 변경시키면 됩니다.

 

'ol 요소'와 'ul 요소'는 링크 목록을 만드는데 유용합니다. 링크를 목록으로 만들면 스크린 리더 사용자가 첫 번째 항목에서 마지막 목록까지 순서대로 이동하거나, 다음 목록으로 뛰어 넘을 수 있습니다. 또는 '링크 목록'을 위회할 수도 있게 됩니다.

 

 

예시

[예제1] 요리과정:  절차나 과정이 순서대로 진행되어야 하는 방식

<ol>
    <li>그릇, 시리얼, 우유, 숟가락을 준비한다.</li>
    <li>그릇에 시리얼을 담는다.</li>
    <li>그릇에 우유를 넣는다.</li>
    <li>우유와 시리얼을 섞은 다음 먹는다.</li>
</ol>

 

 

[예제2]  재고물품: 순서가 필요 없는 목록 방식

 <ol>
      <li>그릇</li>
      <li>우유</li>
      <li>시리얼</li>
      <li>숟가락</li>
</ol>

 

 

[예제3] 용어와 정의를 그룹화한 목록 방식

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

 

 

[예제4] dl요소를 사용하여 연락처 정보 표시하기

<dl>
    <dt><span>이름:</span></dt><dd><span>고길동</span></dd>
    <dt><span>연락처:</span></dt><dd><span>010-xxxx-xxxx</span></dd> 
    <dt><span>email:</span></dt><dd><span>gildonggo@dooli.com</span></dd>
</dl>

<style>
    dt, dd{float: left;margin: 0;padding: 0;}
    dt{clear:both;font-weight: bold}
    dt span{display: inline-block; width: 70px;}
    dd span{display: inline-block; margin-right: 5px;}
</style>

 

 

[예제5] 링크 목록 만들기

<a name="categories" id="categories"></a><h2>제품별 카테고리</h2>
<ul class="navigation">
    <li><a href="kitchen.html">주방/a></li>
    <li><a href="bedbath.html">욕실/a></li>
    <li><a href="dining.html">조리</a></li>
    <li><a href="lighting.html">조명</a></li>
    <li><a href="storage.html">수납</a><li>
</ul>

 

CSS를 이용하여 목록을 여러 가지 모양으로 바꿀 수 있습니다.

 목록의 머리글 기호와 여백을 조정하여 항목을 인라인으로 만들어 수평으로 배치 할 수 있습니다.

ul.navigation { list-style:none ; padding:0 }
ul.navigation li { display:inline}

 

또는 항목을 블록으로 만든 다음 float속성을 이용하여 수평으로 배치할 수도 있습니다.

ul.navigation { list-style:none ; padding:0 }
ul.navigation li { display:block ; float:left }

 

 

자료 

HTML 4.01 순서 없는 목록(UL), 순서 있는 목록(OL) 및 목록 항목(LI)

HTML 4.01 정의 목록: DL, DT 및 DD 요소

 

 

관련기술

H40: 설명 목록 사용

 

 

점검절차

1. 목록처럼 보이는 콘텐츠가 'ul 요소'로 만들어 졌는지 확인합니다.

2. 숫자가 매겨진 목록처럼 보이는 콘텐츠가 'ol 요소'로 만들어 졌는지 확인합니다.

3. 용어와 정의로 목록처럼 보이는 콘텐츠가 'dl 요소'로 만들어 졌는지 확인합니다.

 

---

https://link.coupang.com/a/cl4UpZ

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석: 한 권으로 끝내는 웹 기본 교과서 전면 개정판 - 프

https://link.coupang.com/a/cl4UBK

Do it! 인터랙티브 웹 페이지 만들기 - HTML/CSS | 쿠팡

https://link.coupang.com/a/cv9oir

[삼성전자 공식파트너] 갤럭시북4 15.6 코어I5 13세대 가성비 노트북 한컴오피스팩 동봉 - 노트북 |

*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 

---

나의 정리

이 기술은 목록 요소에 대한 사용방법을 말하고 있습니다.

 콘텐츠에 순서 없이 어떤 항목을 쭉 나열하는 목록의 경우 '비 순서 목록(unordered list)' 요소인 'ul 요소'로 목록을 만들면 됩니다.

 책의 목차나, 요리 순서처럼 순서와 단계가 중요한 목록의 경우 '순서 목록(ordered list)' 요소인 'ol 요소'로 목록을 만들면 됩니다.

 사전이나 용어 설명집처럼 용어와 그 용어를 설명하는 목록의 경우 '정의 목록(definition list)' 요소인 'dl 요소'로 목록을 만들면 됩니다.

 

'주 메뉴(=네비게이션)'처럼 링크로 된 그룹을 'ul 요소'나 'ol 요소'를 이용하여 목록으로 만들면, '스크린 리더' 같은 '보조 기술'들이 사용자에게 쉽게 이동하고 접근할 수 있는 기능을 제공하므로 꼭 참고하시기 바랍니다.

 

목록은 목록 요소 사용하기~! 이것이 마크업의 올바른 사용 방법입니다.

---

 

H48: Using ol, ul and dl for lists or groups of links

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H48.html

H48: Using ol, ul and dl for lists or groups of links | Techniques for WCAG 2.0