CSS
스타일 목록

통사론

• list-style : list-style-type | 리스트 - 스타일 - 위치 | list-style-image | 초기 | 상속하다;

매개 변수

비고

글 머리 기호 또는 번호 매기기 유형

정렬되지 않은 목록 ( <ul> ) 내의 <li> 태그에 특정 :

list-style: disc;                /* A filled circle (default) */
list-style: circle;              /* A hollow circle */
list-style: square;              /* A filled square */
list-style: '-';                 /* any string */

순서가 지정된 목록 ( <ol> ) 내의 <li> 태그 <ol> :

list-style: decimal;             /* Decimal numbers beginning with 1 (default) */
list-style: decimal-leading-zero;/* Decimal numbers padded by initial zeros (01, 02, 03, … 10) */
list-style: lower-roman;         /* Lowercase roman numerals (i., ii., iii., iv., ...) */
list-style: upper-roman;         /* Uppercase roman numerals (I., II., III., IV., ...) */
list-style-type: lower-greek;    /* Lowercase roman letters (α., β., γ., δ., ...) */
list-style-type: lower-alpha;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: lower-latin;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: upper-alpha;    /* Uppercase letters (A., B., C., D., ...) */
list-style-type: upper-latin;    /* Uppercase letters (A., B., C., D., ...) */

비 특정 :

list-style: none;                /* No visible list marker */
list-style: inherit;             /* Inherits from parent */

총알 위치

목록은 <li> 포함 요소 ( <ul> 또는 <ol> ) 안의 요소로 구성됩니다. 목록 항목과 컨테이너에는 문서의 목록 항목 내용의 정확한 위치에 영향을주는 여백과 패딩이있을 수 있습니다. 여백 및 채우기의 기본값은 각 브라우저마다 다를 수 있습니다. 브라우저 간 레이아웃을 동일하게 설정하려면 구체적으로 설정해야합니다.

각 목록 항목은 글 머리 기호를 포함하는 '마커 상자'를 가져옵니다. 이 상자는 목록 항목 상자의 내부 또는 외부에 배치 할 수 있습니다.

list-style-position: inside;

<li> 엘리먼트 안에 글 머리 기호를 넣고 필요에 따라 오른쪽으로 내용을 밀어 넣습니다.

list-style-position: outside;

<li> 요소의 왼쪽에 글 머리 기호를 배치합니다. 포함 요소의 여백에 충분한 공간이 없으면 마커 상자가 페이지에서 벗어나더라도 왼쪽으로 확장됩니다.

inside 과 outside 위치 지정 결과 표시 : jsfiddle

글 머리 기호 / 숫자 삭제하기

경우에 따라 목록에 글 머리 기호 또는 숫자가 표시되지 않는 경우도 있습니다. 이 경우 여백 및 패딩을 지정해야합니다.

<ul>
    <li>first item</li>
    <li>second item</li>
</ul>

CSS

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