dl, dt, dd 용례

<style>
dl { margin:0; }
dt { margin:0; }
dd { margin:0; padding-right:3px; }
</style>
<dl>
    <dt>apmsoft 의 apm의 뜻은?</dt>
    <dd>a : 아파치(apache)</dd> 
    <dd>p : PHP</dd>
    <dd>m : MYSQL</dd>
</dl>

# 결과 -->
apmsoft의 apm의 뜻은?  
    a : 아파치(apache)   
    p : PHP                   
    m : MYSQL              

<help>
위와 같이 출력 된다. 
기본적으로 dl, dt, dd 태그는 블록적 성격을 가진다.
그래서 한줄씩 출력하게 된다.

<style>
dl { margin:0; }
dt { margin:0; }
dd { margin:0; display:inline; padding-right:3px; }
// dd 를 inline 으로 설정 했을 경우
<dl>
    <dt>apmsoft 의 apm의 뜻은?</dt>
    <dd>a : 아파치(apache)</dd> 
    <dd>p : PHP</dd>
    <dd>m : MYSQL</dd>
</dl>

apmsoft의 apm의 뜻은?  
    a : 아파치(apache)   p : PHP   m : MYSQL    

inline 을 설정해 주면 세로가 아닌 가로로 출력됩니다.
dl,dt,dd를 사용하면 목록을 나타내기 때문에 구조적인 코딩이라 할 수 있습니다.

[출처] dl, dt, dd 태그 css로 정의하기|작성자 멋쟁이

제 4 장 리스트
--------------
용어 리스트
--------------

DL(Definition List)
-------------------
옵션
----
<DL> : 용어 리스트(Definition List)
  <DT> : 용어의 제목(Definition Term)
  <DD> : 용어의 의미(Definition Description)
</DL>

[실습] 다음을 입력하여 브라우저에서 확인하여 보자.

<dl>
  <dt> html이란?
  <dd> 하이퍼 텍스트 형식의 파일을 브라우저에서 볼 수 있도록 하기 위한 언어입니다.
</dl>

글머리기호 리스트
-----------------
UL(Un-ordered List)
-------------------
옵션
----
<UL> : Un-ordered List
  <LI> : 리스트 항목(List Item)
</UL>

<LI TYPE="글머리기호">
  글머리기호 TYPE=disk(검은 원)
             TYPE=circle(흰 원)
             TYPE=square(사각 박스)

[실습]
----다음을 입력하여 브라우저에서 확인하여 보자.
<ul>
  <li> 검은 원이 보이죠
  <li type="disk"> 검은 원이 보이죠   
  <li type="circle"> 흰원도 보이고
  <li type="square"> 사각박스도 보이네요
</ul>
 
번호 리스트
-----------
 
OL(Ordered List)
----------------
옵션
----
<OL> : Ordered List
  <LI> : 리스트 항목(List Item)
</OL>
 
<LI TYPE="번호의 종류">
  TYPE="A" 영문 대문자
  TYPE="a" 영문 소문자
  TYPE="I" 로마 숫자 대문자
  TYPE="i" 로마 숫자 소문자
  TYPE="1" 아라비아 숫자
 
<LI VALUE="시작번호"> : 시작번호를 변경
<OL START="시작번호">
 

[실습] 다음을 입력하여 브라우저에서 확인하여 보자.
 
<ol>
  <li type="A"> 영문 대문자
  <li type="I"> 로마 숫자 대문자
  <li value="5"> 아라비아 숫자
  <li> 아라비아 숫자
</ol>
[출처] 4장 리스트 (컴스미) |작성자 한진

ul : unordered list (일반 목록, li 앞에 기호가 붙음)
li : list item (목록 항목)
 
<p>대표적인 화면표시 브라우저는 다음의 다섯가지 이다.</p>
<ul>
  <li>Internet Explorer</li>
  <li>Mozilla FireFox</li>
</ul>
 
-----------------------------------------------------
 
ol : ordered list (숫자붙은 목록, li 앞에 '1.'이 붙음)
li : list item (목록 항목)
 
<p>점유율 상위2개의 화면표시 브라우저는 다음과 같다</p>
<ol>
  <li>Internet Explorer</li>
  <li>Mozilla FireFox</li>
</ol>
 
-----------------------------------------------------
 
dl : definition list ('용어'와 그 '설명'으로 구성된 목록)
dt : definition term (용어)
dd : definition description (설명)
 
<dl>
  <dt>MIDI</dt>
  <dd>
    <p>Musical Instrument Digital Interface의 약자. 음악데이터의 세계공용규격이며 웹에서 일반적으로 사용되는 음성파일형식. 선율을 음표로 표현하는 데이터타입이기 때문에 파일사이즈가 작고 웹에서의 배급에 적합한 특성이 있다. 확장자는 ".mid" 또는 ".midi".</p>
  </dd>
  <dt>MP3</dt>
  <dd>
    <p>MPEG Audio Layer-3의 약자. 영상데이터의 압축방식인 MPEG-1안의 음성데이터 압축기술을 적용하여 작성된 음성파일형식. 확장자는 ".mp3"</p>
    <p>CD정도의 음질인 무압축의 WAVE파일과 비교하러때 파일 사이즈를 1/11정도까지 압축할 수 있다.(하위 기술인 MP1은 약 1/4, MP2는 약 1/7의 압축률)</p>
  </dd>
</dl>
 
-----------------------------------------------------