본문 바로가기

홈페이지만들기/Html_css&css3

html 순서 및 목록 만들기

반응형

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가로정렬)

[홈페이지만들기] - div 프레임나누기

[홈페이지만들기] - div 배치하기


반응형