📚list-style

list-style 속성은 리스트에 대한 스타일을 지정할 수 있는 속성이다. 이는 각각 아래와 같다.

📝list-style-image

list-style-image는 리스트 항목의 마커를 이미지로 지정하는 속성이다. default 값은 none이며, 아래와 같이 사용할 수 있다.

selector { list-style-image: url(이미지 주소); }

📝list-style-position

list-style-position은 리스트 마커의 위치를 지정하는 속성이다.

selector { list-style-position: inside; }
selector { list-style-position: outside; }

default 값은 outside로, 각각 inside는 문단 안쪽에, outside는 문단 바깥쪽에 마커를 위치시킨다.

📝list-style-type

list-style-type은 리스트 마커의 타입을 지정하는 속성이다. 가질 수 있는 값은 아래와 같다.

selector { list-style-type: none; }
selector { list-style-type: disc; }
selector { list-style-type: circle; }
selector { list-style-type: square; }
selector { list-style-type: upper-roman; }
selector { list-style-type: lower-alpha; }

이는 각각 다음과 같은 의미를 지닌다.

• none : 마커를 표시하지 않음
• square : 사각형으로 마커 표시
• circle : 비어있는 원으로 마커 표시
• disc : 채워진 원으로 마커 표시
• upper-roman : 로마 숫자로 마커 표시
• lower-alpha : 알파벳 소문자로 마커 표시

이 이외의 값도 존재한다.

📝수평 리스트

리스트를 수평으로 나열할 때 사용하는 속성으로 아래와 같이 속성을 추가하면 된다.

selector { display:inline; }

📝list-style

list-style은 위에서 다루었던 리스트와 관련된 속성의 축약 형태로, 한 줄에 이를 정의할 수 있다.

📚table 스타일

<table> 태그를 이용해 만든 표에 다음과 같은 속성을 이용해 스타일을 지정할 수 있다.
기본적으로 text-align으로 셀의 내용을 정렬할 수 있으며, background-color로 셀의 배경색을 지정할 수 있다.

📝border

border은 경계선의 속성과 비슷하며, 표의 경계선의 스타일을 지정해줄 수 있다.

관련 내용은 여기를 참고!

border-collapse는 table의 경계 통합 여부를 지정하는 속성으로 아래와 같은 값을 가질 수 있다.

selector { border-collapse: collapse; }
selector { border-collapse: separate; }

각각의 값은 다음과 같은 의미를 지닌다.

• collapse : 이웃하는 셀의 경계선을 합쳐서 단일선으로 표시
• separate : 이웃하는 셀의 경계선을 분리하여 표시

📝caption-side

caption-side는 table에서 caption의 위치를 지정하는 속성이다. default 값은 top이며 다음과 같이 사용한다.

caption { caption-side: top; }
caption { caption-side: bottom; }

top은 말 그대로 caption을 위에 표시하며, bottom은 caption을 아래에 표시한다.