다단편집과 표스타일

css에서 다단을 만들땐

width값(너비를 고정해놓고 단을 만들수도있고)또는
그리고
count값으로(갯수를 지정해놓고 단을 만들수도있다.

column-width
내가 예를 들어 한단의 너비값을
150px로 지정을 하고
화면이 커지면 단의 계수가 많아지고
화면이 작아지면 단의 계수가 줄어 들더라도
나는 무조건 너비값을 고정을 하겠다 하면
column-width 속성을 이용하시면 되고
예)
.multi{
column-width:150px;
}

column-count는
난 화면에 나타나는 갯수를 꼭 맞춰서
표시를 해야겠다
단의 갯수가 3~4개 이렇게 지정을 하겠다
column-count를 통해 갯수를 지정해 놓으면
3개를 지정했을때 화면이 아무리 넓어져도 무조건 3개고
좁아져도 3개고,,,
4개 해놓으면 4개인 것이다.
예)
.multi{
column-count:4;
column-rule:2px dotted #ccc;
}

다단 위치 지정

특정 요소의 앞이나 뒤 (주로 인쇄목적)
-break-before:column,
-break-before:avoid-column
-break-after:column,
-bread-after:avoid-column
예)
.multi{
column-count:4;
column-rule:2px dotted #000;
}
.multi h3{
break-before:column;
}

column-span
여러단을 하나로 합치기

1 기본값
all 전체 단을 하나로 합쳐 표현

예)
.multi{
column-count:3;
column-rule:2px dotted #000;
}
.no-col{
column-span:all;

}

표 스타일

caption-side

캡션은 기본으로 표 위쪽에 표시됨
이 속성을 이용해 아해쪽에 표시 가능
caption-side: top / bottom

border
표의 바깥 테두리와 셀 테두리 모두 지정해야함

.table{
border:1px solid black;
border-collapse:collapse;
}
.table td{
border:1px dotted black;
}

border-spacing

셀 테두리 사이의 거리를 지정
값이 1개 : 수평거리 & 수직거리를 같게
값이 2개: 첫번쨰 값은 수평거리, 두번쨰 값은 수직거리

.table{
border:1px soild black;
border-collapse:separate;
border-spacing:20px 10px;
}
.table td{
border:1px soild black;
}

empty-cell

border-collapse:separate 를 사용해 셀들을 분리했을경우, 내용이 없는 빈 셀들의 표시 여부를 지정

.schedule{
border-callapse:separate;
}
td{
border:1px soild black;
}
#tb1 td{
empty-cells:show;
}
#tb2 td{
empty-cells:hide;
}

text-align:center;
하면 중간에 컨텐츠를 중간으로하겠다는 뜻

vertical-align:bottom;
하면 중간 컨텐츠를 아래로 위치시키는것