정의 리스트

용도

1. 용어를 정의할 때
2. key-value로 정보를 제공할 때

---

{key-value}

• {이름:김버그} {직업:프론트엔드 개발자} 등처럼 어떤 정보를 "A는 B이다" 식으로 제공할 때 쓴다.
• 자바스크립트 object 개념에서 굉장히 많이 사용된다.

---

태그

• dl 태그 : "나 이제 정의 리스트 만들거야!" 라고 선언한다.
  • dl 태그 안에는 dt, dd 태그가 반드시 함께 따라와야 한다.
• dt 태그 : 용어 혹은 key값에 해당한다.
  • dfn 태그 : 사전적으로 좀 더 구체적인 정의를 내리고 싶을 때 사용한다.
• dd 태그 : dt에 대한 설명을 한다.

---

Good Practice

<dl>
	<dt>김버그</dt>
	<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다</dd>
</dl>

<dl>
	<dt>
		<dfn>development</dfn>
	</dt>
	<dd>1. [U] 발달, 성장</dd>
	<dd>2. [U, C] (신제품의) 개발; 신개발품</dd>
</dl>

<dl>
	<dt>김버그</dt>
	<dt>Kimbug</dt>
	<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다</dd>
</dl>

<dl>
	<dt>김버그</dt>
	<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다</dd>
	<dd>
		<a href="https://youtube.com/c/kimbug">김버그 채널</a>
	</dd>
</dl>

<dl>
	<dt>김버그</dt>
	<dt>Kimbug</dt>
	<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다</dd>
	<dd>
		<a href="https://youtube.com/c/kimbug">김버그 채널</a>
	</dd>
</dl>

<dl>
	<div>
		<dt>사과</dt>
		<dd>사과에 대한 설명</dd>
	</div>
</dl>

<dl>
	<div>
		<dt>사과</dt>
		<dd>사과에 대한 설명</dd>
	</div>
	<div>
		<dt>바나나</dt>
		<dd>바나나에 대한 설명명</dd>
	</div>
</dl>

---

Bad Practice

<!--데벨업에 대한 정의가 빠졌다-->
<dl>
	<dt>김버그</dt>
	<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다</dd>
	<dt>데벨업</dt>
</dl>

<!-- dl의 자식요소는 오직 div, dt, dd만 가능하다 -->
<dl>
	<section>
		<dt>김버그</dt>
		<dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다</dd>
	</section>
</dl>

<!--dt와 dd는 반드시 dl의 자식요소로 있어야 한다-->
<dt>
	김버그
</dt>

---

실습 화면

---

회고

예제를 풀어보면서 느낀 건 용어 정의할 땐 정의 리스트를 쓰면 된다는 건 알겠는데 다른 예제들은 다른 태그를 써도 될 거 같은데 굳이 정의 리스트를...? 라는 의문이 들었다. 근데 큐앤에이 보니깐 나만 이런 생각하는 게 아니어서 (안심 안심..) 뒤에 html 심화 파트에서 좀 더 다루신다고 하니 일단 요 정도로만 이해해도 될 거 같다!!