- <dl> 은 이름–값 쌍 목록을 의미적으로 표현하는 HTML 요소로, 편의시설·청구 항목·기술 용어집 같은 UI 패턴에 적합함
- 설명 목록은 <dt> 이름과 <dd> 값을 <dl> 안에 배치하는 구조이며, 하나의 이름에 여러 값을 붙일 수도 있음
- 스타일링을 위해 관련 <dt>와 <dd>를 묶어야 할 때는 스펙상 <div> 래퍼만 그룹을 감쌀 수 있음
- 중첩 <div>만 쓰면 보조 기술이 목록 패턴을 인식하기 어렵지만, <dl>은 항목 수·현재 위치·목록 건너뛰기 같은 탐색 이점을 제공함
- Dungeons & Dragons 스탯 블록처럼 서로 다른 형태의 수치·능력·행동 데이터도 설명 목록으로 나눌 수 있어 범용성이 잘 드러남
<dl>이 표현하는 패턴
- <dl> 은 이름–값 쌍 목록을 표현하는 HTML 요소이며, 웹 UI에서 반복적으로 등장하는 패턴에 의미를 부여함
- 숙박 시설 편의시설, 월세의 개별 청구 항목, 기술 용어집처럼 이름과 값이 짝을 이루는 구조가 대표적인 후보가 됨
- <dl>은 단독 요소가 아니라 <dl>, <dt>, <dd> 세 요소 조합으로 이름–값 그룹을 구성함
- HTML5 이전에는 <dl>이 definition list로 불렸으며, 원래는 용어와 정의의 용어집을 표현하기 위한 요소였음
설명 목록의 기본 구조
-
<dl>, <dt>, <dd>
- <dl> 은 전체 설명 목록을 감싸며, <ul>이나 <ol>이 목록 전체를 감싸는 역할과 비슷함
- <dt> 는 설명 용어(description term)로 이름을 나타내고, <dd> 는 설명 세부정보(description detail)로 값을 나타냄
- <dt>와 <dd>도 이전에는 각각 definition term, definition detail로 알려져 있었음
- 기본 구조는 하나의 <dt> 뒤에 하나의 <dd>를 두는 형태임
<dl>
<dt>Title</dt>
<dd>Designing with Web Standards</dd>
</dl>
-
여러 이름–값 쌍
- 같은 목록 안에 다른 이름–값 쌍을 추가하려면 새로운 <dt>와 <dd>를 이어서 배치함
<dl>
<dt>Title</dt>
<dd>Designing with Web Standards</dd>
<dt>Publisher</dt>
<dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
</dl>
-
하나의 이름에 여러 값
- 하나의 <dt>는 여러 개의 <dd> 값을 가질 수 있음
- 책의 저자가 여러 명인 경우처럼 하나의 이름에 여러 값이 붙는 구조를 직접 표현 가능함
<dl>
<dt>Title</dt>
<dd>Designing with Web Standards</dd>
<dt>Author</dt>
<dd>Jeffrey Zeldman</dd>
<dd>Ethan Marcotte</dd>
<dt>Publisher</dt>
<dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
</dl>
-
스타일링을 위한 래퍼
- 관련 <dt>와 <dd>를 스타일링 목적으로 묶어야 할 때는 <div> 래퍼를 사용할 수 있음
- 스펙상 <dt>/<dd> 그룹을 감쌀 수 있는 래퍼 요소는 <div>뿐임
- 더 자세한 허용 구조와 제약은 MDN의 <dl> 문서나 HTML 스펙에서 확인 가능함
<dl>
<div>
<dt>Title</dt>
<dd>Designing with Web Standards</dd>
</div>
<div>
<dt>Author</dt>
<dd>Jeffrey Zeldman</dd>
<dd>Ethan Marcotte</dd>
</div>
</dl>
의미론이 필요한 이유
- 이름–값 그룹은 중첩된 <div>만으로도 시각적으로 만들 수 있지만, 브라우저나 보조 기술이 이를 목록 패턴으로 인식하기 어려움
- 의미 요소 선택은 컴퓨터가 해당 패턴을 인식했을 때 사용자에게 실질적 이점이 생기는지를 기준으로 판단 가능함
- <dl>을 쓰면 화면 읽기 프로그램 사용자는 이름–값 그룹 목록을 더 쉽게 탐색할 수 있음
- 목록 안의 이름–값 그룹 수를 알 수 있음
- 현재 목록에서 어느 위치에 있는지 파악할 수 있음
- 관심 없는 경우 목록 전체를 하나의 블록처럼 건너뛸 수 있음
- 중첩 <div> 구조에서는 각 이름과 값이 독립적인 텍스트 노드처럼 처리되지만, <dl>은 같은 정보에 구조적 의미를 부여함
- 이런 이점은 대부분의 브라우저/화면 읽기 프로그램 조합에서 <dl> 사용 시 실제로 제공됨
- 다만 <dl> 지원이 아직 보편적이지 않기 때문에, 독립 텍스트 노드로 처리되는 폴백 경험이 충분하지 않다면 지원이 개선될 때까지 <ul> 같은 다른 요소를 선택할 수도 있음
Dungeons & Dragons 스탯 블록 예시
- Dungeons & Dragons의 스탯 블록은 이름–값 쌍이 많은 예시이며, 하나의 스탯 블록 안에서 여러 설명 목록 후보를 찾을 수 있음
- Armor Class, Hit Points, Speed 같은 기본 수치, STR·DEX 같은 능력치, Senses·Languages·Challenge 같은 숙련 정보, Traits, Actions를 각각 설명 목록으로 나눌 수 있음
- 시각적으로 다른 능력치 목록과 공격 목록도 모두 설명 목록 패턴으로 표현 가능함
- 여러 설명 목록을 구분하거나 제목과 연결할 때는 aria-label과 aria-labelledby를 사용할 수 있음
- 이 마크업은 가능한 방법 중 하나이며, <dl> 패턴이 서로 다른 형태의 데이터 묶음에도 적용될 만큼 범용적임을 보여줌
4 days ago
8
English (US) · 