초보자 웹표준 (div 코딩) ul, li, dl, dt, dd 사용법

프리오 2012.06.24 18:25:16 출처:
초보자 웹표준 (div 코딩) ul, li, dl, dt, dd 사용법

ul,li div코딩 사용방법

ul, li 는 UnOrderd List의 약자로 순서없는 리스트를 구현할 때 쓰이죠.

하지만, 메뉴 등과 같이 그냥 나열되는 것에도 많이 쓰입니다.

css로 원래 ul, li의 속성을 제어해서 사용하는 것이지요.

css로 제어하기에 따라서 이미지 변환 및 좌>우, 상>하의 나열이 가능합니다.



ul,li div코딩 기본 문법

<div>

   <ul>

      <li></li>

   </ul>

</div>


dl,dt,dd div 코딩 사용방법

dl, dt, dd는 Definition List의 약자로 설명형 목록을 만들 때 사용합니다.

화면의 모습은 거의 '표'형태와 흡사합니다. 목록태그의 한 종류로 생각하시면 되겠습니다.

일반적으로 '표'형태로 제목, 설명을 쓰고자 할 때나..

폼(글쓰기) 디자인에서 많이 쓰입니다.



dl,dt,dd div 코딩 기본 문법

<div>

   <dl>

      <dt>

          <dd></dd>

      </dt>

   </dl>

</div>


사용예

 
ul과 li 코딩 html코딩으로 css적용방법 좀 부탁드립니다. 


<html>

<style>

.t { border: 1px solid red; }

#outter { width:500px; height:500px; }

#top { width:500px; height:200px; }

#menu { width:500px; height:50px; }

ul{

 margin: 0px;

 padding: 0px;

 list-style: none;

}

li {

 margin:0px;

 padding:0px;

 width:50px;

 float:left;

}

</style>

<body>

<div id="outter" class="t">

 <div id="top" class="t">

  <div id="menu" class="t">

   <ul>

    <li class="t">a</li>

    <li class="t">a</li>

    <li class="t">a</li>

    <li class="t">a</li>

   </ul>

  </div>

 </div>

</div>

</body>

</html>

div id값일때는 스타일에 #  div class값일때는 스타일에 .을 넣네요 ~~



사용예 2


div 코딩으로 짜는방법좀 가르쳐 주세요??

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <title></title>

        <style type="text/css">

            div {

                display: inline;

                float: left;

            }

            #test {

                width: 300px;

            }

            #test .left {

                width: 200px;

                height: 20px;

            }

            #test .left1 {

                background: #AAAAAA;

            }

            #test .left2 {

                background: #CCCCCC;

            }

            #test .left3 {

                background: #EEEEEE;

            }

            #test .rightLine3 {

                float: right;

                width: 100px;

                height: 60px;

                background: silver;

            }

        </style>

    </head>

    <body>

        <div id = "test">

            <div class = "rightLine3">우측</div>

            <div class = "left left1">좌1</div>

            <div class = "left left2">좌2</div>

            <div class = "left left3">좌3</div>

        </div>

    </body>

</html>


 마지막으로 저또한 TABLE 코딩을 5년넘게 써오지만 코딩이라는건 정답이 없습니다. 사용하기에 따라 달라지는게 코딩입니다.