2025-02-03T19:29:18

docs/07_리스트와 테이블.md

@@ -1,23 +1,141 @@
 # 리스트와 테이블
 
-| 속성 | 설명 |
+| 속성 | 설명 | 옵션 |
 |---|---|
-| list-style |  |
-| table-layout |  |
-| border-collapse |  |
-| caption-side |  |
+| 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`
-* `list-style-type` : none | disc | circle | square | decimal | cjk-decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | korean-hangul-formal | korean-hanja-formal | ...
-* `list-style-position` : inside | outside
-* `list-style-image`
+### 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은 로마 숫자로 표시! */
+```
 
-* table-layout
-* border-collapse
-* caption-side : top | bottom
+#### 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;
+}
+```