[CSS] 용어 정의 태그 dl,dt,dd

용어 목록을 만드는 dl,dt,dd 태그에 대해 알아보겠습니다.

 

<dl> 태그는 definition list(정의 목록)의 약자로, 사전처럼 용어를 설명하는 목록을 생성할 때 사용합니다.

 -> 이후에 나오는 <dt>,<dd>태그를 감싸주는 최상단 태그 역할을 합니다.

 

<dt> 태그는 definition term(정의 용어)의 약자로, 정의되는 용어의 제목을 넣을 때 사용합니다.

 

<dd> 태그는 definition description(정의 설명)의 약자로, 정의되는 용어를 설명할 때 사용합니다.

 

위 태그들의 전체적인 레이아웃을 보면 아래와 같은 모양이 나옵니다.

<dl>
   <dt> 용어 제목 </dt>
       <dd> 용어 설명 </dd>
</dl>

html 코드

<article class="senews">

                <h3>분야별 뉴스</h3>

                <dl>

                  <dt>경제</dt>

                  <dd><a href="https://n.news.naver.com/mnews/article/366/0000863553?sid=101" target="_blank">지난해 대기업 된 중견기업 205개…실적·고용·투자 증가</a></dd>

                  <dd><a href="https://n.news.naver.com/mnews/article/003/0011600279?sid=101">기업 1인당 노동비용 월 585만원…전년대비 8.2% 증가</a></dd>

                 

                  <dt>사회</dt>

                  <dd><a href="https://n.news.naver.com/mnews/article/056/0011395427?sid=102" target="_blank">가수 이루, 강변북로서 음주운전 사고</a></dd>

                  <dd><a href="https://n.news.naver.com/mnews/article/018/0005390101?sid=102">대구발 대형마트 의무휴업 평일 전환, 전국으로 확산될까</a></dd>

                 

                  <dt>TV/연예</dt>

                  <dd><a href="https://entertain.naver.com/read?oid=408&aid=0000175503&cid=1073787" target="_blank">'더 글로리' 송혜교 "기존 모습과 달라 낯설수 있지만 즐거운 연기였다"</a></dd>

                  <dd><a href="https://entertain.naver.com/read?oid=112&aid=0003605690">[종합]"건강? 고비 있었지만"..'컬투쇼' 신구X손병호, 연극으로 전한 따뜻함</a></dd>

                 </dl>

              </article>