[HTML] <dl>, <dd>, <dt> 태그

'모르겠지만 일단 막 갖다 써!!' 로 살아왔지만 내일의 나는 알고 쓰기 위해 HTML 태그에 대해서 공부를 한다.😳
그래서 오늘은 정의 목록 태그에 대해 공부해보자.

정의 목록 태그?? 정의의 이름으로 널 용서하지 않겠다! 이런건가?

정의 목록 태그

한글로 해석하니 뭔가 어색하니 영어로 살펴보면 description list

뭔가 정의를 나타내고자 할 때 사용하는 것이라고 느낌이 뙇!

정의 목록 태그 사용 용도

1. 용어를 정의할 때
2. key-value로 정보를 제공할 때 ( ex) 직업: 백수 )

용도까지 알아봤으면 태그에 대해서 살펴보자.

정의 목록 태그 살펴보기

총 4가지가 존재한다.

1. dl (description list) : 나 정의 리스트 쓰기 시작할거야~ 선언할 때 사용하는 태그
2. dt (description term) : key 혹은 용어를 사용하기 위한 태그
3. dd (description data) : key 혹은 용어에 대한 설명을 작성하기 위한 태그
4. dfn (description definition) : 좀 더 구체적으로 정의내리고 싶을때 사용하는 태그

💡 dl 태그 안에는 dt, dd가 반드시 함께 따라와야한다.

생각해보니 태그를 사용하기 위해 공부하는거지 시험을 보기 위해 공부하는게 아니잖아?! 직접 눈으로 보자.

<dl> <!-- 설명 시작한다?!! -->
  <dt>우리집 고양이</dt> <!-- 용어 -->
  <dd>물범처럼 뚠뚠한 뚱냥이.</dd> <!-- 용어 설명 -->
  <dd>건들면 무는 삵같은 고양이.</dd> <!-- 용어 설명 -->
</dl>

뭐야 간단하네~ 하.지.만 문법을 주의해야한다. 아래 예시들을 통해 살펴보자.😳

syntax alert 문법 주의

😍 좋은 예시

• 정석대로 잘 작성한 예시 1

<dl>
  <dt>Roiana</dt>
  <dd>고양이 주인님을 모시고 있는 집사<dd>
</dl>

• <dfn> 태그를 사용하여 용어 정의를 하기 위해 정석대로 잘 작성한 예시 2

<dl>
  <dt>
    <dfn>development</dfn>
  </dt>
  <dd> 1. 발달, 성장 </dd>
  <dd> 2. 신개발품 </dd>
</dl>

• Roiana, 로이아나는 비슷한 계열이거나 같은 용어. 이 두 용어에 대해 '고양이 주인님을 모시고 있는 집사'로 설명한 좋은 예시 3

<dl>
  <dt>Roiana</dt>
  <dt>로이아나</dt>
  <dd>고양이 주인님을 모시고 있는 집사<dd>
</dl>

• Roiana 용어의 설명으로 집사를 설명한 좋은 예시 4

<dl>
  <dt>Roiana</dt>
  <dd>
    <a href="https://velog.io/@kero1004">고양이 주인님을 모시고 있는 집사</a>
  <dd>
</dl>

• Roiana, 로이아나 두 용어에 대해 2가지로 설명하는 좋은 예시 5

<dl>
  <dt>Roiana</dt>
  <dt>로이아나</dt>
  <dd>고양이 주인님을 모시고 있는 집사<dd>
  <dd>
    <a href="https://velog.io/@kero1004">집사 블로그</a>
  </dd>
</dl>

• <dl> 태그안에는 <div>태그도 가능하다고 보여주는 좋은 예시 6

<dl>
  <div>
  	<dt>Roiana</dt>
  	<dd>고양이 주인님을 모시고 있는 집사<dd>
  </div>
</dl>

• 각각의 용어(사과, 바나나)를 구분을 하여 좀 더 예쁘게 설명해주고 있는 좋은 예시 7

<dl>
  <div>
  	<dt>사과</dt>
  	<dd>사과는 사과사과<dd>
  </div>
  <div>
  	<dt>바나나</dt>
  	<dd>이 바나나 먹으면 안 바나나<dd>
  </div>
</dl>

😡 나쁜 예시

• Roiana에 대한 설명은 있지만 새로운 로이아나에 대한 설명은 없는 나쁜 예시 1

<dl>
  <dt>Roiana</dt>
  <dd>고양이 주인님을 모시고 있는 집사<dd>
  <dt>로이아나</dt>
</dl>

• <dl>태그 안에 <section>은 NO!NO! 나쁜 예시 2

  <dl> 태그안에 직계 자식으로 사용가능한것은 <dt>, <dd>, <div>

<dl>
  <section>
  	<dt>Roiana</dt>
  	<dd>고양이 주인님을 모시고 있는 집사<dd>
  </section>
</dl>

• <dt>와 <dd>는 반드시 <dl>의 자식 요소로 존재해야 한다! 나쁜 예시 3

<dl>
  <dt>Roiana</dt>
</dl>

HTML를 왜 공부해?!! 라고 했지만 정의 목록 태그만 해도 양이 생각보다 많다. 언제까지 Vscode만 믿을순 없잖아?! 이 참에 HTML 태그를 잡고 가자.

이 글은 김버그 강의를 참고하여 작성되었습니다.