web standard/tag2008. 7. 29. 10:26

목록 (List)

 

세가지 목록

 ul(unordered list) 순서가 없는 리스트
 ol(ordered list) 순서가 있는 리스트
 dl(definition list) dt = term , dd = definition 쌍으로 이루어진 리스트


각 브라우저별 특징

 <ol>, <ul> <li>좌측 기본마진 발생, 브라우저별 블릿 다름 (background-image로 해결)
 <dl> 출력사항 없음 단 <dd>에서 기본마진 있음


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Unordered List</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
</body>
</html>


아무런 블릿 스타일도 적용되지 않은 세줄의 텍스트가 나옴

여기에 아래 스타일을 적용시키면 블릿을 가진 리스트가 생긴다.

 li {

background: url(bullet.gif) no-rpeat 0 0.25em;

padding-left: 15px;

}

'web standard > tag' 카테고리의 다른 글

embed태그  (0) 2011.02.06
object를 이용한 플래시 삽입  (0) 2010.04.28
textarea 컨트롤  (0) 2008.11.04
올바른 마크업을 위한 준수사항  (0) 2008.07.29
테이블  (0) 2008.07.29
Posted by 수라