CSS Lists
CSS list 성질에 허용되는 것들:
- ordered lists 에 대한 list item 마커 설정
- unordered lists 에 대한 list item 마커 설정
- 목록 항목 마커로 이미지를 설정
- 목록 항목 마커의 위치 지정
List
HTML에서는 두 가지 유형의 목록이 있다.:
- unordered lists - 불릿(bullets)으로 목록 항목 표시
- ordered lists - 숫자나 문자로 목록 항목 표시
CSS 로 이미지를 목록 항목 마커로서 사용할 수 있다.
목록 항목 마커의 변화
목록 항목 마커의 유형은 list-style-type 속성으로 지정한다:
Example
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;
}
Try it yourself » 목록 항목 마커로 이미지
목록 항목 마커로 이미지를 지정하려면 list-style-image 속성을 사용합니다:
목록 항목 마커의 위치
list-style-position 속성은 목록 항목 마커 (글 머리 기호)의 위치를 지정합니다.
"list-style-position: outside;" 글 머리 기호가 목록 항목 외부에 있음을 의미합니다. 목록 항목의 각 줄의 시작은 세로로 정렬됩니다. 이것이 기본값입니다 :
- Coffee - A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
"list-style-position: inside;" 글 머리 기호가 목록 항목 안에 있음을 의미합니다. 목록 항목의 일부이므로 텍스트의 일부가 되고 시작시 텍스트를 푸시합니다.:
- Coffee - A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
List - 단축형(Shorthand) 속성
하나의 속성으로 모든 목록 속성을 지정할 수도 있습니다. 이를 단축형 속성이라 한다.
목록에 사용되는 약식 속성은 list-style 속성입니다:
단축형 속성을 사용하는 경우, 값의 순서는 다음과 같다:
- list-style-type
- list-style-position (for a description, see the CSS properties table below)
- list-style-image
위의 값 중 하나가 누락 된 경우라도, 나머지는 지정된 순서에 있는 한, 문제가 되지 않습니다.
More Examples
All
the different list-item markers for lists
This example demonstrates all the different list-item markers in
CSS.
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 »
All CSS List Properties
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies if the list-item markers should appear inside or outside the content flow |
| list-style-type | Specifies the type of list-item marker |