프로그래밍/HTML5

HTML 태그 연습 리스트를 만드는 ul, ol, dl 그리고 li 태그

콘파냐 2017. 5. 12. 18:50
반응형

앞서 공부한 표를 만드는 table 태그와 더불어 오늘 연습할 리스트를 만드는 태그는 레이아웃을 설정하는 데도 사용되고 사용 빈도도 높으므로 꼭 알아 두어야하는 기본적인 태그다.


사용법은 table 태그와 비슷하다


다음은 테이블 태그의 형식이다.


<table>

   <tr>

      <td> .. </td>

      ...

   </tr>

   <tr>

      <td> .. </td>

      ....

   </tr>

</table>


ol 태그, ul 태그

이번에는 리스트 태그를 보자.


<ol>

   <li> 아이템 1 </li>

   <li> 아이템 2 </li>

</ol>


테이블의 시작과 끝을 알려주는 table 태그 처럼 리스트도 리스트의 시작과 끝을 알려주는 ol, ul 태그가 있다. 

ol, ul 둘 다 리스트지만 형식이 다르다.


<ul>

   <li> 아이템 1 </li>

   <li> 아이템 2 </li>

</ul>


ol은 ordered list의 약자로 순서가 있는 리스트라는 의미다. 그래서 아이템 앞에 번호가 매겨진다.

  1. 아이템 1
  2. 아이템 2


ul은 unordered list의 약자다. 순서는 없고 다음과 같이 표시된다.

  • 아이템 1
  • 아이템 1
이렇게 표시가 된다.

ol 태그와  ul 태그의 차이는 다음 그림을 참고하자


dl 리스트 태그

ol태그, ul태그와 같은 리스트 태그지만 형식이 좀 다르다. 이 태그는 하위 태그로 dt 태그와 dd 태그 두 개를 사용한다. 따라서 하나의 하위 항목을 더 가질 수 있다.


사용법은 다음과 같다.


<dl>

   <dt> 목록 1 </dt>

      <dd> 아이템 1 </dd>

      <dd> 아이템 2 </dd>

      <dd> 아이템 3 </dd>

   <dt> 목록 2 </dt>

      <dd> 아이템 1 </dd>

      <dd> 아이템 2 </dd>

      <dd> 아이템 3 </dd>

</dl>


다음은 브라우저에서 위 코드를 실행한 화면이다.



리스트 태그를 이용해서 웹 사이트의 레이아웃을 잡을 수 있다. 인터넷 뉴스 목록과 썸네일을 리스트 태그로 구성할 수도 있다. 그 때는 텍스트 대신 img 태그를 목록에 넣어주면 된다. 

반응형