JKUN

Welcome To The Jkun.net

Blog

웹표준가이드(9)/List (ul, ol, dl, dt, dd)

2013.05.29 18:18 Development/HTML / XHTML


출처 : http://blog.naver.com/maglitt/60053124686

목록 (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;

}


저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment