CSS List/Table

List

list-style-type 속성

 

불릿 모양과 번호 스타일을 지정

•  순서 없는 목록의 경우 목록 앞에 불릿 모양 지정
• 순서 있는 목록의 경우 번호 스타일을 지정

list-style-image 속성

불릿 대신 이미지를 사용

list-style-image: <url(이미지 파일 경로)> | none

• 속성값으로 none 사용 시 list-style-type 속성에서 지정한 형태로 표시
• 불릿에 들어갈 이미지는 불릿 크기만큼 작아야 좋다.

list-style-position 속성

목록을 들여쓰는 속성

• 불릿이나 번호의 위치를 들여 쓸기
• 텍스트 문단 사이에 있는 목록을 더 쉽게 구분

list-style-position 속성값

• inside: 불릿 OR 번호가 실제 내용이 시작되는 위치보다 들여쓰기 효과 적용
• outside: 기본값

list-style 속성

목록 속성을 한꺼번에 표시

• list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시
  >> 속성을 줄여서 표시 가능

전체 예시

 

결과

 

Table

표 크기, 테두리, 셀의 테두리, 여러가지 여백 등의 표 스타일 지정 가능하다.

caption-side 속성

표 제목의 위치를 정해 주는 속성

• 표 제목은 <caption> 태그를 이용해 캡션으로 표시
• 기본형태 >> caption-side: top | bottom

caption-side 속성값

top: 캡션을 표 윗부분에 표시 (기본값)

bottom: 캡션을 표 아랫부분에 표시

 

border 속성

표 테두리를 그려 주는 속성

• 표 바깥 데투리와 셀 테두리를 각각 지정한다.

border-spacing 속성

셀 사이의 여백을 지정

• 표와 셀에 따로 테두리를 지정하면 셀과 셀 사이에 여백 생성한다.
  → 셀과 셀 사이의 여백을 조절한다.
• 기본형태 >> border-spacing: 수평거리 수직거리
• 수평거리의 값과 수직거리의 값을 공백으로 구별해서 나타낸다.
  → 두 값이 같다면 1개만 지정 가능하다.

border-collapse 속성

표와 셀 테두리를 합쳐주는 속성

• <table> 태그와 <td>태그에서 border 속성 사용 시
  셀과 셀 사이에 여백 생성 + 두 줄로 표시

border-collapse 속성값

• collapse : 표와 셀의 테두리를 합쳐 하나로 표시
• separate : 표와 셀의 테두리를 따로 표시 (기본)

예시1

결과

 

예시2

결과