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>
사용예
<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값일때는 스타일에 .을 넣네요 ~~
<!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년넘게 써오지만 코딩이라는건 정답이 없습니다. 사용하기에 따라 달라지는게 코딩입니다.