initial commit

1 files changed, 320 insertions, 0 deletions

diff --git a/files/ko/web/html/element/tbody/index.html b/files/ko/web/html/element/tbody/index.html
new file mode 100644
index 0000000000..e7d89d1488
--- /dev/null
+++ b/files/ko/web/html/element/tbody/index.html
@@ -0,0 +1,320 @@
+---
+title: '<tbody>: 표 본문 요소'
+slug: Web/HTML/Element/tbody
+tags:
+  - Element
+  - HTML
+  - HTML tabular data
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/tbody
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML </strong><strong><code>&lt;tbody&gt;</code></strong> 요소는 표의 여러 행({{htmlelement("tr")}})을 묶어서 표 본문을 구성합니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p><code>&lt;tbody&gt;</code> 요소와 그 사촌인 {{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} 요소는 화면과 프린터에 렌더링 할 때 뿐만 아니라 {{Glossary("accessibility", "접근성")}} 차원에서도 유용한 의미를 표의 행에 부여합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>0개 이상의 {{htmlelement("tr")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td><code>&lt;tbody&gt;</code> 요소는 부모 {{HTMLElement("table")}} 요소의 렌더링에 반드시 필요한 요소는 아닙니다. 그러나 <code>&lt;table&gt;</code> 요소의 자식 중 {{ HTMLElement("tr") }} 요소가 존재하면 사용할 수 없습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{ HTMLElement("table") }} 요소. {{ HTMLElement("caption") }}, {{HTMLElement("colgroup") }}, {{ HTMLElement("thead") }} 요소가 존재하는 경우, 그 뒤에 위치할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLTableSectionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<div class="hidden">
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<dl>
+ <dt>{{ htmlattrdef("align") }} {{deprecated_inline}}</dt>
+ <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:
+ <ul>
+  <li><code>left</code>, aligning the content to the left of the cell</li>
+  <li><code>center</code>, centering the content in the cell</li>
+  <li><code>right</code>, aligning the content to the right of the cell</li>
+  <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li>
+  <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "tbody") }} and {{ htmlattrxref("charoff", "tbody") }} attributes.</li>
+ </ul>
+
+ <p>If this attribute is not set, the <code>left</code> value is assumed.</p>
+
+ <p>As this attribute is deprecated, use the CSS {{cssxref("text-align")}} property instead.</p>
+
+ <div class="note"><strong>Note: </strong>The equivalent <code>text-align</code> property for the <code>align="char"</code> is not implemented in any browsers yet. See the <a href="/en-US/docs/Web/CSS/text-align#Browser_compatibility"><code>text-align</code>'s browser compatibility section</a> for the <code>&lt;string&gt;</code> value.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>The background color of the table. It is a <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color kewords</a> can also be used.</p>
+
+ <p>As this attribute is deprecated, use the CSS {{cssxref("background-color")}} property instead.</p>
+ </dd>
+ <dt>{{ htmlattrdef("char") }} {{deprecated_inline}}</dt>
+ <dd>
+ <p>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (<code>.</code>) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "tbody")}} is not set to <code>char</code>, this attribute is ignored.</p>
+ </dd>
+ <dt>{{ htmlattrdef("charoff") }} {{deprecated_inline}}</dt>
+ <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <code>char</code> attribute.</dd>
+ <dt>{{ htmlattrdef("valign") }} {{deprecated_inline}}</dt>
+ <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:
+ <ul>
+  <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li>
+  <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li>
+  <li><code>middle</code>, which will center the text in the cell;</li>
+  <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li>
+ </ul>
+
+ <p>As this attribute is deprecated, use the CSS {{cssxref("vertical-align")}} property instead.</p>
+ </dd>
+</dl>
+</div>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>표의 헤더 행을 나타내기 위해 {{HTMLElement("thead")}} 요소를 사용한 경우, <code>&lt;tbody&gt;</code> 요소는 반드시 그 뒤에 위치해야 합니다.</li>
+ <li><code>&lt;tbody&gt;</code>를 사용할 경우, {{HTMLElement("table")}}의 바로 밑 자식이면서 <code>&lt;tbody&gt;</code>에 속하지 않는 {{htmlelement("tr")}} 요소는 사용할 수 없습니다. 모든 비 헤더, 비 푸터 행은 반드시 <code>&lt;tbody&gt;</code>의 자식으로 존재해야 합니다.</li>
+ <li>문서 출력 시, <code>&lt;thead&gt;</code>와 {{htmlelement("tfoor")}} 요소는 모든 페이지에서 같거나 거의 같은 정보를 나타내고, <code>&lt;tbody&gt;</code> 요소는 서로 다른 정보를 나타냅니다.</li>
+ <li>표를 화면 맥락(브라우저 창 등)에서 표시할 때, 화면이 표 전체를 보여주기에 충분히 크지 않은 경우 {{Glossary("user agent", "사용자 에이전트")}}는 같은 부모의 <code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tfoot&gt;</code>, {{HTMLElement("caption")}} 요소를 서로 따로 스크롤 가능토록 설정할 수 있습니다.</li>
+ <li>하나의 표에 다수의 <code>&lt;tbody&gt;</code>를 연속적으로 사용할 수 있으며, 이를 통해 커다란 표의 행을 구획으로 나눌 수 있습니다. 필요한 경우 각 구획에 서로 다른 서식을 적용할 수도 있습니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<p>다음은 <code>&lt;tbody&gt;</code> 요소 사용법을 보이는 예제입니다. 더 많은 예제는 {{ HTMLElement("table", "", "#예제") }}에서도 볼 수 있습니다.</p>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<p>이번 예제는 {{HTMLElement("thead")}}와 {{HTMLElement("tbody")}}를 사용해 학생 그룹의 정보를 나열하는 표를 생성합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>표의 HTML은 다음과 같습니다. 학생의 정보를 나타내는 표 본문 칸이 모두 하나의 <code>&lt;tbody&gt;</code> 요소에 속함에 주의하세요.</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Student ID&lt;/th&gt;
+      &lt;th&gt;Name&lt;/th&gt;
+      &lt;th&gt;Major&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;3741255&lt;/td&gt;
+      &lt;td&gt;Jones, Martha&lt;/td&gt;
+      &lt;td&gt;Computer Science&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;3971244&lt;/td&gt;
+      &lt;td&gt;Nim, Victor&lt;/td&gt;
+      &lt;td&gt;Russian Literature&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;4100332&lt;/td&gt;
+      &lt;td&gt;Petrov, Alexandra&lt;/td&gt;
+      &lt;td&gt;Astrophysics&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>다음은 표에 적용할 CSS 스타일입니다.</p>
+
+<pre class="brush: css">table {
+  border: 2px solid #555;
+  border-collapse: collapse;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
+}</pre>
+
+<p>우선 표의 전반적인 스타일을 설정합니다.외부 테두리의 굵기, 스타일, 색을 설정하고, {{cssxref("border-collapse")}}를 이용해 각 칸의 테두리가 서로 분리되지 않고 공유하도록 지정합니다. {{cssxref("font")}}를 사용해 표의 기본 글씨체도 설정합니다.</p>
+
+<pre class="brush: css">th, td {
+  border: 1px solid #bbb;
+  padding: 2px 8px 0;
+  text-align: left;
+}</pre>
+
+<p>그 다음은 대부분의 칸에 적용할 스타일입니다. 1픽셀 두께의 밝은 회색 테두리를 추가하고 안쪽 여백을 조정하며, {{cssxref("text-align")}}을 사용해 모두 좌측 정렬로 설정합니다.</p>
+
+<pre class="brush: css">thead &gt; tr &gt; th {
+  background-color: #cce;
+  font-size: 18px;
+  border-bottom: 2px solid #999;
+}</pre>
+
+<p>마지막으로 {{HTMLElement("thead")}} 안에 위치하는 헤더 칸에 추가 스타일을 부여합니다. 보다 어두운 {{cssxref("background-color")}}, 더 큰 글씨 크기, 그리고 다른 테두리보다 두껍고 어두운 아래쪽 테두리를 적용합니다.</p>
+
+<h4 id="결과">결과</h4>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("기본_예제", 650, 150)}}</p>
+
+<h3 id="다중_본문">다중 본문</h3>
+
+<p>You can create multiple sections within a table by using multiple <code>&lt;tbody&gt;</code> elements. Each may potentially have its own header row or rows; however, <em>there can be only one {{HTMLElement("thead")}} per table!</em> Because of that, you need to use a {{HTMLElement("tr")}} filled with {{HTMLElement("th")}} elements to create headers within each <code>&lt;tbody&gt;</code>. Let's see how that's done.</p>
+
+<p>Let's take the previous example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major.</p>
+
+<h4 id="Result">Result</h4>
+
+<p>First, the resulting table, so you know what we're building:</p>
+
+<p>{{EmbedLiveSample("다중_본문", 650, 250)}}</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>The revised HTML looks like this:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Student ID&lt;/th&gt;
+      &lt;th&gt;Name&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th colspan="2"&gt;Computer Science&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;3741255&lt;/td&gt;
+      &lt;td&gt;Jones, Martha&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;4077830&lt;/td&gt;
+      &lt;td&gt;Pierce, Benjamin&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;5151701&lt;/td&gt;
+      &lt;td&gt;Kirk, James&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th colspan="2"&gt;Russian Literature&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;3971244&lt;/td&gt;
+      &lt;td&gt;Nim, Victor&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th colspan="2"&gt;Astrophysics&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;4100332&lt;/td&gt;
+      &lt;td&gt;Petrov, Alexandra&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;8892377&lt;/td&gt;
+      &lt;td&gt;Toyota, Hiroko&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<p>Notice that each major is placed in a separate <code>&lt;tbody&gt;</code> block, the first row of which contains a single {{HTMLElement("th")}} element with a {{htmlattrxref("colspan", "th")}} attribute that spans the entire width of the table. That heading lists the name of the major contained within the <code>&lt;tbody&gt;</code>.</p>
+
+<p>Then each remaining row in each major's <code>&lt;tbody&gt;</code> consists of two cells: the first for the student's ID and the second for their name.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">table {
+  border: 2px solid #555;
+  border-collapse: collapse;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
+}
+
+th, td {
+  border: 1px solid #bbb;
+  padding: 2px 8px 0;
+  text-align: left;
+}
+
+thead &gt; tr &gt; th {
+  background-color: #cce;
+  font-size: 18px;
+  border-bottom: 2px solid #999;
+}</pre>
+</div>
+
+<p>Most of the CSS is unchanged. We do, however, add a slightly more subtle style for header cells contained directly within a <code>&lt;tbody&gt;</code> (as opposed to those which reside in a {{HTMLElement("thead")}}). This is used for the headers indicating each table section's corresponding major.</p>
+
+<pre class="brush: css">tbody &gt; tr &gt; th {
+  background-color: #dde;
+  border-bottom: 1.5px solid #bbb;
+  font-weight: normal;
+}</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.tbody")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSS properties and <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> that may be specially useful to style the <code>&lt;tbody&gt;</code> element:
+
+  <ul>
+   <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li>
+   <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.</li>
+  </ul>
+ </li>
+</ul>