diff options
Diffstat (limited to 'files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html')
| -rw-r--r-- | files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html | 476 |
1 files changed, 0 insertions, 476 deletions
diff --git a/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html deleted file mode 100644 index 68fe28a5f0..0000000000 --- a/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: 테이블 -slug: conflicting/Learn/CSS/Building_blocks/Styling_tables -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables -original_slug: Web/CSS/시작하기/테이블 ---- -<p>{{ CSSTutorialTOC() }}</p> -<div class="warning"> - <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/20)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> -<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 13번째; 여기서는 고급 설렉터에 대해 알아보고, 테이블을 사용하는 특별한 방법에 대해 확인 해 보자. 테이블이 포함된 예제 Document와 여기서 사용될 Stylesheet를 만들어 보자.</p> -<h2 class="clearLeft" id="정보_테이블">정보 : 테이블</h2> -<p>테이블이란 정보를 사각 격자 형태로 배치하는 것을 말한다. 어떤 테이블은 복잡하게 구성 될 수 있으며 그 복잡한 테이블은 브라우저마나 다르게 보여줄 수도 있다.</p> -<p>Document를 디자인 할때, 테이블을 이용하여 내용들 간의 관개정보들을 표시 할 수 있다. 브라우저별로 테이블을 조금 다르게 표시하여도 정보를 보여주는데는 크게 문제 되지 않는다.</p> -<p>시각적인 표시의 사용목적으로 테이블을 사용하는 것은 좋지 않다. 테이블 보다는 이전 페이지에 소개한 배치(<strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong>)를 사용하는 것이 더 좋은 방법이다.</p> -<h3 id="테이블_구조">테이블 구조</h3> -<p>테이블에서는 각 내용들이 각 테이블 블럭에 표시된다.</p> -<p>테이블의 같은 줄의 블럭은 하나의 행을 구성한다.</p> -<p>몇몇 테이블에서는 행은 하나의 그룹으로 구성된다. 테이블의 첫 행의 그룹은 머릿말(<em>header)</em>로 사용된다. 테이블의 마지막 행의 그룹은 꼬릿말<em>(footer)</em>로 사용되기도 한다. 테이블의 다른 행들은 본문(<em>body</em>)이 되고 한 덩어리의 그룹으로 간주된다.</p> -<p>아래에 있는 블럭은 하나의 열(<em>column</em>)로 구성되었고 제한적으로 사용되는 CSS테이블 이다.</p> -<div class="tuto_example"> - <div class="tuto_type"> - 예제</div> - <p><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">설렉터</a>페이지 내의 <a href="/en/CSS/Getting_Started/Selectors#relselectors" title="en/CSS/Getting_Started/Selectors#relselectors">연관관계로 본 설렉터</a>의 테이블은 10개의 셀 블럭으로 구성된 5행 테이블이다.</p> - <p>첫번째 행은 머릿말이고 나머지 4개행은 본문이다. 꼬릿말은 없다.</p> - <p>열은 2개이다.</p> -</div> -<p>여기 안내서는 간단한 예제만을 다루고 있으며, 그 결과물은 쉽게 예상 가능한 수준이다. 간단한 테이블에서는 모든 셀블럭들은 하나의 행/열만을 차지한다. 셀이 하나 이상의 행이나 열을 차지하는 복잡한 테이블 구성 방법도 CSS를 통해 표현 가능하다. 그러나 이런 고급기술은 초급 안내서의 범주를 벗어난다.</p> -<h3 id="경계">경계</h3> -<p>셀 블럭은 바깥 여백이 없다.</p> -<p>셀블럭은 바깥 여백과 들여쓰기 공간이 없다. 기본적으로 경계는 테이블 내용과의 같격을 {{ cssxref("border-spacing") }}속성으로 조절 가능하다. 테이블의 {{ cssxref("border-collapse") }}속성을 <code>collapse</code>로 설정하면 이 여백을 없앨 수 있다.</p> -<div class="tuto_example"> - <div class="tuto_type"> - 예제</div> - <p>여기 세가지 테이블을 확인 해 보자.</p> - <p>왼쪽 테이블은 0.5 em 경계 여백을 가지고 있다. 가운데는 경계 여백을 0으로 했으며, 오른쪽은 collapse속성을 사용 하였다.</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style=""> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 2em;"> - <table style=""> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="캡션">캡션</h3> -<p>캡션({{ HTMLElement("caption") }}) elemen전체 테이블에 적용되는 라벨이다. 기본적으로 테이블 위쪽에 표시된다.</p> -<p>캡션을 아래쪽에 두고 싶다면 {{ cssxref("caption-side") }}속성 값을 <code>bottom</code>으로 설정하라. 속성은 상속되므로 상속받은 테이블들에 선택적으로 속성값 재설정도 가능하다.</p> -<p>캡션의 텍스트 스타일을 조정 하려면 텍스트 속성을 사용하면 된다.</p> -<div class="tuto_example"> - <div class="tuto_type"> - 예제</div> - <p>이 테이블은 아래쪽에 캡션을 가지고 있다.</p> - <pre class="brush: css">#demo-table > caption { - caption-side: bottom; - font-style: italic; - text-align: right; -} -</pre> - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <table> - <caption> - Suits</caption> - <tbody> - <tr> - <td> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid gray; text-align: center;">Clubs</td> - <td style="border: 1px solid gray; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid gray; text-align: center;">Diamonds</td> - <td style="border: 1px solid gray; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="빈_셀블럭">빈 셀블럭</h3> -<p>테이블 element에 {{ cssxref("empty-cells") }}: show로 설정 함으로 빈 셀블럭을 표시 할 수 있다.</p> -<p><code>empty-cells: hide로 설정하여 해당 셀블럭을 안보이도록 감출 수 있다. 셀의 부모 element가 배경색을 가지고 있다면 그 배경색이 보이게 될 것이다.</code></p> -<div class="tuto_example"> - <div class="tuto_type"> - 예제</div> - <p>이 테이블은 옅은 녹색 배경을 가지고 있으며, 셀은 진한 회색의 테두리와 회색 배경을 가지고 이다.</p> - <p>아래 테이블의 왼쪽은 빈 셀을 보여주고, 오른쪽은 셀감추기의 결과를 확인 할 수 있다.</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="background-color: #dfd;"> - <tbody> - <tr> - <td style="border: 1px solid #555; background-color: #eee;"> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="background-color: #dfd;"> - <tbody> - <tr> - <td> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - 자세히</div> - <p>CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">테이블</a>에서 좀더 자세한 테이블에 대한 사항을 확인 하라.</p> - <p>여기에서 보다 더 자세한 테이블에 관한 내용을 확인 할 수 있지만, 브라우저별로 다르게 보여지는 복잡한 테이블에 대한 사항은 포함하고 있지 않다.</p> -</div> -<h2 id="액션_테이블_꾸미기">액션 : 테이블 꾸미기</h2> -<ol> - <li><code>doc3.html파일을 만들어 아래 긴 코드를 전부 복사해 넣고 저장하라.</code> - <div style="height: 36em; overflow: auto;"> - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <title>Sample document 3</title> - <link rel="stylesheet" href="style3.css"> - </head> - <body> - <table id="demo-table"> - <caption>Oceans</caption> - <thead> - <tr> - <th></th> - <th>Area</th> - <th>Mean depth</th> - </tr> - <tr> - <th></th> - <th>million km<sup>2</sup></th> - <th>m</th> - </tr> - </thead> - <tbody> - <tr> - <th>Arctic</th> - <td>13,000</td> - <td>1,200</td> - </tr> - <tr> - <th>Atlantic</th> - <td>87,000</td> - <td>3,900</td> - </tr> - <tr> - <th>Pacific</th> - <td>180,000</td> - <td>4,000</td> - </tr> - <tr> - <th>Indian</th> - <td>75,000</td> - <td>3,900</td> - </tr> - <tr> - <th>Southern</th> - <td>20,000</td> - <td>4,500</td> - </tr> - </tbody> - <tfoot> - <tr> - <th>Total</th> - <td>361,000</td> - <td></td> - </tr> - <tr> - <th>Mean</th> - <td>72,000</td> - <td>3,800</td> - </tr> - </tfoot> - </table> - </body> -</html> -</pre> - </div> - </li> - <li><code>style3.css</code>를 만들어 아래 긴 내용을 전부 복사해 넣어라. - <pre class="brush: css">/*** Style for doc3.html (Tables) ***/ - -#demo-table { - font: 100% sans-serif; - background-color: #efe; - border-collapse: collapse; - empty-cells: show; - border: 1px solid #7a7; -} - -#demo-table > caption { - text-align: left; - font-weight: bold; - font-size: 200%; - border-bottom: .2em solid #4ca; - margin-bottom: .5em; -} - - -/* basic shared rules */ -#demo-table th, -#demo-table td { - text-align: right; - padding-right: .5em; -} - -#demo-table th { - font-weight: bold; - padding-left: .5em; -} - - -/* header */ -#demo-table > thead > tr:first-child > th { - text-align: center; - color: blue; -} - -#demo-table > thead > tr + tr > th { - font-style: italic; - color: gray; -} - -/* fix size of superscript */ -#demo-table sup { - font-size: 75%; -} - -/* body */ -#demo-table td { - background-color: #cef; - padding:.5em .5em .5em 3em; -} - -#demo-table tbody th:after { - content: ":"; -} - - -/* footer */ -#demo-table tfoot { - font-weight: bold; -} - -#demo-table tfoot th { - color: blue; -} - -#demo-table tfoot th:after { - content: ":"; -} - -#demo-table > tfoot td { - background-color: #cee; -} - -#demo-table > tfoot > tr:first-child td { - border-top: .2em solid #7a7; -} -</pre> - </li> - <li>브라우저에서 열어서 아래와 같이 나오는 지 확인 하라. - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div> - <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - </div> - </td> - </tr> - </tbody> - </table> - </li> - <li>화면에 보여지는 테이블과 stylesheet에 추가한 규칙과 비교하여 각 규칙이 어떻게 적용되었는지 확인해 보라. 원하는 방향으로 적용되지 않은 규칙이 있다면 해당 규칙을 주석 처리해서 저장한 후 브라우저로 다시 읽어 확인 해 보라. 아래는 위의 테이블에 관해 확인 해볼 사항이다. - <ul> - <li>캡션은 테이블 바깥 경계에 표시된다.</li> - <li>옵션에 최소 포인트 크기 세트가 있다면 km<sup>2</sup>에 있는 '2'처럼 어깨 글자에 적용 될 것이다.</li> - <li>테이블은 세가지 빈 셀 블럭을 가지고 있다. 그중 둘은 테이블 배경색을 그대로 보여줄 수 있도록 설정되어 있다. 세번째 빈 셀블럭은 자체 색상과 위쪽에 경계선을 가지고 있다.</li> - <li>콜론은 Stylesheet에서 추가 되었다.</li> - </ul> - </li> -</ol> -<div class="tuto_example"> - <div class="tuto_type"> - 도전</div> - <p>아래처럼 보이도록 Stylesheet를 바꿔 보라</p> - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> - </div> - </td> - </tr> - </tbody> - </table> - <p> </p> -</div> -<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Tables" title="en/CSS/Getting started/Challenge solutions#Tables">정답 확인</a></p> -<h2 id="다음에는">다음에는?</h2> -<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Media", "미디어") }}이 장이 CSS의 속성과 그 변수에 대해 설명하는 마지막 장이다. 전체 속성 및 변수에 대해 확인 하려면 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a>를 보라.</p> -<p>다음에는 CSS의 Stylesheet구조와 목적에 대해 <a href="/en-US/docs/CSS/Getting_Started/Media" title="/en-US/docs/CSS/Getting_Started/Media">다시한번 살펴보자</a>.</p> |