[HTML] 목록 태그 똑똑하게 사용하기 ( <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <dfn> )

목록 태그하면 가장 먼저 떠오르는 게 <li> 태그이지 않을까? 혹은 <li> 요소는 반드시 <ul> 이나 <ol> 요소 안에 작성해야 한다는 것까진 알고 있지만, <ul>과 <ol>의 차이를 정확히 모르고 있을 수도 있겠다. 이번 포스팅에서는 정말 많이 사용하는 목록 표현요소 태그인 <ul>, <ol>, <li> 태그와 흔히 사용하진 않지만 좀 더 정확하고 명확한 정보 전달 마크업을 위한 정의 목록 태그에 대해서도 정리해 보겠다. 

---

 

 

비정렬 목록 태그 : <ul>

 

<ul> 요소는 정렬되지 않은 목록(unordered list ) 즉, 순서가 중요하지 않은 목록을 나타낼 때 사용한다. <ul> 요소 안에 들어갈 항목의 순서를 바꿨을 때 그 목록의 의미도 바뀌게 된다면 <ul> 이 아닌 <ol> 태그를 사용하는 것이 바람직하다. <ul>과 <ol>의 직계 자식 요소로는 오직! <li> 요소만 올 수 있다. <li> 요소는 밑에서 보다 자세히 다루겠지만, 목록 안의 항목으로, <ul>과 <ol> 요소는 최소 하나 이상의 <li> 요소를 자식으로 가져야 한다.

 

 

정렬 목록 태그 : <ol>

 

<ol> 요소는 정렬된 목록(ordered list) 즉, 순서가 중요한 목록을 나타낼 때 사용한다. <ul>과 <ol> 요소의 차이는 '순서의 중요성'에 있는 만큼, <ul> 태그로 마크업 된 목록의 항목은 불릿(•)으로 표시되는 반면 <ol> 태그로 마크업 된 목록의 항목은 숫자로 표시된다. 

 

 

목록의 항목 태그 : <li>

 

<li> 요소는 목록 안의 아이템(항목)(list item)을 나타낸다. 따라서 반드시 목록을 나타내는 <ul> 혹은 <ol> 요소 안에 항목으로서 <li> 요소가 위치해야 하는 것이다. 

 

 

아니 다 알겠는데, 순서가 중요하다는 게 무슨말인데? 라고 하는 사람들을 한번에 이해시켜줄 좋은 예를 가져왔다..! ▾

'분야별 검색어' 섹션을 보면 인기 검색어 순위를 나타내는 번호가 붙어있다. 만약 1위 검색어와 2위 검색어의 순위가 바뀐다면? 지금 가장 인기있는 검색어가 바뀌는 것이기 때문에 순서가 중요한 목록이라고 할 수 있다. 반면에 '같이가치 추천글' 섹션은 추천 순위를 나타내는 것이 아니라 그냥 추천글들에 이런 게 있다~ 라는 것을 보여주고 있기 때문에 순서가 그다지 중요하지 않은 목록이라고 할 수 있다. 따라서 이를 마크업 한다면 '분야별 검색어' 섹션은 <ol> 태그로, '같이가치 추천글' 섹션은 <ul> 태그를 사용하는 게 바람직하다.

<div>
    <h1>분야별 검색어</h1>
    <strong>예능tv</strong>
    <ol>
        <li>미스트롯 2</li>
        <li>골 때리는 그녀들</li>
        <li>트롯 전국체전</li>
        <li>뭉쳐야 쏜다</li>
        <li>슈퍼맨이 돌아왔다</li>
        <li>쓰리박 : 두 번째 심장</li>
        <li>싱어게인</li>
        <li>신청곡을 불러드립니다 - 사랑・・・</li>
        <li>미운 우리 새끼</li>
        <li>1호가 될 순 없어</li>
    </ol>
</div>

<div>
    <h1>같이가치 추천글</h1>
    <ul>
        <li>무료로 확인하는 내 눈치 레벨!</li>
        <li>아름다운 '금수강산', 옛말이 된 이유</li>
        <li>"어릴 적부터 공부는 잘 했지만..."</li>
        <li>빠른 택배, '편해서' 좋다고요?</li>
        <li>할머니의 낡은 신발 속, 담긴 사연</li>
        <li>코로나 펜데믹 시대의 'NGO'</li>
        <li>복지의 사각지대, '중년 남성'</li>
        <li>우리에게 김치가 필요한 이유</li>
        <li>보고만 있을 순 없었습니다</li>
        <li>새학기, 제대로 따라갈 수 있을지...</li>
    </ul>
</div>

그런데 보통 웹 사이트에서 이런 인기 검색어라던가 추천글의 경우, 클릭하면 바로 해당 검색어가 검색되거나 해당 글의 페이지로 연결된다. 이렇게 하이퍼링크를 추가하고 싶을 때 사용하는 링크는 뭐다? 바로 앵커(anchor) 태그 <a>!! 그럼 앵커 태그를 목록 태그에 적용시켜 보자!

<ul>
    <a href="#">
        <li>목록 태그에 링크 걸기 1</li>
    </a>
</ul>

 

<ul>
    <li>
        <a href="#">목록 태그에 링크 걸기 2</a>
    </li>
</ul>

위 두 개의 코드 중 어떤게 맞을까? 코드 실행 결과를 보면 두 코드 모두 링크가 제대로 연결되어 있다. 하지만 목록 태그에 앵커 태그를 적용시킬 때는 2번 코드처럼 <li> 안에 <a>를 작성해야 한다. 이유는, 제일 위에서 설명했듯이 <ul>과 <ol>은 직계자식요소로 <li>만 올 수 있기 때문이다. 지금 1번 코드는 <ul> 안에 바로 <a>가 오고 그 안에 <li> 요소를 갖는다. 이 코드는 HTML의 문법적 요소를 어긴 코드인 것이다. 따라서 2번 코드처럼 <ul>의 직계자식요소로서 <li>가 오고 그 안에 <a> 태그로 링크를 연결하면 퍼펙트한 코드가 된다!

 

---

 

정의 목록 태그 : <dl>

 

<dl> 요소는 용어(<dt>)와 용어에 대한 정의(<dd>) 그룹의 목록을 감싸는 정의 목록(description list) 태그이다. 주로 용어를 사전적으로 정의하거나 설명할 때 혹은 Key-Value 형태로 정보를 제공할 때 사용한다. <dl>의 직계자식요소로는 <dt>와 <dd> 그리고 <div>만 올 수 있다. 

 

 

용어 태그 : <dt>

 

<dt> 요소는 정의 혹은 설명 목록의 정의하고자 하는 용어(description term) 혹은 Key값을 나타낸다. 보통 <dt> 요소 뒤에 용어를 정의하는 <dd> 요소가 오지만, 여러 개의 <dt> 요소를 연속으로 배치하고 하나의 <dd> 요소로 앞의 모든 <dt> 요소를 서술할 수도 있다.

 

 

용어 정의 태그 : <dd>

 

<dd> 요소는 앞선 용어 <dt> 요소에 대한 정의나 설명(description details/data) 혹은 Key값에 대한 Value값을 제공한다. 

 

 

보통 손으로 필기를 한다거나 할 때, 어떤 용어에 대한 정의를 나타내는 경우 콜론(:)이나 세미콜론(;)을 많이 사용하곤 한다. 하지만 HTML 문서를 작성할 때에는 콜론이나 세미콜론으로 나타낸다고 해서 브라우저가 용어에 대한 정의라고 이해하지 않는다. 그렇기 때문에 브라우저가 이해할 수 있도록 <dl>, <dt>, <dd> 태그를 사용해서 용어에 대한 정의를 하고 있음을 나타내는 것이다.

<dl>
    <dt>복숭아</dt>
    <dd>복사나무의 열매. 품종에 따라 크고 작은 것이 있는데, 시고 단 맛이 있으며 담홍색으로 익는다.</dd>
</dl>

HTML 문서를 작성 중 '복숭아'에 관한 정의를 마크업 해야 한다면, 우선 <dl> 태그를 열어 이제부터 용어에 대한 정의 목록들이야~ 라고 알려준 후, <dt> 태그로 정의하고자 하는 용어가 '복숭아'임을 알려주고 <dd> 태그로 해당 용어의 정의를 작성하면 된다. 이렇게 어떤 용어에 대한 사전적 정의 뿐만 아니라 단순 설명을 덧붙일 때도 사용할 수 있다. 

<dl> 
    <dt>똑쥐</dt>
    <dd>이것저것 공부하는 블로거 입니다</dd>
</dl>

(ㅎㅎ..) 이런식으로  단순 설명이지만 '똑쥐'라고 하는 것에 대한 설명을 나타내고 있음으로 정의 목록 태그로 감쌀 수 있다.

<dl>
    <dt>똑쥐</dt>
    <dd>이것저것 공부하는 블로거 입니다</dd>
    <dd>
        <a href="https://juheeexx.tistory.com/">똑쥐 블로그</a>
    </dd>
</dl>

(ㅎㅎ..2) 하나의 용어 <dt>에 여러 정의나 설명 <dd>를 연속으로 배치해 사용할 수 있다.

<dl>
    <dt>똑쥐</dt>
    <dt>TTOKKG</dt>
    <dd>이것저것 공부하는 블로거 입니다</dd>
    <dd>
        <a href="https://juheeexx.tistory.com/">똑쥐 블로그</a>
    </dd>
</dl>

(ㅎㅎ..3) 또한, 여러 용어 <dt>에 여러 정의나 설명 <dd>를 혼합한 케이스도 가능하다! 정의 목록 요소에도 앵커 태그를 사용해 링크를 연결할 수 있는데, 이 경우에도 역시 <a> 태그는 링크를 연결하고자 하는 요소 안에 작성해 주어야 한다. <dl> 요소는 <dt>, <dd>, <div> 요소만 자식요소로 올 수 있기 때문에!!

<dl>
    <div>
        <dt>복숭아</dt>
        <dd>복사나무의 열매. 품종에 따라 크고 작은 것이 있는데, 시고 단 맛이 있으며 담홍색으로 익는다.</dd>
    </div>
</dl>

<dl>
    <div>
        <dt>복숭아</dt>
        <dd>복사나무의 열매. 품종에 따라 크고 작은 것이 있는데, 시고 단 맛이 있으며 담홍색으로 익는다.</dd>
    </div>
    <div>
        <dt>천도복숭아</dt>
        <dd>장미과의 한 품종. 복사나무의 변종으로 열매의 거죽에 털이 없고 윤이 난다.</dd>
    </div>
</dl>

<div> 태그를 사용하여 하나의 용어에 대한 정의를 세트로 그룹화할 수 있다. <div> 태그로 묶고 안 묶고의 차이는 없지만, 후에 CSS 스타일 처리를 편하게 하기 위해 묶는다고 생각하면 된다. 

 

 

정의 태그 : <dfn>

 

<dfn> 요소는 현재 맥락이나 문장에서 정의(definition)하고 있는 용어를 나타낸다. 사실 처음에는 <dfn> 태그가 잘 이해되지 않고 <dt> 태그랑 무슨 차이가 있는거지..? 라며 헷갈리기도 했다. 이럴때는 무조건 예시로 이해하는 게 빠르다!!!

 

우선 위에서 사용한 '복숭아' 예시에 <dfn> 태그를 적용시켜 보자.

<dl>
    <dt>
        <dfn>복숭아</dfn>
    </dt>
    <dd>복사나무의 열매. 품종에 따라 크고 작은 것이 있는데, 시고 단 맛이 있으며 담홍색으로 익는다.</dd>
</dl>

현재 <dl> 요소 안에서는 '복숭아'에 대한 정의를 하고 있다. 따라서 이 맥락에서 정의하고 있는 용어인 '복숭아'를 <dfn> 태그로 나타낼 수 있다. 단 <dfn>는 <dl>의 직계 자식 요소가 될 수 없기 때문에, <dt> 태그 안에 <dfn> 태그를 작성하고 있다. <dt>와 <dfn>의 눈에 띄는 차이는 코드 결과에서 알 수 있는데, <dfn> 요소 안의 텍스트는 브라우저에서 자동으로 기울임꼴로 표시한다. 

<p>
    <dfn>복숭아</dfn>는 복사나무의 열매이다. 품종에 따라 크고 작은 것이 있는데, 시고 단 맛이 있으며 담홍색으로 익는다.
</p>

하지만 <dfn> 태그는 위 코드에서 처럼 사용하는 것이 일반적인 것 같다. 어떤 용어를 정의하고 있는 문단이나 문장 내에서 정의하고자 하는 용어를 식별하기 위한 태그로서, 브라우저에게 '야! 이 문장은 '복숭아'에 대해 정의하고 있어! 정의되고 있는 용어가 '복숭아'라고!!!' ..ㅎ 대략 이런식으로 알려주고 있는 것이다. 설명은 개떡같지만.. 찰떡같이 알아들어 주세요ㅎ