- table 요소의 td(cell) 의 간격을 지정합니다.
- table 의 cellspacing 속성과 같습니다.
- border-spacing : 1px 처럼 사용합니다.
- 예제에서 진한회색 테두리가 td 입니다.
border-spacing
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
border-spacing 은 table 요소의 셀 간격을 지정합니다.
예제 1
border-spacing 개요 : table 요소의 셀 간격을 지정합니다
보기
슬라이더를 움직여 보세요 ^^
| 1 | 2 | 3 | 4 | 5 |
 |
 |
 |
 |
 |
 |
 |
|||
 |
||||
설명
예제 2
실습 - 2개의 속성 조절해보기
보기
| 1 | 2 | 3 | 4 | 5 |
|
|
|
|
|
|
|
|||
 |
||||
설명
- 2개의 속성을 사용할 수도 있습니다.
- border-spacing : 1px 1px
- 각각 좌우간격, 위아래간격을 조절합니다.
+ 관련 CSS +
- border테두리를 설정합니다
- border-bottomborder 에서 아래쪽 설정만 특화된 것입니다
- border-bottom-color테두리 아래쪽의 색을 지정합니다
- border-bottom-left-radius테두리 왼쪽 아래의 둥굴기를 설정합니다
- border-bottom-right-radius테두리 오른쪽 아래의 둥굴기를 설정합니다
- border-bottom-style아래쪽 테두리의 종류를 지정합니다
- border-bottom-width아래쪽 테두리의 두께를 지정합니다
- border-collapsetable 요소의 인접한 셀의 테두리 표시 방법을 지정합니다.
- border-color테두리 컬러만 설정합니다
- border-image이미지를 이용하여 테두리를 만듭니다
- border-leftborder 에서 왼쪽 설정만 특화된 것입니다
- border-left-color테두리 왼쪽의 색을 지정합니다
- border-left-style왼쪽 테두리의 종류를 지정합니다
- border-left-width왼쪽 테두리의 두께를 지정합니다
- border-radius모서리를 둥글게 만들어 줍니다
- border-rightborder 에서 오른쪽 설정만 특화된 것입니다
- border-right-color테두리 오른쪽의 색을 지정합니다
- border-right-style오른쪽 테두리의 종류를 지정합니다
- border-right-width오른쪽 테두리의 두께를 지정합니다.
- border-spacingtable 요소의 셀 간격을 지정합니다
- border-style테두리선의 종류를 지정합니다
- border-topborder 에서 위쪽 설정만 특화된 것입니다.
- border-top-color테두리 위쪽의 색을 지정합니다
- border-top-left-radius테두리 왼쪽 위의 둥굴기를 설정합니다
- border-top-right-radius테두리 오른쪽 위의 둥굴기를 설정합니다
- border-top-style위쪽 테두리의 종류를 지정합니다
- border-top-width아래쪽 테두리의 두께를 지정합니다
- border-width테두리의 두께를 지정합니다