3-8. 각종 목록을 표현하는 요소

2017. 10. 12. 11:29ㆍ웹 표준 퍼블리싱 바이블

1. 일반적으로 목록작성에는 <ul>요소(비순차적 목록 unordered list)또는 <ol>요소(순차적 목록 ordered list)를 사용하며, 각 항목은 <li>요소(list item)로 정의합니다. <ul>, <ol>요소 모두 블록 레벨 요소이며, <li>이외의 요소를 포함할 수 없습니다. <li>요소 또한 블록 레벨 요소로서 인하인 요소와 텍스트를 포함할 수 있고, 또 다른 블록 레벨 요소를 포함할 수 있습니다. 또, 정의형 목록을 표현하는 <dl>요소(definition list)가 있는데, 이는 <dt>, <dd>요소를 포함합니다. <dt>요소는 특정 요소를, <dd>요소는 그레 대한 정의를 지정하는 것이 일반적입니다.

 

2. 비순차적 목록 ul요소

2-1. <ul>요소를 활용한 메뉴제작 소스코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>3-8. 각종 목록을 표현하는 요소</title>
</head>
<body>
 <h2>Main menu</h2>
 <ul>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portpolio</a></li>
  <li><a href="#">Contact US</a></li>
 </ul>
</body>
</html>

 

 

-실행결과

 

 

2-2. 목록의 하위목록이 있는 경우에는 특히 유의해야 합니다. <ul>이나 <ol>의 자식요소로는 <li>요소만이 가능하므로 새로운 목록이나 다른 요소가 <ul>의 자식으로 올 수는 없습니다. 이럴 경우 <li>요소 안에 새로운 목록을 표현해야 합니다.

- 소스코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>3-8. 각종 목록을 표현하는 요소</title>
</head>
<body>
 <h2>Main menu</h2>
 <ul>
  <li>
   <a href="#">About</a>
   <ul>
    <li><a href="#"></a>Company Info</li>
    <li><a href="#">CEO Message</a></li>
    <li><a href="#">Location</a></li>
   </ul>
  </li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portpolio</a></li>
  <li><a href="#">Contact US</a></li>
 </ul>
</body>
</html>

 

 

- 실행결과

 

3. 순차적 목록 ol요소

3-1. 페이지의 내용 중에서 일 처리에 관한 프로세스를 표현하거나, 각종 차트의 순위를 표현하는 데에 좋습니다.

- 소스코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>3-8. 각종 목록을 표현하는 요소</title>
</head>
<body>
 <h2>Fun up 키워드</h2>
 <ol>
  <li>뷔페에서 쫓겨난 이...</li>
  <li>식인 상어와 헤엄치...</li>
  <li>여자들만 아는 아픔</li>
  <li>중국 식당의 한국...</li>
  <li>수박 스테이크</li>
 </ol>
</body>
</html>

 

 

- 실행결과

 

3-2. 번호 목록 대신 알파벳이나 로마자가 표현되도록 하고 싶다면, "type" 속성을 적용합니다. type에 적용할 수 있는 값은 "a, A, i, l"등입니다.

- 소스코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>3-8. 각종 목록을 표현하는 요소</title>
</head>
<body>
 <h2>Fun up 키워드</h2>
 <ol type="a">
  <li>뷔페에서 쫓겨난 이...</li>
  <li>식인 상어와 헤엄치...</li>
  <li>여자들만 아는 아픔</li>
  <li>중국 식당의 한국...</li>
  <li>수박 스테이크</li>
 </ol>
</body>
</html>

 

 

- 실행결과

 

3-3. HTML5에서는 목록 순서의 시작 값을 지정할 수도 있으며, 그 값을 거꾸로 나타낼 수도 있습니다. 단, 일부 브라우저에서만 확인이 가능합니다.

 다음은 6부터 시작하는 방법과 거꾸로 표현하는 방법입니다. 시작 값을 지정하려면 "start"속성을, 거꾸로 표현하려면 "recersed"속성이 필요합니다.

