책 씹어먹는 즐거움

순서가 있는(ordered) 목록은 개별 항목(item)들이 순서대로 나타나므로 글머리 기호도 어떤 순서가 있는 숫자나 알파벳이 기호가 되어야 한다. 따라서 디폴트로 설정되어 있는 글머리 기호도 숫자(1. 2. 3. 4. ...)인 것이다.

순서가 있는(ordered) 목록의 글머리 기호는  순서가 없는(unordered) 목록과는 달리 CSS를 이용하지 않고 <ol> 요소의 type 속성(attribute)을 이용하여 글머리 기호를 바꾼다. 

다음과 같은 형식으로 작성한다. 

type 속성(attribute)의 속성값 변화에 따른 개별 항목의 글머리 기호는 다음과 같다.

하나하나 사용해보자. 

순서가 있는(ordered) 목록에서는 <ol> 요소에 start 속성을 사용하여 목록의 글머리 기호가 어떤 숫자로 시작하는지 설정할 수 있다. 

사용례는 다음과 같다. 

위에서 제시한 HTML 사례는 0028.html로 작성하였으니 참조하기 바란다.

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

Ankilog 파일:  0028 HTML 순서가 있는(ordered) 목록의 글머리 기호 바꾸기.apkg

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

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

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

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

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

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

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

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

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

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

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

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

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

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