텍스트를 표현하는 다양한 스타일 (2)

이번 단원에서는 목록과 표의 스타일에 대해 배웠다. 목록은 쉽게 공부할 수 있었지만 표를 공부하는데는 조금 시간이 걸렸다.

내가 테이블에 대해 어렵게 생각한 탓인지 기초 지식이 부족해서 그런것 같아 이전에 표를 생성하는 html을 한번 보고 공부하니 조금 쉽게 이해를 할 수 있었다.

1. 목록 스타일 (list - style)

목록 스타일은 list - style - type 속성을 이용하여 정할 수 있다. 이 떄 스타일의 속성값의 종류는 아래와 같다.

1-1. 불릿 대신 이미지를 사용하는 속성 ( list - style - image)

: 사용법은 list - style - type 과 같다. 하지만 이미지의 주소를 불러와야 하기 때문에 뒤에 url ("이미지의 주소") 이 붙는다.

1-2. 목록을 들여쓰는 속성 (list - style - position)

: 사용법은 list - style - position: inside (들여쓰기) 이다. 들여쓰기를 함으로써 텍스트 문단 사이에 있는 목록을 더 쉽게 구별할 수 있다.

2. 표 스타일

2-1. 표 제목의 위치를 정해주는 속성 (caption - side)

→ 표의 상단에 위치하고 싶을 때 : caption - side : top

→ 표의 하단에 위치하고 싶을 때 : caption - side : bottom

2-2. 표에 테두리를 그려주는 속성 (border)

→ border : 픽셀값 실선인지 점선인지 등을 나타냄

2-3. 표와 셀 테두리를 합쳐주는 속성 (border - collapse)