- 시작 값을 지정한 소스코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>3-8. 각종 목록을 표현하는 요소</title>
</head>
<body>
 <h2>Fun up 키워드</h2>
 <ol start="6">
  <li>뷔페에서 쫓겨난 이...</li>
  <li>식인 상어와 헤엄치...</li>
  <li>여자들만 아는 아픔</li>
  <li>중국 식당의 한국...</li>
  <li>수박 스테이크</li>
 </ol>
</body>
</html>

 

 

- 실행결과

 

- "recersed" 속성 소스코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>3-8. 각종 목록을 표현하는 요소</title>
</head>
<body>
 <h2>Fun up 키워드</h2>
 <ol reversed="">
  <li>뷔페에서 쫓겨난 이...</li>
  <li>식인 상어와 헤엄치...</li>
  <li>여자들만 아는 아픔</li>
  <li>중국 식당의 한국...</li>
  <li>수박 스테이크</li>
 </ol>
</body>
</html>

 

 

- 실행결과

 

※ "reversed"는 순서가 바뀌는 것이라니라 번호만 거꾸로 표현하는 것입니다.

 

4. 정의형 목록 dl요소

 "용어"와 "그 설명"으로 구성된 목록을 "정의형 목록(definition list)"이라고 합니다. 정의형 목록은 <dl>요소로 정의하고 용어를 나타내는 <dt>요소(definition term)와 그설명인 <dd>요소(definition description)를 표현합니다. <dl>요소는 블록 레벨 요소이지만 <dt>, <dd>요소 이외의 요소를 포함할 수 없습니다. <st>요소는 인라인 요소이며, 인라인 요소와 텍스트를 포함할 수 있습니다. <dd>요소는 블록 레벨 요소로 인라인 요소와 텍스트를 포함할 수 있고, 또 블록 레벨 요소를 포함할 수 있습니다. 메뉴를 작성하는 예제를 만들어 보겠습니다.

- 소스코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>3-8. 각종 목록을 표현하는 요소</title>
</head>
<body>
 <dl>
  <dt>Top Menu</dt>
  <dd><a href="#">Login</a></dd>
  <dd><a href="#">Member Join</a></dd>
  <dd><a href="#">Sitemap</a></dd>
 </dl>
</body>
</html>

 

 

- 실행결과

 

 앞에서 만들어 본 메인 메뉴에서 서브 메뉴가 있는 경우를 <dl>요소로 만들어 볼 수도 있습니다.

 

※ 주의할 점은 <dl>요소 안에는 <dt>와 <dd>요소 둘다 있어야 하며, <dt>요소가 <dd>요소보다 많은 것은 부자연스럽다는 점입니다. 서브 메뉴는 <dd>안에 작성하는 것이 적당하므로 서브 메뉴가 비어 있는 경우 이렇게 표현하는 것은 잘못된 방법일 수 있습니다.

 

- 소스코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>3-8. 각종 목록을 표현하는 요소</title>
</head>
<body>
 <h2>Main menu</h2>
 <dl>
  <dt><a href="#">About</a></dt>
  <dd>
   <ul>
    <li><a href="#">Company Info</a></li>
    <li><a href="#">CEO Message</a></li>
    <li><a href="#">Location</a></li>
   </ul>
  </dd>
  <dt><a href="#">Services</a></dt>
  <dd>
   <ul>
    <li><a href="#">Webdesign</a></li>
    <li><a href="#">Consulting</a></li>
   </ul>
  </dd>
  <dt><a href="#">Portfolio</a></dt>
  <dd>
   <ul>
    <li><a href="#">Shopping mall</a></li>
    <li><a href="#">Company</a></li>
   </ul>
  </dd>
  <dt><a href="#">Contact Us</a></dt>
  <dd>
   <ul>
    <li><a href="#">Boards</a></li>
   </ul>
  </dd>
 </dl>
</body>
</html>

 

 

- 실행결과

 

저작자표시 비영리 동일조건

'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글

3-10. 앵커(Anchor)의 표현  (0) 2017.12.25
3-9. 표를 만드는 테이블 요소  (0) 2017.12.15
3-7. 인용문, 정형화된 텍스트 알아보기  (0) 2017.10.11
3-6. 제목, 문단, 연락처정보, 구분선 알아보기  (0) 2017.10.10
3-5. HTML5 섹셔닝 요소들의 활용  (0) 2017.10.08

관련글

댓글 0

티스토리툴바