네이버클라우드 캠프 5기/학습내용 정리

35. CSS - 표 관련 스타일

박세류 2023. 5. 26. 11:17

1. 표 관련 스타일

1. 표 제목의 위치를 지정하는 caption-side

  1. caption의 위치를 위인지 아래인지 정해줄 때 사용하는 속성
  2. 지정가능한 속성 값
    • top: 표 위에 제목 표시. 기본 값.
    • bottom: 표 아래에 제목 표시.

2. 표 테두리 스타일을 지정하는 border

  1. 일반 태그에서 사용하는 border와 동일하게 설정 가능.
  2. 표의 바깥과 셀 모두 테두리를 지정해 줘야 된다.

3. 표 테두리를 통합해서 표출하거나 분리해서 표출하는 border-collapse

  1. 표의 테두리와 셀의 테두리를 합쳐서 하나의 테두리만 표출할 것인지 아니면 분리해서 모든 테두리를 표출할 것인지 결정해주는 속성
  2. 지정가능한 속성 값
    • collapse: 테두리를 하나로 합쳐서 표출
    • seperate: 테두리를 분리하여 따로 표출. 기본 값.

4. 표의 크기를 지정하는 width, height

  1. 표는 기본적으로 셀의 내용만큼 크기가 자동으로 지정된다.
  2. 고정된 크기의 표를 사용하고 싶으면 width, height 속성을 이용해서 표의 크기를 지정한다.

5. 셀 안의 수평정렬방식을 지정하는 text-align

  1. 셀 안의 내용들의 수평정렬방식을 지정할 때 사용하는 속성.
  2. 지정가능한 속성 값
    • left: 왼쪽 정렬
    • right: 오른쪽 정렬
    • center: 가운데 정렬

6. 셀 안의 수직정렬방식을 지정하는 vertical-align

  1. 셀 안의 내용들의 세로 배치 정렬을 지정하는 속성
  2. 지정 가능한 속성 값
    • baseline: 셀의 기준선에 내용의 기준선을 맞춤. 기본값
    • top: 패딩의 위쪽 가장자리에 내용의 윗부분을 맞춤
    • middle: 세로 중앙에 내용 정렬
    • bottom: 패딩의 아래쪽 가장자리에 내용의 아랫부분을 맞춤
728x90