HTML dl dt dd 태그의 다양한 경우의 수 및 디자인 효과

by

HTML <dl> 태그는 용어의 정의와 내용 설명이 필요할 때 사용하는 태그입니다. <dt> 태그는 제목을 의미합니다. <dd> 태그는 내용 설명을 의미합니다. <dt> 제목과 <dd> 내용 파트는 서로 개수가 대응되지 않아도 괜찮습니다.

<dl> 태그

HTML <dl> 태그는 정의가 필요한 목차를 설정할 때 사용합니다. <dl> 태그 단독으로는 사용될 수 없습니다. <ol>, <ul> 태그가 <li> 태그와 결합되서 사용하듯, <dl> 태그는 <dt> 태그와 <dd> 태그와 결합해서 사용합니다.

<dl>
  <dt>정의</dt>
  <dd>정의를 설명합니다.</dd>
</dl>

<dt> 태그

<dt> 태그는 용어의 정의를 나타내는 파트입니다. 인라인 요소이기 때문에 <li>, <ul>, <p> 등과 같은 블록 요소가 내부로 삽입될 수 없습니다.

<dl>
  <dt>이그노벨상</dt>
</dl>

<dd> 태그

<dd> 태그는 <dt> 태그의 용어를 설명하는 부분입니다. 기본적으로 들여쓰기가 설정되있습니다. <dd> 태그는 블록 요소이기 때문에 <p>, <br>, <img>, <link>, <ul>, <ol>, <li> 등과 같은 블록 요소를 자유롭게 삽입할 수 있습니다.

<dl>
  <dt>이그노벨상</dt>
  <dd>하버드 대학교 유머 잡지에서 발행하는 기이한 연구 상
    <ul>
      <li>설립년도 : 1995년</li>
      <li>시상시기 : 매년 10월</li>
      <li>시상장소 : 하버드대학교 샌더스 극장</li>
      <li>수상절차 : 이그노벨위원회 + 지나가는 행인투표</li>
    </ul>
  </dd>
</dl>

<dt> 소수 + <dd> 다수

<dt> 태그 소수에 <dd> 태그 다수가 오는 구조도 가능합니다.

<dl>
  <dt>노벨상</dt>
  <dd>설립년도 : 1895년</dd>
  <dd>설립장소 : 스웨덴</dd>
  <dd>첫 시상 : 1901년</dd>
</dl>

<dt> 다수 + <dd> 소수

<dt> 태그 다수에 <dd> 태그 소수의 기입 형태도 가능합니다.

<dl>
  <dt>노벨물리학상</dt>
  <dt>노벨화학상</dt>
  <dt>노벨생리학,의학상</dt>
  <dt>노벨문학상</dt>
  <dt>노벨평화상</dt>
  <dt>노벨경제학상</dt>
  <dd>노벨경제학상은 스웨덴 왕립 은행에서 상금을 따로 수여하고 있습니다. 나머지 노벨상은 노벨 재단에서 상금이 수여됩니다.</dd>
</dl>

<dt> 다수 + <dd> 다수

<dt>태그 다수와 <dd> 태그 다수를 삽입하는 것도 가능합니다.

<dl>
  <dt>노벨 수상자 평균 IQ</dt>
  <dd>145</dd>
  <dt>노벨상 발표일</dt>
  <dd>매년 10월</dd>
  <dt>노벨상 시상식</dt>
  <dd>매년 12월 10일</dd>
  <dt>노벨상 시상 장소</dt>
  <dd>스웨덴(나머지)/노르웨이(평화상)</dd>
</dl>

<dl> 태그 디자인

<dd> 들여쓰기

<dd> 태그는 자동으로 들여쓰기가 40px 정도로 설정되있습니다. 간격을 왼쪽에 붙이고 싶다면 margin-left 값을 0px;로 조절하면 됩니다. 기타 들여쓰기는 px 크기 조절로 가능합니다.

