diff options
Diffstat (limited to 'files/ko/web/html/element/colgroup/index.html')
| -rw-r--r-- | files/ko/web/html/element/colgroup/index.html | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/files/ko/web/html/element/colgroup/index.html b/files/ko/web/html/element/colgroup/index.html new file mode 100644 index 0000000000..24993546d1 --- /dev/null +++ b/files/ko/web/html/element/colgroup/index.html @@ -0,0 +1,142 @@ +--- +title: <colgroup> +slug: Web/HTML/Element/colgroup +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web +translation_of: Web/HTML/Element/colgroup +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><colgroup></code> 요소</strong>는 표의 열을 묶는 그룹을 정의합니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/colgroup.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> + +<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>{{htmlattrxref("span", "colgroup")}} 특성이 존재하는 경우 없음. {{glossary("empty element", "빈 요소")}}입니다.<br> + 그렇지 않은 경우 0개 이상의 {{htmlelement("col")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>첫 번째 자식이 {{htmlelement("col")}} 요소이며, 바로 앞의 요소가 닫는 태그를 생략한 <code><colgroup></code> 요소가 아닐 때, 여는 태그를 생략할 수 있습니다.<br> + 바로 뒤에 스페이스나 주석이 오지 않으면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("table")}} 요소. <code><colgroup></code>은 모든 {{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}} 요소 앞에 위치해야 하며, <code><table></code> 안에 {{htmlelement("caption")}} 요소가 존재하는 경우 <code><caption></code> 뒤에 와야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>열 그룹의 배경색. '#' 문자로 시작하는 <a href="/ko/docs/Web/CSS/color_value#RGB_색상">6자리 16진수 RGB 코드</a> 또는 <a href="/ko/docs/Web/CSS/color_value#색상_키워드">사전 정의된 색상 키워드</a>를 사용할 수 있습니다. + <div class="note"><strong>참고:</strong> 표준 특성이 아니므로 사용하지 마세요. 배경색을 적용하려면 CSS {{cssxref("background-color")}} 특성을 사용해야 합니다.</div> + </dd> + <dt>{{htmlattrdef("span")}}</dt> + <dd><code><colgroup></code>이 차지할 열의 수를 나타내는 양의 정수. 기본값은 1입니다. 내부에 {{htmlelement("col")}} 요소가 존재하면 사용할 수 없습니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Do not use these attributes as they are obsolete (and not supported) in the latest standard.</p> +</div> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline}}</dt> + <dd>This attribute specifies the alignment of the content in a column group to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "colgroup")}} is not set to <code>char</code>, this attribute is ignored, though it will still be used as the default value for the {{htmlattrxref("align", "col")}} of the {{HTMLElement("col")}} which are members of this column group. + <div class="note"><strong>Note: </strong>To achieve the same effect as the <code>char</code> attribute, in CSS3, you can use the character set using the <code>char</code> attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment character specified by the <strong>char</strong> attribute.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{obsolete_inline}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each cell of the column. 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> + + <div class="note"><strong>Note: </strong> + + <ul> + <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a {{HTMLElement("colgroup")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("colgroup")}} element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </div> + </dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<p><code><colgroup></code> 요소의 예제는 {{htmlelement("table")}} 요소 문서에서 볼 수 있습니다.</p> + +<h2 id="Specifications" name="Specifications">명세</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('HTML WHATWG', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '<colgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.colgroup")}}</p> |