CSS List

Unordered Lists:

• Coffee
• Tea
• Coca Cola

• Coffee
• Tea
• Coca Cola

Ordered Lists:

1. Coffee
2. Tea
3. Coca Cola

1. Coffee
2. Tea
3. Coca Cola

HTML에서 두 가지 주요 리스트 유형이 있따.

unordered lists <ul> : 동그라미와 같은 기호가 머리에 옴

ordered lists <ol> : 숫자나 문자가 머리에 옴

CSS 리스트는 다음을 허용한다

ol, ul에 대해 다른 리스트 아이템 마커 설정, 리스트 아이템 마커로써 이미지 설정, 리스트와 리스트 아이템에 배경색 추가

Different List Item Markers

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');
}

Position The List Item Markers

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-style-type:none;은 마커를 제거할 때 쓰인다. 리스트는 기본적으로 margin과 padding을 가진다.

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

List shorthand property

list-style 속성은 숏핸드 속성이다. 하나의 선언 안에 모든 리스트 속성을 설정할 수 있다.

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

속성 값의 순서는 1. list-style-type() 2. list-style-position 3. list-style-image

Styling List With Colors

<ol>, <ul> 태그에 뭔가를 추가하면 리스트 전체에 영향을 주고, <li> 태그에 속성이 추가되면 개별적인 리스트 아이템에 영향을 미친다.

1. Coffee
2. Tea
3. Coca Cola

• Coffee
• Tea
• Coca Cola

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;
}

https://www.w3schools.com/css/css_list.asp