목록 스타일

list-style-type

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

list-style-type의 속성값

• disc : 채운 원 모양
• circle : 빈 원 모양
• square : 채운 사각형 모양
• deciaml : 1부터 시작하는 10진수 ex) 1, 2, 3...
• deciaml-leading-zero : 앞에 0이 붙는 10진수 ex) 01, 02, 03...
• lower-roman : 로마 숫자 소문자 ex) i, ii, iii...
• upper-roman : 로마 숫자 대문자 ex) I, II, III...
• lower-alpha : 알파벳 소문자 ex) a, b, c...
• upper-alpha : 알파벳 대문자 ex) A, B, C...
• none : 불릿이나 숫자를 없엔다.

.Too_much { list-style-type : decimal-leading-zero; }

list-style-image

list에 불릿 대신 이미지를 사용한다.

ul { list-style-image : url('images/dot.png');

list-style-position

불릿이나 번호의 위치를 들여쓰기를 할 수 있다.

list-style-position의 속성값

• inside : 불릿이나 번호를 기존 위치보다 안으로 들여 쓴다.
• outside : list-style-position속성을 지정하지 않았을 때의 기본값이다.

li { list-style-position : inside; }

표 스타일

caption-side

caption 태그의 위치를 위와 아래 중에서 고를 수 있다.

caption-side의 속성값

• top : 캡션을 표 윗부분에 표시한다. 기본값이다.
• bottom : 캡션을 표 밑부분에 표시한다.

table { caption-side : bottom; }

border

표 테두리는 border 속성을 사용하는데 표 바깥 테두리와 셀 테두리를 각각 지정한다.

	table {
    	caption-side : bottom;
        border : 1px solid black;
        }
	td, th {
    	border : 1px dotted;
        padding : 10px;
        text-align : center;
        }

border-collapse

위의 예시엔 table 태그와 td,th 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기며 두 줄로 표시된다. 이때 두 줄로 표시할것인지, 합쳐서 하나로 표시할 것인지 결정한다.

border-collapse의 속성값

• collapse : 표와 셀의 테두리를 합쳐 하나로 표시한다.
• seperate : 표와 셀의 테두리를 따로 표시한다. 기본값

	table {
    	caption-side : bottom;
        border : 1px solid black;
        border-collapse : collapse;
        }
	td, th {
    	border : 1px dotted;
        padding : 10px;
        text-align : center;
        }