책 씹어먹는 즐거움

HTML에는 순서가 있는(ol), 순서가 없는(ul), 정의(description) 목록(list)이 있다. 앞서 순서가 있는 목록과 순서가 없는 목록은 다루었으니 이번에는 정의 목록(list)을 다룰 차례다.

정의 목록(description list)은 용어나 명칭을 그 설명과 함께 제시한 목록(list)를 말한다.

정의 목록(description list)은 <dl> 요소로 목록을 정의하고 <dt> 요소로 용어나 명칭을 정의하며 <dd> 요소에 구체적인 설명을 작성하게끔 되어 있어 함께 사용해야만 각자 제역할을 할 수 있도록 만들어졌다.

사용 형식은 아래와 같다.

다음과 같이 영단어의 내용을 정의 목록으로 만들어 0029.html

실행 결과는 다음과 같다. 

<dl>, <dt>, <dd> 요소 모두 블록 요소인 것을 알 수 있다. 

정의 목록이라는 명칭은 HTML 4.01까지 사용되던 definition list에서 나온 명칭이고 HTML 5부터는 definition list가 아니라 description list로 이름이 바뀌었다.

description list를 한국어로 단순 번역하면 서술 목록이나 설명 목록으로 번역하게 되는데 정의 목록이라는 말과 큰 차이가 없고 그 내용을 살펴보면 오히려 정의 목록이라는 말이 더 잘 어울리는 것 같다. 또, 여전히 많은 사람들이 이 목록 요소를 정의 목록이라고 부르고 있으므로 description list를 definition list에서와 동일하게 정의 목록이라고 지칭한다.

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

Ankilog 파일:   0029 정의 목록(description list) 요소 다루기.apkg

순서가 있는(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