CSS List (목록)

list-style-type속성

목록 항목 마커의 유형을 지정한다.

 

간단한 예시

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

 

list-style-image속성

이미지를 목록 항목 마커로 지정합니다.

ul {
  list-style-image: url('sqpurple.gif');
}

 

list-style-position 속성

목록 항목 마커(글머리 기호)의 위치를 ​​지정합니다 .

 

ul.a {
  list-style-position: outside; // 글머리 기호가 목록 항목 외부에 있음을 의미한다. 
                                   이 옵션이 기본값이다.
}

ul.b {
  list-style-position: inside; // 글머리 기호가 항목 항목 안에 있음을 의 미한다.
                                  목록 항목의 일부이므로 텍스트의 일부가 되며 
                                  시작부분에 텍스트를 밀어 넣는다.
}

 

list-style-type:none속성

마커/글머리 기호를 제거하는 데에도 사용할 수 있습니다.

목록에는 기본 여백과 패딩도 있습니다. 

이를 제거하려면 margin:0 과 padding:0를 <ul> 또는 <ol>에 추가해야한다.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

 

list-style속성은 속기 속성

• list-style-type(list-style-image를 지정하면 어떤 이유로 이미지를 표시할 수 없는 경우 이 속성의 값이 표시됨)
• list-style-position(목록 항목 마커가 콘텐츠 흐름 내부 또는 외부에 나타나야 하는지 여부 지정)
• list-style-image(이미지를 목록 항목 마커로 지정)

이 순서대로 속성 값을 기입한다.

ul {
  list-style: square inside url("sqpurple.gif");
}