[HTML/CSS] 텍스트 목록 만들기

HTML 에는 텍스트로 목록을 만들 수 있는 태그가 있다. 아래의 예시를 보자.

• 텍스트 목록 컨텐츠 1
• 텍스트 목록 컨텐츠 2

현재 페이지도 웹 페이지로, HTML 이 포함되어 있다. 위의 두 개의 텍스트 목록 컨텐츠의 내용은 직접 입력했지만, 텍스트 앞에 있는 불렛 포인트(∙) 와 불렛 포인트와 텍스트 사이의 여백 값이나 그 앞의 여백값은 직접 입력하지 않았다. 별 표(*)를 입력하고 스페이스를 입력하면 위와 같은 모양의 첫 번째 목록 내용을 작성할 수 있고, 첫 번째 목록에서 개행을 하면 자동으로 다음 목록 컨텐츠를 불렛 포인트와 함께 독자들에게 보여줄 수 있다.

그러면 어떤 태그를 사용하면 위와 같은 목록들처럼 보여줄 수 있는지 알아보자.

목록 태그의 종류

HTML 의 목록 태그는 순서를 보여주지 않는 <ul> 태그, 순서를 명시적으로 보여주는 <ol> 태그, 그리고 그리고 사전에서 단어와 해당 단어의 설명을 보여줄 수 있는 <dl> 태그가 있다. ul 은 ‘unordered list’ 를 줄인 말이고, ol 은 ‘ordered list’ 의 줄임말, 그리고 dl 은 ‘description list’ 의 줄임말이다.

<ul>, <ol>

순서가 있는 리스트, 순서가 없는 리스트를 표현할 수 있는 두 태그는 목록의 내용을 ‘list’ 를 뜻하는 <li> 태그를 이용하여 목록 내의 각각의 내용을 표현할 수 있다.

<ul>

Unordered List 의 준말인 ul 은 순서를 보여주지 않고 리스트를 표현할 수 있다.

Ex1. unorderd list 예시

ul 태그를 이용하면 목록 컨텐츠들 앞에 불렛 포인트(∙) 가 기본적으로 붙는다. 이 모양을 바꾸는 것은 css 에 더 관련된 내용이라 현재 포스트에서는 다루지 않는다. 그 속성 이름이 list-style-type 이라는 것만 눈으로 익혀두자. 아래는 ul 태그의 css 기본값이다.

<!-- ul 태그 css 기본값 -->
ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1 em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

<ol>

Orderd List의 준말인 ol 은 순서를 명시적으로 보여주면서 리스트를 표현할 수 있다.

Ex2. orderd list 예시

ol 태그를 이용하면 목록 컨텐츠들 앞에 순서를 표현해주는 숫자가 기본적으로 붙는다. 이 모양을 바꾸는 것 역시 css 에 더 관련된 내용이라 현재 포스트에서는 다루지 않는다. 속성 이름이 list-style-type 이라는 것만 눈으로 익혀두자. 아래는 ol 태그의 css 기본값이다.

<!-- ol 태그 css 기본값 -->
ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

<dl>

dl 은 definition list 의 약어로, 주로 사전처럼 용어와 그 설명을 기재하는 형태인 key-value 형식을 표현하기 위한 리스트이다.

Ex3. dl,dt, dd 예시

<dl>

dl 태그는 용어도 용어의 설명도 아닌 ‘용어와 용어 설명이 올 것이다.’ 를 뜻한다. 내부에 용어를 표현하는 dt 태그와 용어의 설명을 표현하는 dd 태그를 포함할 수 있다. dl 태그 내부에서는 겹치는 용어가 없는 것이 권장된다. dt 태그와 dd 태그는 좀 더 아랫부분에서 자세히 다룬다.

dl 태그의 기본값은 그 자체로 block-level 요소이고, 위 아래 여백이 있다. 그러나 dl 태그를 단지 여백과 들여쓰기를 위해 사용하는 것은 접근성을 떨어뜨리고 의미가 벗어나므로 목적에 맞게 사용하자. dl 태그 역시 기본 스타일에서 수정하여 사용가능하나, 스타일에 관련된 내용은 본 포스트에서 다루지 않는다.

<!-- dl 태그 css 기본값 -->
dl {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

<dt>, <dd>

dt 태그의 dt 는 정의할 용어를 뜻하는 definition term의 약어이고, dd 태그의 dd 는 정의할 용어의 설명을 뜻하는 definition description의 약어이다. dt 태그와 dd 태그는 dl 내부에 존재할 때 해당 용어들이 관련성을 유지할 수 있다. dt 와 dd 태그는 n:m 으로 맵핑하는 것이 가시적으로는 가능하나, 1:1로 정의하는 것이 권장된다.

dt, dd 태그는 둘 다 block-level 요소이고, dd 태그는 기본적으로 왼쪽으로 여백이 있어 들여쓰기한 것처럼 보인다. dt, dd 태그 역시 기본 스타일에서 수정하여 사용가능하나, 스타일에 관련된 내용은 본 포스트에서 다루지 않는다.

<!-- dt, dd 태그 css 기본값 -->
dt {
    display: block;
}
dd {
    display: block;
    margin-left: 40px;
}

Reference

1. [W3School] “HTML tutorial” — https://www.w3schools.com/html/default.asp
2. [W3School] “HTML tags” — https://www.w3schools.com/tags/default.asp
3. [Stackoverflow] “why will a dl tag without a dt tag validate” — https://stackoverflow.com/questions/20045380/why-will-a-dl-tag-without-a-dt-tag-validate