blob: 23e0e420187b7d18c8446b4591384305612937fb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-spacing</code></strong> 속성은 인접한 표 칸의 테두리 간격을 지정합니다.</span> {{cssxref("border-collapse")}}가 <code>separate</code>여야 적용됩니다.</p>
<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div>
<p><code>border-spacing</code> 값은 표 전체의 테두리에도 적용되므로, 표 테두리와 첫 번째 및 마지막 행/열에 속하는 칸 사이 거리는 (가로/세로) <code>border-spacing</code> 값과 표에 적용한 (상/우/하/좌) {{cssxref("padding")}} 값의 합이 됩니다.</p>
<div class="blockIndicator note">
<p><strong>참고:</strong> <code>border-spacing</code> 속성은 {{htmlelement("table")}}에서 이제 사용하지 않는 <code>cellspacing</code> 특성에 대응하지만, 추가로 두 번째 값을 지정해 가로와 세로 값을 각각 설정할 수 있다는 차이점이 있습니다.</p>
</div>
<h2 id="구문">구문</h2>
<pre class="syntaxbox notranslate">/* <length> */
border-spacing: 2px;
/* 가로 <length> | 세로 <length> */
border-spacing: 1cm 2em;
/* 전역 값 */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;</pre>
<p><code>border-spacing</code> 값은 하나 또는 두 개의 값을 사용해 지정합니다.</p>
<ul>
<li><strong>한 개</strong>의 <code><length></code> 값을 지정하면 칸 사이의 가로와 세로 두 간격 모두 설정합니다.</li>
<li>두 개의 <code><length></code> 값을 지정하면, 첫 번째 값은 칸 사이의 가로 간격(각 열의 간격), 두 번째 값은 칸 사이의 세로 간격(각 행의 간격)을 설정합니다.</li>
</ul>
<h3 id="값">값</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>간격의 크기로 지정할 길이입니다.</dd>
</dl>
<h2 id="형식_정의">형식 정의</h2>
<p>{{cssinfo}}</p>
<h2 id="형식_구문">형식 구문</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="예제">예제</h2>
<h3 id="칸_간격과_안쪽_여백">칸 간격과 안쪽 여백</h3>
<p>다음 예제는 칸 사이에 세로 간격 <code>0.5em</code>과 가로 간격 <code>1em</code>을 배치합니다. 표의 테두리를 따라가면서, <code>padding</code> 값이 <code>border-spacing</code>과 어떻게 작용하는지 살펴보세요.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><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></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">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;
}</pre>
<h4 id="결과">결과</h4>
<p>{{ EmbedLiveSample('예제', 400, 200) }}</p>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>초기 정의</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.border-spacing")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{cssxref("border-collapse")}}, {{cssxref("border-style")}}</li>
<li><code>border-spacing</code> 속성은 {{htmlelement("table")}} HTML 요소의 외관을 수정합니다.</li>
</ul>
|
