메뉴 보이기
Profile
이온디

2009.01.29

HTML5

dl, dt, dd 용례

조회 수 9762 추천 수 0
출처 및 URL http://www.w3.org/TR/html4/index/elements.html 
소스 http://blog.naver.com/ehomebuild/150015733330
http://cafe.naver.com/comsmee/439 
DL(정의 목록,definition list) - '용어'와 그 '설명'으로 구성된 목록
DT(정의 제목,definition term) - 용어
DD(정의 설명,definition description) - 설명

<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>
 
-----------------------------------------------------
Profile
0
Lv

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
119 [Script] 세로 슬라이드 메뉴, 마우스 오버 1 2012.12.13 5991
118 [Script] 세로 슬라이드 메뉴 2012.12.13 7559
117 [미분류] 특정도메인으로 접속시 원하는도메인으로 리다이렉트 시키기 2010.01.31 19738
116 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 동철) 2009.02.23 9872
115 Show-Hide Layers(2) (by 태그매니아) 2009.02.10 8744
114 [Script] 레이어컨트롤 마우스오버 드롭다운 메뉴 2 2009.02.10 12546
113 Show-Hide Layers 클릭한 걸 기억하는 (by 알릭) 1 1 2009.02.03 6867
112 [HTML5] <hr> 2009.02.02 8785
111 [UI] 글읽기 화면의 인터페이스 2009.02.01 7529
110 반응 좋은 메뉴 스크립트 2 2009.01.31 9152
109 [UI] 네이버 홈 개편 1 2009.01.31 7539
108 [Script] 마우스오버 드롭다운 메뉴 (알릭님 수정본) 2009.01.30 9610
[HTML5] dl, dt, dd 용례 2009.01.29 9762
106 [Script] XE Layout Menu Script 1 2009.01.25 5964
105 자바스크립트 TAB 메뉴 2009.01.20 10248
104 [Script] 부드럽게 슬라이딩 되면서 펼쳐지는 메뉴 (세로, 사이드메뉴) 10 2009.01.20 14196
103 [Script] 옆에서 펼쳐지는 레이어 2009.01.20 6155
102 팝업형식의 메뉴 네비게이션 2009.01.20 4649
101 Side 메뉴 2009.01.20 4287