2008/01/10 15:11
목록 (ul, ol, dl)
list-style-type
– 목록 마커의 종류
- none, disc, circle, wquare, demical, lower-roman, upper-roman, lower-alpha, upper-alpha
- 표현 예 ol {list-style-type:lower-roman;}
활용
1. 블릿 표현하지 않기 : ul {list-style:none;}
2. 들여쓰기 하지 않기 : ul {list-style:none;padding-left:0;margin:0;}
3. 블릿을 이미지로 : ul {list-style-image:url(img/bullet_next.gif);}
4. 간격
ul {list-style-image:none;margin:0;}
li {background:url(img/bullet_next.gif) no-repeat 5px 46%; padding-left:17px;}
- no-repeat 사용시 5px 46% : 배경이미지를 왼쪽에서 5픽셀, 위에서부터 46%되는 위치에 표시
- padding-left:17px : 왼쪽으로부터 17px 떨어진 곳에서부터 글이 나옴
dl 요소
1. dt : 용어를 나타냄
2. dd : 설명, 목록 등등
- 일반 웹 브라우저에서는 들여쓰기로 표현되므로, margin:0, padding:0 을 지정
list-style-type
– 목록 마커의 종류
- none, disc, circle, wquare, demical, lower-roman, upper-roman, lower-alpha, upper-alpha
- 표현 예 ol {list-style-type:lower-roman;}
활용
1. 블릿 표현하지 않기 : ul {list-style:none;}
2. 들여쓰기 하지 않기 : ul {list-style:none;padding-left:0;margin:0;}
3. 블릿을 이미지로 : ul {list-style-image:url(img/bullet_next.gif);}
4. 간격
ul {list-style-image:none;margin:0;}
li {background:url(img/bullet_next.gif) no-repeat 5px 46%; padding-left:17px;}
- no-repeat 사용시 5px 46% : 배경이미지를 왼쪽에서 5픽셀, 위에서부터 46%되는 위치에 표시
- padding-left:17px : 왼쪽으로부터 17px 떨어진 곳에서부터 글이 나옴
dl 요소
1. dt : 용어를 나타냄
2. dd : 설명, 목록 등등
- 일반 웹 브라우저에서는 들여쓰기로 표현되므로, margin:0, padding:0 을 지정
Trackback Address :: http://marie1114.tistory.com/trackback/24
