Trio 홈페이지 CSS 매뉴얼 목록(List) 특성 예제 메뉴로
CSS2 규격 목록(list) 참조 HTML 규격 목록 참조
목록 단추
list-style-type

CSS1 규격
목록 단추 설명
번호 있는 목록(ordered list) 에서 번호 형태나
번호 없는 목록(unordered list)에서 단추(bullet) 타입을 지정
번호 있는 목록(ordered list)에서 번호 형태에서
OL {list-style-type: lower-roman;}
값은 decimal, lower-roman, upper-roman, lower-alpha, upper-alpha 번호 없는 목록(unordered list) 에서 단추(bullet) 타입에서
UL {list-style-type: square;}
값은 disc, circle, square, none
목록 이미지
list-style-image
CSS1 규격
목록 이미지 설명
목록에서 단추(bullet) 타입(image)을 지정한다.
값은 URL, none
UL {list-style-image: url(bullet.gif);}
목록 번호 위치
list-style-position
CSS1 규격
목록 번호 위치 설명
목록 기호의 위치를 정한다.
번호 있는 목록(ordered list)에서 번호 위치나
번호 없는 목록(unordered list)에서 단추(bullet) 위치을 지정.
값은 inside, outside, inside가 밀어 넣기 임.
LI {list-style-position: outer;}
목록 특성
list-style
CSS1 규격
목록 특성 설명
한번에 목록의 여러 특성 지정.
가능 한 요소는 list-style-type, list-style-position, url
UL {list-style: square url(bullet.gif) outer;}
space
예제
<STYLE type=text/css>
 .list1 {list-style-type: circle;}
 .list3 {list-style-type: square;}
 .list2 {list-style-type: lower-roman;}
 .list4 {list-style-image: url(../../gif/balls.gif);}
</STYLE>


<ul class=list1>
  <li> unordered list #1 circle bullet
    <ol type=A>
      <li> ordered list # 1
      <li class=list2> ordered list # 2 </ol>
  <li class=list3> unordered list #2 square bullet
  <li class=list4> unordered list #3 image bullet
</ul>
결과
  • unordered list #1 circle bullet
    1. ordered list # 1
    2. ordered list # 2
  • unordered list #2 square bullet
  • unordered list #3 image bullet
공백
white-space

CSS1 규격
공백 설명
엘레멘트에 흰 공백 지정 값은
normal, pre, nowrap
normal : 여러개의 공백을 하나로 만든다.
pre : 공백을 그대로 나타낸다.
nowrap : <BR> 없이는 줄 바꿈(Line Wrap)을 허용하지 않음.
TD {white-space: nowrap;}
TT {white-space: pre;}

소개 일반 텍스트 폰트 박스 색상 목록 색인 예제
번역문 소유자 - Trio 홈페이지 제공
이 문서(http://trio.co.kr/webrefer/css/csslist.html)는
자유로이 연결 사용이 가능함.
예제 메뉴로