[CSS] 다단, 목록, 표 스타일

다단 편집

column-width

단의 너비를 고정해 놓고 화면 분할

column-width: <크기> | auto

column-count

단의 개수를 정해 놓고 화면 분할

column-count: <숫자> | auto

column-gap

단사이 여백 지정

column-count: <크기> | normal

column-rule

단사이 구분선 스타일

column-rule: <크기> <스타일> <색상>

column-span

여러 단을 하나로 합치기

column-span: <값>

• 1: 합치지 않음(디폴트)
• all: 하나로 합침

목록 스타일

list-style

list-style-type list-style-position list-style-image속성을 한꺼번에 표기

list-style: <값>

list-style-type: 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성

list-style-type: <값>

• 순서 없는 목록(<ul>)의 불릿 바꾸기
  • disc: 채운 원(디폴트)
  • circle: 빈 원
  • square: 채운 사각형
  • none: 불릿 제거
• 순서 목록(<ol>)의 숫자 바꾸기
  • decimal: 십진수(디폴트)
  • lower-alpha: 소문자 알파벳
  • upper-alpha: 대문자 알파벳

list-style-position: 불릿이나 번호 들여쓰기 내어쓰기

list-style-position: inside | outside

list-style-image: 순서 없는 목록의 불릿을 이미지로 변경

list-style-image: url(이미지 파일 경로)

표 스타일

caption-side

테이블의 캡션(caption) 설정

caption-side: top | bottom

border

표의 바깥 테두리와 셀 테두리 모두 지정해야 함

border: <크기> <스타일> <색상>

border-collapse

표 테두리와 셀 테두리 합칠 것인지 설정

border-collapse: <값>

• separate: 테두리 안합침(디폴트)
• collapse: 테두리 하나로 합침

border-spacing

테이블 요소(th, td)간의 여백 설정

border-spacing: <크기>

empty-cells

border-collapse:separate로 셀들을 분리한 경우, 빈 셀들의 표시 여부 지정

empty-cells: show | hide

table-layout

콘텐츠에 맞게 셀 너비 지정하기

table-layout: fixed | auto

text-align

셀 안에서 수평 정렬

text-align: left | center | right

vertical-align

셀 안에서 수직 정렬

vertical-align: top | middle | bottom