• <ul> , <ol> 엘리먼트는 기본적으로 위 아래 마진 16px (1em), 왼쪽 패딩 40px (2.5em) 을 갖는다.

• <li> 엘리먼트는 기본적으로 별 다른 여백이 없다.

• <dl> 엘리먼트는 기본적으로 위 아래 마진 16px (1em) 을 갖지만 패딩은 없다.

• <dd> 엘리먼트는 기본적으로 왼쪽 마진 40px (2.5em) 을 갖는다.

List-specific styles

<ul> 또는 <ol> 엘리먼트에 설정할 수 있는 세 가지 프로퍼티가 있다.

• list-style-type
  

  li::marker pseudo-element로 접근할 수 있다.
  단, ::marker는 <li> 에 적용해야 한다.

• list-style-position
  inside면 <li> 에 포함된다.
  
  outside면 포함되지 않는다.
  

• list-style-image
  

  다만, 이 프로퍼티에서는 이미지의 위치, 크기 등을 제어하는 측면에서 다소 제한적이다.
  따라서 background 프로퍼티를 이용해서 list style type을 보여주는 것이 좋다.

  ul {
    padding-left: 2rem;
    list-style-type: none;
  }
  
  ul li {
    padding-left: 2rem;
    background-image: url(star.svg);
    background-position: 0 0;
    background-size: 1.6rem 1.6rem;
    background-repeat: no-repeat;
  }

  <ul> 의 마커를 none으로 설정해서 아무것도 보이지 않도록 설정한다.
  그 후 <li> 에 별모양 이미지를 배경으로 지정한다.
  왼쪽 패딩을 2rem만큼 주고 그 곳에 별 이미지를 위치 시킨뒤 사이즈를 2rem 이내의 적절한 크기로 세팅한다.
  
  
  

Controlling list counting

<ol> 에 순서를 매길때 1이 아닌 다른 숫자부터 매기고 싶을 때 사용할 수 있는 HTML attribute가 있다.

• start

  <ol start="4">
    <li>Toast pita, leave to cool, then slice down the edge.</li>
    <li>
      Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
    </li>
    <li>Wash and chop the salad.</li>
    <li>Fill pita with salad, hummus, and fried halloumi.</li>
  </ol>

  

• reversed

  <ol start="4" reversed>
    <li>Toast pita, leave to cool, then slice down the edge.</li>
    <li>
      Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
    </li>
    <li>Wash and chop the salad.</li>
    <li>Fill pita with salad, hummus, and fried halloumi.</li>
  </ol>

  

  reversed order list에 시작 값보다 많은 항목이 있는 경우 0, -1, -2 와 같이 음수 값으로 내려간다.

• value

  <ol>
    <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
    <li value="4">
      Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
    </li>
    <li value="6">Wash and chop the salad.</li>
    <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
  </ol>

  

[참고] : MDN