1. Coffee
2. Tea
3. Coca Cola

• Coffee
• Tea
• Coca Cola

HTML 목록과 CSS 목록 속성

HTML에는 2개의 주요 목록 형태가 있습니다.

• 순서 없는 목록(<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속성은 목록 항목 마커를 콘텐츠 흐름 내부 또는 외부에 표시할 지를 지정합니다.

ul {
    list-style-position: inside;
}

기본 설정 제거

list-style-type:none은 마커/볼릿을 제거하는데 사용할 수 있습니다. 목록에는 기본 margin과 padding이 있습니다. 이를 제거하려면 <ul> 또는 <ol>에 margin:0 과 padding:0을 추가해야 합니다.

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

목록 단축 속성

list-style속성은 단축속성입니다. 하나의 선언에 모든 목록 속성을 설정하는데 사용됩니다.

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

단축 속성을 사용할 때 속성 값의 순서는 다음과 같습니다.

• list-style-type : (list-style-image가 지정되면 어떤 이유로 이미지를 표시할 수 없는 경우 이 속성의 값이 표시됩니다.)
  
• list-stye-position : (목록 항목 마커를 내용 흐름 내부 또는 외부에 표시할 지를 지정)
  
• list-style-image : (이미지를 목록 항목 마커로 지정)
  

위의 속성 값 중 하나가 누락된 경우 누락된 속성의 기본값이 삽입됩니다.

색을 이용한 목록 스타일

색상을 사용하여 목록을 스타일링하여 좀 더 재미있게 볼 수도 있습니다.

<ol>또는 <ul>태그에 추가된 것은 전체 목록에 영향을 미치지만 <li>태그에 추가된 속성은 개별 목록 항목에 영향을 미칩니다.

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