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를 따로 지정해야 할 것입니다.