border-spacing

1 개요
2 문법
3 예제

개요

border-spacing은 표의 테두리와 셀의 테두리 사이의 간격을 정하는 속성입니다.

기본값 : 2px
상속 : Yes
애니메이션 : No
버전 : CSS Level 2

border-spacing은 border-collapse의 값이 separate일 때만 적용됩니다.

문법

border-spacing: length | initial | inherit

length : 길이를 입력합니다. 값이 한개면 모든 간격에 같은 값을 사용하고, 값이 두개면 첫번째 값은 좌우, 두번째 값은 상하의 간격으로 사용합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table {
        width: 100%;
        border: 1px solid #333333;
      }
      td {
        padding: 10px;
        border: 1px solid #333333;
      }
      .a {
        border-spacing: 0px;
      }
      .b {
        border-spacing: 5px;
      }
      .c {
        border-spacing: 10px;
      }
      .d {
        border-spacing: 5px 10px;
      }
    </style>
  </head>
  <body>
    <h1>Border Spacing : Default</h1>
    <table>
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
    </table>
    <h1>Border Spacing : 0px</h1>
    <table class="a">
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
    </table>
    <h1>Border Spacing : 5px</h1>
    <table class="b">
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
    </table>
    <h1>Border Spacing : 10px</h1>
    <table class="c">
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
    </table>
    <h1>Border Spacing : 5px 10px</h1>
    <table class="d">
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
    </table>
  </body>
</html>

CSS / Reference / font-weight

font-weight 속성은 CSS에서 글꼴의 굵기를 지정하는 데 사용됩니다. 텍스트의 가독성을 높이거나 디자인의 강조점을 표현할 때 유용합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / background-color

background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / letter-spacing, word-spacing

글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.

CSS / Reference / clip

clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2

CSS / Reference / border-spacing

border-spacing은 표의 테두리와 셀의 테두리 사이의 간격을 정하는 속성입니다. 기본값 : 2px 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 border-spacing은 border-collapse의 값이 separate일 때만 적용됩니다.

CSS / Reference / font-style

font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / backface-visibility

backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / accent-color

accent-color는 HTML의 폼 요소에 사용되는 강조 색상을 정하는 속성입니다. 기본적으로 브라우저는 사용자 인터페이스 요소에 특정한 시스템 색상을 사용하지만, accent-color를 사용하면 이러한 요소들의 강조 색상을 커스터마이즈할 수 있습니다.

CSS / Reference / background-origin

HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / word-break

word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3