반응형
출처 : 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; } [출처] 웹표준가이드(9)/List (ul, ol, dl, dt, dd) |작성자 마그리뜨 |
반응형
'Development > HTML' 카테고리의 다른 글
| 웹표준가이드(11)/테이블(Table) (0) | 2013.05.30 |
|---|---|
| 웹표준가이드(10)/박스모델(Box Model) (0) | 2013.05.30 |
| 웹표준가이드(8)/css 레이아웃기초-2 (0) | 2013.05.29 |
| 웹표준가이드(7)/css 레이아웃기초-1 (0) | 2013.05.29 |
| 웹표준가이드(6)/css 레이아웃기초 (0) | 2013.05.29 |
댓글