142 lines
3.7 KiB
Markdown
142 lines
3.7 KiB
Markdown
# 리스트와 테이블
|
|
|
|
| 속성 | 설명 | 옵션 |
|
|
|---|---|
|
|
| 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;
|
|
}
|
|
```
|
|
|