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>
많은 도움이 되셨으면 합니다.
'프로그램 > HTML' 카테고리의 다른 글
| 웹표준 div 코딩 전체 레이아웃 잡기 (9) | 2011.10.26 |
|---|---|
| HTML - IMG MAP 사용방법 정리 (13) | 2011.10.16 |
| 메뉴 마우스 오버시 서브메뉴 나타나는 간단한 스크립트 (9) | 2011.10.10 |
| 홈페이지 플래쉬와 레이어 겹쳐질때 보여지는 우선순위 (2) | 2011.10.01 |
| 현재 페이지에서 링크 클릭시 원하는 위치로 이동하는 태그 (0) | 2011.07.22 |
