3-5. HTML 태그 : 리스트 태그<ul><ol><li><dl><dt><dd>

2021. 8. 19. 03:03카테고리 없음

3-5. HTML 태그 : 리스트 태그

  

 가. 정의

 

  - 콘텐츠가 많은 포털이나 검색엔진 사이트는 항목 등으로 구분할 것이 많아 리스트 태그가 자주 사용됨

  

 나. 태그의 종류

 

 ■<ul>(unordered list)

   - 순서가 없는 리스트를 단순히 나열하여 표현할 때 사용

   - <ul>을 선언하고 그 요소 안에 자식태그로 <li>태그를 선언

   - <ul>태그의 자식태그는 <li>태그만 가능하나, <li>요소 안에는 <ul>태그 선언 가능

 

     1 <body>

     2            <ul>

     3                  <li>콩나물</li>                 →     ㆍ콩나물              

     4                  <li>국간장</li>                          ㆍ국간장 

     5            </ul>

     6 </body>            

 

 ■<ol>(ordered list)

   - 순서가 있는 리스트를 표현할 때 사용

   - <ol>을 선언하고 그 요소 안에 자식태그로 <li>태그를 선언

   - <ol>태그의 자식태그는 <li>태그만 가능하나, <li>요소 안에는 <ol>태그 선언 가능

 

     1 <body>

     2            <ol>

     3                  <li>계약서를 읽는다</li>      →     1. 계약서를 읽는다              

     4                  <li>날인한다</li>                           2. 날인한다   

     5            </ol>

     6 </body>    

 

 ■<dl>(definition/description list)

   - 용어와 그에 대한 정의를 표현할 때 사용

   - 용어와 정의가 하나의 세트로 항목을 이룸

   - <dl>을 선언하고 그 요소 안에 자식태그로 <dt> 및 <dd> 태그를 선언

      ㆍ<dt>(definition term) : 용어를 나타내는 태그

      ㆍ<dd>(definition description) : 용어 정의를 나타내는 태그(하나의 정의에 수개로 선언가능)

 

     1 <body>

     2            <dl>

     3                  <dt>피그말리온 효과</dt>      →     피그말리온 효과              

     4                  <dd>허구의 세계를....</dd>                    허구의 세계를.....   

     5            </dl>

     6 </body>