files/ko/web/css/display-internal/index.html


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: <display-internal>
slug: Web/CSS/display-internal
tags:
  - CSS
  - CSS 데이터 타입
  - CSS 디스플레이
  - display-internal
  - 자료형
  - 참조
translation_of: Web/CSS/display-internal
---
<div>{{CSSRef}}</div>

<p class="summary"><code>table</code>과 <code>ruby</code> 같은 몇몇 레이아웃 모델은 복잡한 내부 구조를 가지고 있으며, 자식이나 자손들로 채울 수 있는 다양한 역할을 가지고 있습니다. 이 페이지는 이러한 "내재적인" 디스플레이 값을 정의하며, 이들은 특정 레이아웃 모드 안에서만 의미를 가집니다.</p>

<h2 id="문법">문법</h2>

<p>유효한 <code>&lt;display-internal&gt;</code> 값들:</p>

<dl>
 <dt><code>table-row-group</code></dt>
 <dd>이 요소는 {{HTMLElement("tbody")}} HTML 요소처럼 동작합니다.</dd>
 <dt><code>table-header-group</code></dt>
 <dd>이 요소는 {{HTMLElement("thead")}} HTML 요소처럼 동작합니다.</dd>
 <dt><code>table-footer-group</code></dt>
 <dd>이 요소는 {{HTMLElement("tfoot")}} HTML 요소처럼 동작합니다.</dd>
 <dt><code>table-row</code></dt>
 <dd>이 요소는 {{HTMLElement("tr")}} HTML 요소처럼 동작합니다.</dd>
 <dt><code>table-cell</code></dt>
 <dd>이 요소는 {{HTMLElement("td")}} HTML 요소처럼 동작합니다.</dd>
 <dt><code>table-column-group</code></dt>
 <dd>이 요소는 {{HTMLElement("colgroup")}} HTML 요소처럼 동작합니다.</dd>
 <dt><code>table-column</code></dt>
 <dd>이 요소는 {{HTMLElement("col")}} HTML 요소처럼 동작합니다.</dd>
 <dt><code>table-caption</code></dt>
 <dd>이 요소는 {{HTMLElement("caption")}} HTML 요소처럼 동작합니다.</dd>
 <dt><code>ruby-base</code> {{Experimental_Inline}}</dt>
 <dd>이 요소는 {{HTMLElement("rb")}} HTML 요소처럼 동작합니다.</dd>
 <dt><code>ruby-text</code> {{Experimental_Inline}}</dt>
 <dd>이 요소는 {{HTMLElement("rt")}} HTML 요소처럼 동작합니다.</dd>
 <dt><code>ruby-base-container</code> {{Experimental_Inline}}</dt>
 <dd>이 요소는 익명의 박스로 만들어지는 {{HTMLElement("rbc")}} HTML 요소처럼 동작합니다.</dd>
 <dt><code>ruby-text-container</code> {{Experimental_Inline}}</dt>
 <dd>이 요소는 {{HTMLElement("rtc")}} HTML 요소처럼 동작합니다.</dd>
</dl>

<h2 id="예제">예제</h2>

<h3 id="CSS_테이블의_예시">CSS 테이블의 예시</h3>

<p>다음 예시에서는 CSS 테이블 레이아웃을 이용해 간단한 폼을 배치합니다.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;main&gt;
  &lt;div&gt;
    &lt;label for="name"&gt;Name&lt;/label&gt;
    &lt;input type="text" id="name" name="name"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="age"&gt;Age&lt;/label&gt;
    &lt;input type="text" id="age" name="age"&gt;
  &lt;/div&gt;
&lt;/main&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">main {
  display: table;
}

div {
  display: table-row;
}

label, input {
  display: table-cell;
  margin: 5px;
}</pre>

<h4 id="결과">결과</h4>

<p>{{EmbedLiveSample('CSS_tables_example', '100%', 100)}}</p>

<h2 id="사양">사양</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">사양</th>
   <th scope="col">상태</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}}</td>
   <td>{{Spec2('CSS3 Display')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<div class="hidden">이 페이지의 호환성 표는 구조화된 데이터로부터 생성되었습니다. 데이터에 기여하시려면, <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 확인한 뒤 저희에게 풀 리퀘스트를 보내주세요.</div>

<h3 id="Table_관련_값의_지원">Table 관련 값의 지원</h3>

<p><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-footer-group</code>, <code>table-header-group</code>, <code>table-row</code>, <code>table-row-group</code></p>

<p>{{Compat("css.properties.display.table_values", 10)}}</p>

<h3 id="Ruby_관련_값의_지원">Ruby 관련 값의 지원</h3>

<p><code>ruby</code>, <code>ruby-base</code>, <code>ruby-base-container</code>, <code>ruby-text</code>, <code>ruby-text-container</code></p>

<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{CSSxRef("display")}}
  <ul>
   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
  </ul>
 </li>
</ul>