Files

Elex 3d9e93ae42 2025-02-03T19:29:18

2025-02-03 19:29:18 +09:00

3.7 KiB

Raw Blame History

리스트와 테이블

| 속성 | 설명 | 옵션 | |---|---| | 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: [list-style-type] [list-style-position] [list-style-image];

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 등

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

list-style-position

리스트 기호 위치

outside : 기본값, 텍스트보다 왼쪽 바깥에 기호 표시
inside : 텍스트 안쪽에 기호 포함 (들여쓰기)

ul {
  list-style-position: inside;
} /* 리스트 기호가 내부에 포함됨! */

list-style-image

기본 리스트 기호 대신 이미지를 불릿으로 사용

ul {
  list-style-image: url('bullet.png');
} /* 리스트 기호 대신 이미지(bullet.png) 사용 */

리스트 기호 스타일 (::marker)

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

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

테이블 관련 속성 (Table Properties)

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

table-layout

테이블의 레이아웃을 어떻게 설정할지 결정

auto : 기본값, 내용 크기에 따라 셀 크기가 자동 조정됨
fixed : 모든 열의 너비를 고정, 첫 번째 행의 너비를 기준으로 전체 조정

table {
  table-layout: fixed;
} /* 셀 크기가 일정하게 고정됨! */

border-collapse

테이블의 셀 테두리를 개별적으로 표시할지(separate), 합칠지(collapse) 결정

separate : 기본값, 각 셀의 테두리가 개별적으로 표시됨
collapse : 인접한 셀의 테두리를 합쳐서 하나로 표시

table {
  border-collapse: collapse;
} /* 모든 셀의 테두리가 하나로 합쳐짐! */

border-spacing

행(row)과 열(column) 사이 간격 조절

border-collapse: separate;일 때만 적용됨

table {
  border-spacing: 10px 5px; /* 가로 10px, 세로 5px 간격 */
} /* 셀 간의 가로 10px, 세로 5px 간격 설정! */

caption-side

<caption>(테이블 제목)의 위치를 설정

top : 테이블 위쪽 (기본값)
bottom : 테이블 아래쪽

caption {
  caption-side: bottom;
}

empty-cells

빈 셀(td 또는 th)을 표시할지 여부 결정

show : 기본값, 빈 셀 표시
hide : 빈 셀 숨김

table {
  empty-cells: hide;
}

vertical-align

텍스트를 위쪽, 가운데, 아래쪽 정렬 가능

top : 위쪽 정렬
middle : 가운데 정렬 (기본값)
bottom : 아래쪽 정렬

td {
  vertical-align: top;
}

3.7 KiB Raw Blame History