목록 관련

html 태그 중 <ul>, <ol> 관련하여 CSS를 조정하는 속성들 입니다.

list-style-type

<ul>태그의 경우 글머리 기호, <ol>의 경우 번호 표기에 대한 스타일을 지정해주는 속성 입니다.
list-style-type: 키워드;로 표기 합니다.

• disk : <ul>의 기본값으로 ●(채운 원 모형) 글머리 입니다.
• circle : ○(빈 원 모형) 글머리 입니다.
• square : ■(채운 사각형) 글머리 입니다.
• decimal : 1부터 시작하는 10진수 번호 표기 입니다.
• decimal-leading-zero : 01,02 식으로 표현되는 10진수 번호 표기 입니다.
• lower-roman / upper-roman : 로마 숫자 소문자/대문자 번호 표기 입니다.
• lower-alpha / upper-alpha : 알파벳 소문자/대문자 번호 표기 입니다.
  lower-latin / upper-latin : 위와 동일
• none : 글머리 / 번호 표기 없음

list-style-image

글머리를 이미지 파일로 지정하는 속성입니다.
list-style-image: url(이미지 파일경로)로 표기 합니다.

list-style-position

리스트를 들여쓰기 설정을 줄 수 있는 속성입니다.
list-style-position: inside; | outside;로 표기 합니다.

• outside : 리스트를 들여쓰기 하지 않습니다. (기본값)
• inside : 리스트를 들여쓰기 합니다.

list-syle

위 작성된 list-style 을 한번에 설정해주는 속성입니다.
list-style: 리스트 스타일 관련 값을 나열식으로 표기;로 표기 합니다.

표 관련

html에서 <table>태그로 표를 작성 후 CSS를 통해 표의 테두리, 셀 사이 여백 등을 설정해 줄 수 있습니다.

caption-side

<caption>태그로 설정한 표의 제목의 위치를 설정해주는 속성입니다.
caption-side: top; | bottom;로 표기 합니다.

• top : 표 위로 표시합니다. (기본값)
• bottom : 표 아래로 표시합니다.

해당 속성으로는 위/아래로만 위치를 잡을 수 있습니다.

border

표 뿐만 아니라 박스 모델을 통해 각 요소의 테두리를 설정해줄 수 있는 속성입니다.
border: 선의굵기 선의종류 선의색상;로 표기 합니다.

border-spacing

표의 각 셀의 테두리 사이의 간격을 설정해줄 수 있는 속성입니다.
border-spacing: 수평거리 수직거리; | 수평수직거리함께;로 표기 합니다.

border-collapse

표의 각 셀에는 테두리를 인접한 셀의 테두리와 분리할지 병합할지를 설정하는 속성입니다.
border-collapse: separated; | collapse;로 표기 합니다.

• separated : 각 셀의 테두리 분리해서 표기 (기본값)
• collapse : 각 셀의 테두리를 인접한 셀의 테두리와 병합해서 표기

border 속성의 경우 [HTML/CSS] Block, Inline 요소와 CSS Box model 에서 자세하게 다루고 있습니다.

참고

Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석 - 고경희
위 책을 공부하며 작성하고 있습니다!