[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
Author And Source
이 문제에 관하여([CSS] 다단, 목록, 표 스타일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tjdgus3160/CSS-다단-목록-표-스타일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)