html 순서 및 목록 만들기
ul li, ol li, dl dt dd 활용하여 목록 및 순서는 기본으로 쓰는 것이지만 활용에 있어 어느 태그보다 많이 활용과 응용이 가능합니다.
<ul> 태그는 Unordered List 약자로 머리 기호에 번호 없이 기호를 붙이는 태그입니다. <ul> 을 단독으로 사용하는 것이 아니라 내부에 <li> 태그로 목록을 추가하게 됩니다. <li> 태그 하나하나가 목록이 되며 list-style-type 속성으로 기호를 결정하게 됩니다.
우선 기본적으로 html 순서 및 목록 만들기를 해보기로 하겠습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>ol, ul, dl 목록</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<ol>
<!--순서형목록-->
<li>익스플로러6</li>
<li>익스플로러7</li>
<li>익스플로러8</li>
</ol>
<ol type="A">
<!--type을 설정 할 수 있음 A,a,I,i -->
<li>지하철1호선</li>
<li>지하철2호선</li>
<li>지하철3호선</li>
</ol>
<ul>
<li>포토샵</li>
<li>일러스트</li>
<li>플래시</li>
</ul>
<ul type="square">
<!--type을 설정 할 수 있음 circle,disc,square -->
<li>파이어폭스</li>
<li>오페라</li>
<li>사파리</li>
<li>크롬</li>
<li>익스플로러</li>
</ul>
<dl>
<!--정의형 목록 -->
<dt>용어의제목</dt>
<dd>용어의설명,해석,해설</dd>
<dd>용어의설명,해석,해설</dd>
<dd>용어의설명,해석,해설</dd>
</dl>
</body>
</html>
[홈페이지만들기] - html 창크기 조절(반응형코딩)
[홈페이지만들기] - ul li 가로정렬로 메뉴만들기 (css가로정렬)
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| CSS style 컬러 기본설정 (0) | 2017.02.09 |
|---|---|
| vertical-align와 text-align CSS 활용하여 정렬하기 (2) | 2017.02.03 |
| html 창크기 조절(반응형코딩) (7) | 2017.01.28 |
| ul li 가로정렬로 메뉴만들기 (css가로정렬) (5) | 2017.01.27 |
| div 프레임나누기 (2) | 2017.01.25 |
