0026 HTML 목록(list) 요소 만들기

0026 HTML 목록(list) 요소 만들기

메뉴나 물건 리스트처럼 종종 리스트나 목록을 쓰는 경우가 있다. 그런 경우 그냥 <p> 요소로 리스트를 나열해서 보여줄 수 있지만 적합한 구조에 맞는 요소를 선택해서 사용해야 한다는 HTML의 마크업적인 측면을 고려하면 목록(list)에 맞는 요소를 사용해주어야 한다. 

    

HTML의 목록은 순서가 있는 목록(ordered list)과 순서가 없는 목록(unordered list)의 두 가지가 있다. 그리고 목록에 속하는 개별 항목(item)들은 <li>요소로 만든다. 

    

순서가 없는 목록 → <ul></ul>

순서가 있는 목록 → <ol></ol>

개별 항목(item) → <li></li>

실제로 작성할 때는 다음과 같은 형식으로 작성한다.

    

<ol> or <ul>

 <li>항목(item)</li>

 <li>항목(item)</li>

 <li>항목(item)</li>

</ol> or </ul>

순서가 없는(unordered) 목록을 작성한 것은 다음과 같다. 

순서가 있는(ordered) 목록은 다음과 같이 작성한다. 

<ol>, <ul>, <li> 모두 줄바꿈(linebreak)이 있는 블록 요소이므로 각각 독립적으로 배치된다. 

    

<ol> 요소는 목록(list)의 앞에 목록 번호가 순서대로 주어지고 <ul> 요소는 목록(list)의 앞에 순서가 없는 글머리 기호가 붙는다.

    

<li> 요소는 각 항목을 식별하는 데 사용되며, <ol>이나 <ul> 요소는 그 항목들을 묶는 데 사용되는 것으로 반드시 같이 사용되어야 한다. 

    

<ol>이나 <ul> 요소 안에 다른 요소를 넣고 싶다면 아래와 같이 <li> 요소 안에 중첩시켜 넣어야 하고 <li> 요소가 아닌 텍스트나 다른 요소를 넣지 말아야 한다. 

    

<ol> or <ul>

 <li><strong>항목(item)</strong></li>

 <li><em>항목(item)</em></li>

 <li><a href="URL">항목(item)</a></li>

 <img src="sun.jpg" /> 

</ol> or </ul>

물론, 목록(list)를 아래와 같이 중첩해서 넣을 수는 있다. 이런 것을 중첩(nested) 목록이라고 한다.

목록을 중첩할 경우에는 내부에 중첩된 목록이 각각 하나의 <li> 요소 안에 중첩되는 것을 주의해야 한다. 

위에서 제시한 HTML 들은 0026.html로 작성하였으니 참조하기 바란다.

Anki 파일

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0026 HTML 목록(list) 요소 만들기.apkg