style 속성으로 margin-left 속성값을 직접 삽입한 경우입니다.

<dl>
  <dt>과일</dt>
  <dd style="margin-left:0px;">사과</dd>
  <dd>딸기</dd>
  <dd style="margin-left:40px;">석류</dd>
  <dd style="margin-left:60px;">수박</dd>
</dl>

css 선택자를 dd 태그에 씌워서 들여쓰기 효과를 준 경우입니다.

dd {
  margin-left: 0px;
}

<dt> <dd> 한 줄 출력

<dt> 태그 정의와 <dd> 태그 내용을 한 줄에 출력할 경우,  <dt> 태그에 몇 가지 css 효과를 주면 됩니다.

float:left; 속성을 주면, <dt> 태그가 <dd> 태그 앞으로 배치됩니다. 단 <dd> 태그의 데이터가 앞에 붙어버리기 때문에 <dt> 태그에 margin-right 속성으로 오른쪽에 간격을 조금 벌려주면 됩니다.

dt {
  float: left;
  margin-right: 15px;
}

<dl> 배경색 변경

<dl>, ><dt>, <dd> 태그 뒤에 style 속성과 background-color 속성값을 삽입해서 직접 배경색을 변경할 수 있습니다.

<dl>
  <dt style="background-color:lightpink;">하늘</dt>
  <dd style="background-color:skyblue;">파랗다.</dd>
</dl>

또는 CSS 선택자로 dl, dt, dd에 개별 선택자를 부여해서 일괄 변경할 수 있습니다.

dl {
  background-color: royalblue;
}

<dl> 글자색 변경

글자색 변경은 <dl>, <dt>, <dd> 태그 뒤에 style 속성과 color 속성값을 직접삽입하여 변경할 수 있습니다.

<dl style="color:red;">
  <dt>산</dt>
  <dd style="color:darkgreen;">녹색이다</dd>
</dl>

또는 CSS 선택자를 dl dt, dd에 삽입해서 변경할 수 있습니다.

dd {
  color:red ;
}

<dl> 테두리 변경

<dl>, <dt>, <dd> 태그에 style 속성과 border 속성값을 삽입하면 테두리를 삽입할 수 있습니다. px은 선의 두께, solid는 선의 종류, black은 선의 색을 정의합니다.

<dl style="border:1px solid black;">
  <dt>오파츠</dt>
  <dd>시대를 벗어난 유물</dd>
</dl>

테두리와 텍스트 사이 간격은 padding으로 조절합니다.

<dl style="border:1px solid blue;padding:20px;">
  <dt>한국</dt>
  <dd>한글을 사용합니다.</dd>
</dl>

또는 CSS 선택자를 활용해서 dl, dt, dd에 각각 테두리를 변경할 수 있습니다.

dd {
  border: 2px dashed blue;
}

<dl> 글씨체 변경

<dl>, <dt>, <dd> 태그 뒤에 style 속성과 font-family 속성값을 사용하면 글씨체를 변경할 수 있습니다.

<dl>
  <dt style="font-family:궁서체;">영국</dt>
  <dd>영어를 사용합니다</dd>
</dl>

또는 dl, dt, dd에 css 선택자를 부여해서 글씨체를 변경할 수 있습니다.

dd {
  font-family: 바탕체;
}

<dl> 글씨크기 변경

<dl>, <dt>, <dd> 태그 뒤에 style 속성과 font-size 속성값 삽입으로 글씨 크기를 변경할 수 있습니다.

<dl>
  <dt style="font-size:30px;">노벨물리학 1회 수상</dt>
  <dd>륀트켄이라는 독일 물리학자가 X선 발명을 통해서 수상했습니다.</dd>
</dl>

dl, dt, dd에 css 선택자를 삽입해서 글씨 크기를 변경할 수도 있습니다.

dt {
  font-size: 30px;
}

그러나 좀 더 보편적인 방법은 클래스나 id를 따로 지정해야 할 것입니다.