> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/css-2/lists.md).

# 리스트 스타일링

> 리스트 스타일링, 리스트 스타일, 리스트 초기화, 

## CSS 리스트(Lists) 스타일링

HTML 목록과 관련된 속성

* HTML 목록 요소 `<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`

## 비순차 목록&#x20;

`<ul>`, `<ol>`, `<li>`

### \<list-style-type> : 리스트 타입 선택

* disc(채워진 원형, ul요소의 기본값) / circle(속이 빈 원형) / square(채워진 사각형)
* upper-alpha (A,B,C)
* lower-alpha (a,b,c)
* decimal (1,2,3) 순자 목록으로 사용 가능
* decimal-leading-zero (01,02,03)
* 외국어 등 여러가지 선택가능

### \<list-stye-position> : 리스트 위치(내부, 외부)를 선택

* outside (기본값)
* insid (들여쓰기, 마치 본문처럼 보일 수 있다.)
* 리스트 여백은 `<ul>`요소의 padding 속성으로 조절할 수 있다.

### \<list-style-image> : 기본 리스트 타입대신 이미지를 사용

* 이미지 주소 url을 입력
* url("../image/star.svg")

### \<list-style> : 속기 유형 작성법(단축형) **실무에서 많이 사용**

* square url("star.svg") inside
* `ui`, `ol` 요소에 설정해 주는 것을 권장, 해당 속성을 자식에게 상속되기 때문이다.&#x20;

### 예시

```css
/*[초기화]*/

list-style-type: none; (목록 스타일 지우기)
padding-left: 0; (들여쓰기 X)
```

```css
ul {
  list-style: none inside url("../images/stat.  svg");
}
/* 또는 */
ul {
  list-style: none url("../images/stat.  svg");
}
/* 또는 */
ul {
  list-style: url("../images/stat.svg");
}
```

```css
/*margin과 padding*/

li {
  line-height: 2; 줄 간격
  margin: 10px 0; (배경색이 들어가지 않는다.)
  /* 또는 padding: 10px 0; (배경색이 들어간다.)*/
}
```

## 정의 목록 &#x20;

`<dl>`, `<dt>`, `<dd>`

```css
/*[초기화]*/

dl {
  margin-top: 0;
  margin-bottom: 0;
}

dd {
  margin-left: 0;
}
```

## HTML 속성을 사용한 순차 목록 출력 설정

`<start>`, `<reversed>``<value>` 속성

```css
/*입력한 값부터 순서 시작 (9,10,11,12)*/
<ol start="9">

/*리버스 출력 설정, 반대로 출력 (9,8,7,6)*/
<ol start="9" reversed>
/

/*<li>요소에 임의의 숫자값을 입력할 수도 있다.*/
<li value="20">
<li value="30">
<li value="40">
```

### 참고 <a href="#undefined" id="undefined"></a>

* [리스트 스타일링](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)
* [리스트 스타일 유형](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type)