CSS 목록
불순서 목록:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
순서 목록:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
HTML 목록과 CSS 목록 속성
HTML에서 목록은 주로 두 가지 유형이 있습니다:
- 불순서 목록(<ul>) - 목록 항목은 목록 표시 기호를 사용합니다
- 순서 목록(<ol>) - 목록 항목은 숫자나 문자 표시 기호를 사용합니다
CSS 목록 속성은 다음과 같은 기능을 제공합니다:
- 순서 목록에 다른 목록 항목 표시 기호 설정
- 불순서 목록에 다른 목록 항목 표시 기호 설정
- 이미지를 목록 항목 표시 기호로 설정
- 목록과 목록 항목에 배경색 추가
다른 목록 항목 표시 기호
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
속성은 목록 항목 표시 기호(목록 표시 기호)의 위치를 지정합니다。
"list-style-position: outside;" 의미는 목록 표시 기호가 목록 항목 밖에 위치한다는 것입니다. 목록 항목의 각 행의 시작은 직립적으로 정렬됩니다. 기본 설정입니다:
- Coffee -烘焙된 커피 씨를 사용하여 제조된 주전자 음료
- Tea
- Coca-cola
"list-style-position: inside;"
list-style-position: inside;"은 목차 표시기가 목록 항목 내부에 있는 것을 나타냅니다. 목록 항목의 일부로서, 텍스트의 일부가 됩니다. 그리고 텍스트의 시작 부분에서推开됩니다:
- Coffee -烘焙된 커피 씨를 사용하여 제조된 주전자 음료
- Tea
- Coca-cola
예제
ul.a { list-style-position: outside; } ul.b { list-style-position: inside; }
기본 설정 제거
list-style-type:none
attribute는 마크업/목차 표시기 또는 목차를 제거하는 데도 사용될 수 있습니다. 목록은 기본 외경과 내경을 가지고 있습니다. 이 내용을 제거하려면 <ul> 또는 <ol>에 추가하세요 margin:0
와 padding:0
:
예제
ul { list-style-type: none; margin: 0; padding: 0; }
목록 - shorthand attribute
list-style
attribute는 shorthand attribute입니다. 모든 목록 속성을 한 줄의 선언으로 설정하는 데 사용됩니다:
예제
ul { list-style: square inside url("sqpurple.gif"); }
shorthand attribute 사용 시, 속성 값의 순서는 다음과 같습니다:
list-style-type
(list-style-image가 지정되었을 때, 이미지가 어떤 이유로도 표시되지 않으면 이 속성 값이 표시됩니다)list-style-position
(목록 항목 표시기가 내용 흐름 내부에 있는지 외부에 있는지 지정)list-style-image
(이미지를 목록 항목 표시기로 지정)
위의 속성 값 중 하나가 누락되면, 누락된 속성의 기본 값이 삽입됩니다(있는 경우).
목록의 색상 스타일 설정
우리는 또한 색상 설정을 사용하여 목록 스타일을 더 재미있게 만들 수 있습니다.
any style added to <ol> or <ul> tags will affect the entire list, while properties added to <li> tags will affect individual list items:
예제
ol { background: #ff9999; padding: 20px; } ul { background: #3399ff; padding: 20px; } ol li { background: #ffe5e5; padding: 5px; margin-left: 35px; } ul li { background: #cce5ff; margin: 5px; }
결과:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
더 많은 예제
- 빨간 왼쪽 경계를 가진 커스텀 목록
- 이 예제에서는 빨간 왼쪽 경계를 가진 목록을 어떻게 만드는지 보여줍니다.
- 전면 넓이의 경계 목록
- 이 예제는 항목 표시 없이 경계선이 있는 목록을 생성하는 방법을 보여줍니다.
- 모든 다른 목록 항목 태그
- 이 예제는 CSS에서 모든 다른 목록 항목 태그를 보여줍니다.
모든 CSS 목록 속성
속성 | 설명 |
---|---|
list-style | 간단한 속성. 목록의 모든 속성을 하나의 선언에서 설정합니다. |
list-style-image | 이미지를 목록 항목 태그로 지정합니다. |
list-style-position | 목록 항목 태그(목록 표시)의 위치를 정의합니다. |
list-style-type | 목록 항목 태그 유형을 정의합니다. |