# 리스트와 테이블

| 속성 | 설명 | 옵션 |
|---|---|
| list-style | 리스트 스타일 한 번에 설정 |
| table-layout | 테이블 크기 조정 방식 | auto, fixed |
| border-collapse | 테두리 합치기 | separate, collapse |
| border-spacing | 셀 간 간격 |
| caption-side | 표 제목 위치 | top, bottom |
| empty-cells | 빈 셀 표시 여부 | show, hide |
| vertical-align | 셀 내 텍스트 정렬 | top, middle, bottom |

## 리스트 관련 속성 (List Properties)
리스트(ul, ol, li) 스타일을 조정할 때 사용되는 속성들!

### list-style
리스트 스타일 한 번에 설정
```css
list-style: [list-style-type] [list-style-position] [list-style-image];
```
```css
ul {
  list-style: square inside url('icon.png');
} /* 리스트 기호를 square로 변경하고, 내부 정렬(inside) 적용, 아이콘 추가! */
```

#### list-style-type
리스트 기호 변경
* none :	목록 기호 없음
* disc :	● (기본값)
* circle :	○ (빈 원)
* square :	■ (사각형)
* decimal :	1, 2, 3, ...
* lower-roman :	i, ii, iii, iv, ...
* upper-roman :	I, II, III, IV, ...
* lower-alpha :	a, b, c, d, ...
* upper-alpha :	A, B, C, D, ...
* cjk-decimal, decimal-leading-zero, lower-greek, lower-latin, upper-latin, korean-hangul-formal, korean-hanja-formal 등

```css
ul {
  list-style-type: square;
}
ol {
  list-style-type: upper-roman;
}
/* ul은 ■ 사각형 불릿 적용, ol은 로마 숫자로 표시! */
```

#### list-style-position
리스트 기호 위치
* outside :	기본값, 텍스트보다 왼쪽 바깥에 기호 표시
* inside :	텍스트 안쪽에 기호 포함 (들여쓰기)
```css
ul {
  list-style-position: inside;
} /* 리스트 기호가 내부에 포함됨! */
```

#### list-style-image
기본 리스트 기호 대신 이미지를 불릿으로 사용
```css
ul {
  list-style-image: url('bullet.png');
} /* 리스트 기호 대신 이미지(bullet.png) 사용 */
```

### 리스트 기호 스타일 (::marker)
`::marker`를 사용해서 리스트의 기호 색상 및 스타일 변경 가능

```css
li::marker {
  color: red;
  font-size: 1.5em;
}
```

## 테이블 관련 속성 (Table Properties)
테이블(table, tr, td, th)의 스타일을 조정할 때 사용되는 속성들!

### table-layout
테이블의 레이아웃을 어떻게 설정할지 결정
* auto :	기본값, 내용 크기에 따라 셀 크기가 자동 조정됨
* fixed :	모든 열의 너비를 고정, 첫 번째 행의 너비를 기준으로 전체 조정
```css
table {
  table-layout: fixed;
} /* 셀 크기가 일정하게 고정됨! */
```

### border-collapse
테이블의 셀 테두리를 개별적으로 표시할지(separate), 합칠지(collapse) 결정
* separate :	기본값, 각 셀의 테두리가 개별적으로 표시됨
* collapse :	인접한 셀의 테두리를 합쳐서 하나로 표시
```css
table {
  border-collapse: collapse;
} /* 모든 셀의 테두리가 하나로 합쳐짐! */
```

### border-spacing
행(row)과 열(column) 사이 간격 조절
* `border-collapse: separate;`일 때만 적용됨
```css
table {
  border-spacing: 10px 5px; /* 가로 10px, 세로 5px 간격 */
} /* 셀 간의 가로 10px, 세로 5px 간격 설정! */
```

### caption-side
`<caption>`(테이블 제목)의 위치를 설정
* top :	테이블 위쪽 (기본값)
* bottom :	테이블 아래쪽
```css
caption {
  caption-side: bottom;
}
```

### empty-cells
빈 셀(td 또는 th)을 표시할지 여부 결정
* show :	기본값, 빈 셀 표시
* hide :	빈 셀 숨김

```css
table {
  empty-cells: hide;
}
```

### vertical-align
텍스트를 위쪽, 가운데, 아래쪽 정렬 가능
* top :	위쪽 정렬
* middle :	가운데 정렬 (기본값)
* bottom :	아래쪽 정렬
```css
td {
  vertical-align: top;
}
```