From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/border-spacing/index.html | 131 +++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 files/ko/web/css/border-spacing/index.html (limited to 'files/ko/web/css/border-spacing') diff --git a/files/ko/web/css/border-spacing/index.html b/files/ko/web/css/border-spacing/index.html new file mode 100644 index 0000000000..23e0e42018 --- /dev/null +++ b/files/ko/web/css/border-spacing/index.html @@ -0,0 +1,131 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - CSS Property + - CSS Tables + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-spacing +--- +
{{CSSRef}}
+ +

CSS border-spacing 속성은 인접한 표 칸의 테두리 간격을 지정합니다. {{cssxref("border-collapse")}}가 separate여야 적용됩니다.

+ +
{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
+ + + +

border-spacing 값은 표 전체의 테두리에도 적용되므로, 표 테두리와 첫 번째 및 마지막 행/열에 속하는 칸 사이 거리는 (가로/세로) border-spacing 값과 표에 적용한 (상/우/하/좌) {{cssxref("padding")}} 값의 합이 됩니다.

+ +
+

참고: border-spacing 속성은 {{htmlelement("table")}}에서 이제 사용하지 않는 cellspacing 특성에 대응하지만, 추가로 두 번째 값을 지정해 가로와 세로 값을 각각 설정할 수 있다는 차이점이 있습니다.

+
+ +

구문

+ +
/* <length> */
+border-spacing: 2px;
+
+/* 가로 <length> | 세로 <length> */
+border-spacing: 1cm 2em;
+
+/* 전역 값 */
+border-spacing: inherit;
+border-spacing: initial;
+border-spacing: unset;
+ +

border-spacing 값은 하나 또는 두 개의 값을 사용해 지정합니다.

+ + + +

값

+ +
+
{{cssxref("<length>")}}
+
간격의 크기로 지정할 길이입니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

칸 간격과 안쪽 여백

+ +

다음 예제는 칸 사이에 세로 간격 0.5em과 가로 간격 1em을 배치합니다. 표의 테두리를 따라가면서, padding 값이 border-spacing과 어떻게 작용하는지 살펴보세요.

+ +

HTML

+ +
<table>
+  <tr>
+    <td>1</td><td>2</td><td>3</td>
+  </tr>
+  <tr>
+    <td>4</td><td>5</td><td>6</td>
+  </tr>
+  <tr>
+    <td>7</td><td>8</td><td>9</td>
+  </tr>
+</table>
+ +

CSS

+ +
table {
+  border-spacing: 1em 0.5em;
+  padding: 0 2em 1em 0;
+  border: 1px solid orange;
+}
+
+td {
+  width: 1.5em;
+  height: 1.5em;
+  background: #d2d2d2;
+  text-align: center;
+  vertical-align: middle;
+}
+ +

결과

+ +

{{ EmbedLiveSample('예제', 400, 200) }}

+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}{{ Spec2('CSS2.1') }}초기 정의
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-spacing")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf