initial commit

7 files changed, 2038 insertions, 0 deletions

diff --git a/files/ko/web/css/시작하기/리스트/index.html b/files/ko/web/css/시작하기/리스트/index.html
new file mode 100644
index 0000000000..527eaaa768
--- /dev/null
+++ b/files/ko/web/css/시작하기/리스트/index.html
@@ -0,0 +1,244 @@
+---
+title: 리스트
+slug: Web/CSS/시작하기/리스트
+translation_of: Learn/CSS/Styling_text/Styling_lists
+---
+<p>{{ CSSTutorialTOC() }}</p>
+<div class="warning">
+  <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Content", "내용물") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 10번째 장; 이번 장에서는 CSS에서 리스트를 어떻게 보여줄 것인지  설정하는 법에 대해 알아보자. 리스트를 포함하는 새로운 예제 Document를 생성하고, 리스트 스타일을 위한 새로운 stylesheet도 생성하라.</p>
+<h2 class="clearLeft" id="정보_리스트">정보: 리스트</h2>
+<p><a href="/en-US/docs/CSS/Getting_Started/Content" title="/en-US/docs/CSS/Getting_Started/Content">지난 섹션</a>에서 도전과제를 해결했다면, 어떤 elememt 앞에 리스트 아이템처럼 보여지는 내용물을 추가 하는 법을 보았을 것이다.</p>
+<p>CSS는 리스트를 위한 특별한 속성을 제공한다. 이는 무엇보다도 사용하기 편리한 방법이다.</p>
+<p>리스트 속성을 지정 하려면, {{ cssxref("list-style") }} 속성을 통해 마커 타입을 지정하라.</p>
+<p>CSS에 있는 설렉터 규칙은 리스트 아이템 element를 선택 할 수도 있고(예를 들면, {{ HTMLElement("li") }}) 부모 리스트 element도 선택 가능하다. (예를 들면 {{ HTMLElement ("ul") }}) 리스트 element도 스타일을 상속 받는다.</p>
+<h3 id="무순서_리스트">무순서 리스트</h3>
+<p><em>무순서</em> 리스트에서는, 각 리스트 아이템들이 같은 방식으로 mark된다.</p>
+<p>CSS는 세가지 방법의 마커가 있다. 브라우저에서는 다음과 같이 보여진다.</p>
+<ul style="padding-left: 2em;">
+  <li style="list-style-type: disc;"><code>disc</code></li>
+  <li style="list-style-type: circle;"><code>circle</code></li>
+  <li style="list-style-type: square;"><code>square</code></li>
+</ul>
+<p>다른 이미지도 URL로 설정 가능하다.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>아래 규칙은 서로 다른 class의 리스트 아이템에 서로 다른 마커를 사용하고 있다.</p>
+  <pre class="brush:css">li.open {list-style: circle;}
+li.closed {list-style: disc;}
+</pre>
+  <p>When these classes are used in a list, they distinguish between open and closed items (for example, in a to-do list):</p>
+  <pre class="brush:css">&lt;ul&gt;
+  &lt;li class="open"&gt;Lorem ipsum&lt;/li&gt;
+  &lt;li class="closed"&gt;Dolor sit&lt;/li&gt;
+  &lt;li class="closed"&gt;Amet consectetuer&lt;/li&gt;
+  &lt;li class="open"&gt;Magna aliquam&lt;/li&gt;
+  &lt;li class="closed"&gt;Autem veleum&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+  <p>위 코드는 아래처럼 보여질 것이다.</p>
+  <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+    <tbody>
+      <tr>
+        <td>
+          <ul style="padding-right: 6em;">
+            <li style="list-style-type: circle;">Lorem ipsum</li>
+            <li style="list-style-type: disc;">Dolor sit</li>
+            <li style="list-style-type: disc;">Amet consectetuer</li>
+            <li style="list-style-type: circle;">Magna aliquam</li>
+            <li style="list-style-type: disc;">Autem veleum</li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h3 id="순차_리스트">순차 리스트</h3>
+<p>순차리스트는 각 리스트 아이템이 순차적으로 순서가 표시된 마커와 보여진다.</p>
+<p>{{ cssxref("list-style") }}속성으로 마커 타입을 설정 하라.</p>
+<ul style="padding-left: 2em;">
+  <li style=""><code>decimal</code></li>
+  <li style=""><code>lower-roman</code></li>
+  <li style=""><code>upper-roman</code></li>
+  <li style=""><code>lower-latin</code></li>
+  <li style=""><code>upper-latin</code></li>
+</ul>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>이 예제에서는 'info' class의 {{ HTMLElement("ol") }} elements에서, 아이템들이 대문자 순차 마커로 표시된다.</p>
+  <pre class="brush:css">ol.info {list-style: upper-latin;}
+</pre>
+  <p>아래 리스트 내의 {{ HTMLElement("li") }} element는 위의 스타일을 상속한다.</p>
+  <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+    <tbody>
+      <tr>
+        <td>
+          <ul>
+            <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li>
+            <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li>
+            <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li>
+            <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li>
+            <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div class="tuto_details">
+  <div class="tuto_type">
+    좀더 자세히</div>
+  <p>{{ cssxref("list-style") }}속성은 약어이다. 다소 복잡한 stylesheet에서는 속성과 그 값을 분리해서 사용하기를 원할 수 있다. 이 분리된 속성을 연결하는 방법이나 CSS에서 리스트에 더 자세한 설정법을 알려면{{ cssxref("list-style") }} 참조 페이지를 확인하라.</p>
+  <p>만약 HTML같은 관습적인 태그 비순차 리스트 아이템({{ HTMLElement("ul") }})와 순차 리스트 아이템({{ HTMLElement("ol") }})를 제공하는 마크업 언어를 사용한다면, 그 태그를 써서 쉽게 연습 해 볼 수 있다. 어쨌던 CSS써서 {{ HTMLElement("ul") }}를 순차 표시 할수 있고 {{ HTMLElement("ol") }} 를 통해 비순차를 원한다면 표시 할 수도 있다.</p>
+  <p>브라우저마다 리스트 스타일을 보여주는 자체 방식이 있다. Stylesheet로 모든 브라우저에서 동일하게 보여지는 것을 기대하지는 마라.</p>
+</div>
+<h3 id="카운터">카운터</h3>
+<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
+  <p><strong>참고: </strong> 일부 브라우저는 카운터를 지원하지 않는다. <a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">Quirks Mode site의 </a><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html">CSS 내용물과 브라우저 호환성</a> 페이지에 브라우저 호환 차트와 CSS의 다른 기능에 대한 호환성을 확인 할 수 있다. 이 사이트 <a href="/en/CSS_Reference" title="https://developer.mozilla.org/en/CSS_Reference">CSS 참조Reference</a>의 individual page(?)에는 브라우저 호환성 테이블도 확인 할 수 있다.</p>
+</div>
+<p>리스트 아이템 나열 뿐 아니라 Element를 순위매김 하기 위해 카운터를 사용할 수 있다. 예를 들어, documents내에서 머릿말니아 단락의 순서를 표시 하고 싶을때 사용 가능하다.</p>
+<p>순위 매김을 사용하려면 카운터에 이름을 할당하여 사용하면 된다.</p>
+<p>element에 순위메김 추가를 시작하기 전에 {{ cssxref("counter-reset") }}속성으로 초기화 하고 사용하고자 하는 카운터 이름을 쓰라. 카운터를 사용하는 elements의 부모에다 초기화 과정을 적용하는 것이 좋다. 그러나, 리스트 아이템 시작하기 전 어느 element에서든 초기화를 사용해도 된다.</p>
+<p>카운터가 증가하는 각 element에서, {{ cssxref("counter-increment") }} 속성을 사용하여 증가 하고 증가 하고자 하는 이름도 표시하라.</p>
+<p>카운터를 표시하기 위해서는 {{ cssxref(":before") }}나 {{ cssxref(":after") }} 설렉터를 써서 <code>content속성을 사용하여라.</code>(이전 페이지에서, <strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong>사용에 대해 참고하라).</p>
+<p><code>content</code> 속성 값에 <code>counter()카운터 이름과 함께 사용하라.</code> 선택적으로 타입도 명시 가능하다. 타입은 위에서 언급한 <strong>Ordered lists</strong> 섹션에 나온것과 같다.</p>
+<p>보통 카운터를 표시하는 element도 하나씩 카운터 값이 증가 한다.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>이 규칙은 class가 'numbered'인 모든 {{ HTMLElement("h3") }} element의 카운터를 초기화 한다.</p>
+  <pre class="brush:css">h3.numbered {counter-reset: mynum;}
+</pre>
+  <p> </p>
+  <p>이 아래 규칙은 모든 'numbered' class의 {{ HTMLELement("p") }} element에 카운터 값을 표시하고 그 값을 증가 시킨다.</p>
+  <pre class="brush:css">p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+</pre>
+  <p>결과는 아래와 같다.</p>
+  <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;">
+    <tbody>
+      <tr>
+        <td><strong>Heading</strong><br>
+          <p><strong>1: </strong>Lorem ipsum</p>
+          <p><strong>2: </strong>Dolor sit</p>
+          <p><strong>3: </strong>Amet consectetuer</p>
+          <p><strong>4: </strong>Magna aliquam</p>
+          <p><strong>5: </strong>Autem veleum</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div class="tuto_details">
+  <div class="tuto_type">
+    좀더 자세히</div>
+  <p>카운터가 지원되지 않는 브라우저에서는 카운터를 사용 할 수 없다.</p>
+  <p>카운터가 사용 가능하다면 카운터로 리스트아이템에서 지원 되는 것처럼 별도로 다른 내용물에 순위매김을 사용 할 수 있다. 예를 들면 위에서 처럼, 카운터는 굵은 글씨로 그외 아이템은 정상 글씨로 가능하다.</p>
+  <p>좀더 다양한 방법으로 카운터를 사용 할 수 있는데 —예를 들면, 형식적인 Document의 순서 섹션, 머릿말, 보조 머릿말과 단락등에서 사용 가능하다. 자세한 사항은 CSS사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> 를 확인 하라.</p>
+</div>
+<h2 id="액션_화려한_리스트">액션: 화려한 리스트</h2>
+<p><code>새로이 doc2.html</code>파일을 만들어라. 아래 코드를 복사하라.</p>
+<pre class="brush:html;">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Sample document 2&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style2.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Arctic&lt;/li&gt;
+      &lt;li&gt;Atlantic&lt;/li&gt;
+      &lt;li&gt;Pacific&lt;/li&gt;
+      &lt;li&gt;Indian&lt;/li&gt;
+      &lt;li&gt;Southern&lt;/li&gt;
+    &lt;/ul&gt;
+
+    &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
+    &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
+    &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
+    &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
+    &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
+    &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p><code>style2.css</code>를 만들어 아래 내용을 복사하라.</p>
+<pre class="brush:css;">/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+</pre>
+<p>배치와 주석이 맘에 들지 않으면 마음대로 변경하라.</p>
+<p>브라우저에서 열어보라. 만약 브라우저가 카운터를 지원 한다면 아래 예제와 같이 보일 것이다. 브라우저가 지원하지 않는다면 숫자는 보이지 않을 것이다. (콜론도 보이지 않을 것이다.)</p>
+<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+  <tbody>
+    <tr>
+      <td>
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
+        <ul style="">
+          <li>Arctic</li>
+          <li>Atlantic</li>
+          <li>Pacific</li>
+          <li>Indian</li>
+          <li>Southern</li>
+        </ul>
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p>
+        <p><strong>1: </strong>Lorem ipsum</p>
+        <p><strong>2: </strong>Dolor sit</p>
+        <p><strong>3: </strong>Amet consectetuer</p>
+        <p><strong>4: </strong>Magna aliquam</p>
+        <p><strong>5: </strong>Autem veleum</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<div class="tuto_example">
+  <div class="tuto_type">
+    도전</div>
+  <p>예제 stylesheet에 대양 표시 앞에 로마숫자로 i에서 v까지 나타나도록 추가 해 보라.</p>
+  <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+    <tbody>
+      <tr>
+        <td>
+          <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
+          <ul style="">
+            <li>Arctic</li>
+            <li>Atlantic</li>
+            <li>Pacific</li>
+            <li>Indian</li>
+            <li>Southern</li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <p> </p>
+  <p>예제 stylesheet를 아래와 같이 대문자가 단락앞에 나오도록 만들어 보라.</p>
+  <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+    <tbody>
+      <tr>
+        <td>
+          <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p>
+          <p><strong>. . .</strong></p>
+          <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p>
+          <p><strong>. . .</strong></p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">정답 확인.</a></p>
+<h2 id="다음에는">다음에는?</h2>
+<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자") }}브라우저에서 예제 Document를 표시할때, element를 페이지에 element 주변으로 공간을 만든다. 다음장에서는 CSS가 어떻게 element아래쪽에 놓인 박스 모양과 동작하는지 설명한다(<a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">boxes</a>.xm).</p>
diff --git a/files/ko/web/css/시작하기/미디어/index.html b/files/ko/web/css/시작하기/미디어/index.html
new file mode 100644
index 0000000000..2c9fceaca0
--- /dev/null
+++ b/files/ko/web/css/시작하기/미디어/index.html
@@ -0,0 +1,346 @@
+---
+title: 미디어
+slug: Web/CSS/시작하기/미디어
+translation_of: Web/Progressive_web_apps/Responsive/Media_types
+---
+<p>{{ CSSTutorialTOC() }}</p>
+<div class="warning">
+  <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/21)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서의 14번쨰 장. 지금까지 이번 안내서에서는 많은 부분을 Document를 어떻게 보여 줄것인지 결정하는 CSS의 속성과 변수에 관해 소개 했다. 이번에는 Stylesheet의 구조와 목적에 대해 다시 살펴 보자.</p>
+<h2 class="clearLeft" id="정보_미디어">정보 : 미디어</h2>
+<p>CSS의 목적은 Document가 사용자에게 어떻게 보여질 것인가를 설정하는 것이다. 전시되는 형태는 하나 이상의 형식이 있다.</p>
+<p>예를 들면, 아마도 이 페이지도 화면 표시 장치를 통해 보여질 것이다. 그러나 큰 화면용으로 프로젝터나 프린트해서 보는 경우도 있을 것이다. 이런 다양한 미디어의 경우 그 고유의 문자셋같은 특징이 있을 것이다. CSS는 document를 각각의 미디어에 표시하기 위한 다양한 방법을 제공한다.</p>
+<p>미디어의 특정 타입을 정하는 규칙을 추가 하려면 {{ CSSXref("@media") }} 다음에 미디어 타입 넣고, 그 다음에 대괄호({})로 해당 규칙을 추가 하라.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>웹사이트에 있는 document는 그 사이트 전체를 살펴볼수 있도록 조절 할 수 있는 영역을 제공한다.</p>
+  <p>마크업 언어에서는, 조정영역의 부모 element의 <strong>id</strong>가 <code>nav-area</code>이다. ({{ HTMLVersionInline(5) }}에서는 <strong>id</strong> 속성이 포함된 {{ HTMLElement("div") }}대신에 {{ HTMLElement("nav") }} element로 사용 할 수 있다.)</p>
+  <p>Document가 프린트 될 경우는 이 조정 영역이 필요 없으므로 stylesheet에서는 완전히 이 영역을 제거한다.</p>
+  <pre class="brush:css">@media print {
+  #nav-area {display: none;}
+  }
+</pre>
+</div>
+<p>일반적인 미디어 타입은 아래와 같다.</p>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td><code>screen</code></td>
+      <td>컬러 컴퓨터 표시 장치</td>
+    </tr>
+    <tr>
+      <td><code>print</code></td>
+      <td>출력 장치</td>
+    </tr>
+    <tr>
+      <td style="padding-right: 1em;"><code>projection</code></td>
+      <td>프로젝트 출력 장치</td>
+    </tr>
+    <tr>
+      <td><code>all</code></td>
+      <td>그외 모든 미디어 장치(기본 설정)</td>
+    </tr>
+  </tbody>
+</table>
+<div class="tuto_details">
+  <div class="tuto_type">
+    좀더 자세히</div>
+  <p>한 무리의 규칙들의 미디어 타입을 설정하는데는 다른 방법들도 있다.</p>
+  <p>Stylesheet가 document로 연결되어 있을때 document의 마크업 언어는 미디어 타입을 설정하는 것을 허용한다. 예를 들면, HTML내의 <code>LINK</code> 태그에서 <code>media속성으로 옵션항목으로 미디어 타입을 설정 할 수 있다.</code></p>
+  <p>CSS에서 stylesheet의 앞부분에 {{ CSSXref("@import") }}로 URL로 부터 다른 stylesheet를 불러 올 수 있다. 추가적으로 미디어 타입도 사용 가능하다.</p>
+  <p>이와 같은 규직으로, 미디어 타입별로 다른 파일에 분리하여 관리 가능하다. 이렇게 함으로써 stylesheet를 구조화하는데 유용하게 사용한다.</p>
+  <p>좀더 자세한 미디어 타입에 대해서는 CSS의 사양서중 <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a>를 참고하라.</p>
+  <p>{{ cssxref("display") }}속성에 대해서 좀더 자세한 사항은 이 안내서 나중에 소개될 <a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a>를 참고하라.</p>
+</div>
+<h3 id="출력">출력</h3>
+<p>CSS에는 인쇄 매체나 프린터 출력을 위한 특별 지원을 한다</p>
+<p>{{ cssxref("@page") }} 규칙을 통해 여백을 설정할 수 있다. 양면출력을 위해서는 <code>@page:left</code>와 <code>@page:right</code>로 각각의 여백을 개별로 설정 할 수 있다.</p>
+<p>출력 매체를 위해 사용되는 단위는 인치 (<code>in</code>), 포인트(<code>pt</code> = 1/72 inch), 센티미터(<code>cm</code>)와 밀리미터(<code>mm</code>)등을 사용 할 수 있다. 글자 크기 설정과 맞추기 위해 사용하는 ems(em)과 퍼센트(%)도 사용하기에 적절하다.</p>
+<p>Document의 내용중 페이지 분할을 위해서는 { cssxref("page-break-before") }}나 {{ cssxref("page-break-after") }}, {{ cssxref("page-break-inside") }}속성을 사용할 수 있다.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>아래 예제는 페이지 여백 4방향 모두를 1인치로 설정한다.</p>
+  <pre class="brush:css">@page {margin: 1in;}
+</pre>
+  <p> </p>
+  <p>아래 규칙은 모든 H1 element는 새 페이지에서 시작하도록 한다.</p>
+  <pre class="brush:css">h1 {page-break-before: always;}
+</pre>
+</div>
+<div class="tuto_details">
+  <div class="tuto_type">
+    좀더 자세히</div>
+  <p>CSS의 출판 매체 지원에 대한 사항은 CSS사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a>를 확인 하라.</p>
+  <p>CSS의 다른 특징처럼 프린트 출력도 브라우저의 설정에 따라 다르다. 예를 들어 모질라 브라주저는 프린트 출력시 기본 바깥 여백과 머릿말, 꼬릿말이 지원된다. 사용자가 어떤 브라우저를 사용하는지, 그 브라우저의 설정값 또한 알수 없기 때문에 해당 페이지 출력물 결과를 알수 없다.</p>
+</div>
+<h3 id="사용자_인터페이스">사용자 인터페이스</h3>
+<p>CSS는 컴퓨터 모니터같은 표시장치를 위한 특별한 사용자 인터페이스를 지원한다. 이 속성으로 Document를 동적으로 사용자가 사용자 인터페이스로 동작 할 수 있도록 변경한다.</p>
+<p>사용자 인터페이스 장치에 대한 특별한 미디어 타입은 없다.</p>
+<p>단지 5가지 설렉터가 있을 뿐이다.</p>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td><strong>설렉터</strong></td>
+      <td><strong>선택</strong></td>
+    </tr>
+    <tr>
+      <td><code>E{{ cssxref(":hover") }}</code></td>
+      <td>포인터가 E로 명시된 element위에 놓일 경우</td>
+    </tr>
+    <tr>
+      <td><code>E{{ cssxref(":focus") }}</code></td>
+      <td>키보드 포커스를 가진 E element</td>
+    </tr>
+    <tr>
+      <td><code>E{{ cssxref(":active") }}</code></td>
+      <td>사용자 현재 동작에 개임된 E element</td>
+    </tr>
+    <tr>
+      <td><code>E{{ cssxref(":link") }}</code></td>
+      <td>최근에 방문하지 않은 URL을 가진 Hyperlink인 E element</td>
+    </tr>
+    <tr>
+      <td><code>E{{ cssxref(":visited") }}</code></td>
+      <td>최근에 방문한 URL을 가진 Hyperlink인 E element</td>
+    </tr>
+  </tbody>
+</table>
+<div class="note">
+  <p><strong>주의: </strong>:visited 설렉터에서 획득한 정보는 {{ gecko("2.0") }}에만 해당된다. 좀더 자세한 사항은 <a href="/en/CSS/Privacy_and_the_:visited_selector" title="en/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a>을 보라.</p>
+</div>
+<p>{{ cssxref("cursor") }}속성은 포인터의 모양을 설정한다. 몇몇 일반적인 모양은 다음과 같다. 브라우저에서 마우스를 아래 리스트에 각각 아이템으로 옮기면 그 모양을 확인 할 수 있다.</p>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td><strong>설렉터</strong></td>
+      <td><strong>선택</strong></td>
+    </tr>
+    <tr style="cursor: pointer;">
+      <td><code>pointer</code></td>
+      <td>링크임을 나타낼때</td>
+    </tr>
+    <tr style="cursor: wait;">
+      <td><code>wait</code></td>
+      <td>프로그램이 실행중이라 입력을 받지 못하는 상태일때</td>
+    </tr>
+    <tr style="cursor: progress;">
+      <td><code>progress</code></td>
+      <td>프로그램이 작업을 수행하고 있지만 입력을 받을 수 있는 상태</td>
+    </tr>
+    <tr style="cursor: default;">
+      <td><code>default</code></td>
+      <td>기본 상태(보통 화살표 모양)</td>
+    </tr>
+  </tbody>
+</table>
+<p>{{ cssxref("outline") }}속성은 키보드 포커스를 가리키는 외곽선을 생성할때 사용한다. 그 값은 사용자가 방향을 설정할 수 없다는 것을 제외하고는 {{ cssxref("border") }}속성과 유사하다.</p>
+<p>Some other features of user interfaces are implemented using attributes, in the normal way. For example, an element that is disabled or read-only has the <strong>disabled</strong> attribute or the <strong>readonly</strong> attribute. Selectors can specify these attributes like any other attributes, by using square brackets: <code>{{ mediawiki.external('disabled') }}</code> or <code>{{ mediawiki.external('readonly') }}</code>.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    Example</div>
+  <p>These rules specify styles for a button that changes dynamically as the user interacts with it:</p>
+  <pre class="brush:css">.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  }
+</pre>
+  <p> </p>
+  <p>This wiki does not support a user interface on the page, so these buttons do not "click". Here are some static images to illustrate the idea:</p>
+  <table style="border: 2px outset #36b; padding: 1em; background-color: #fff;">
+    <tbody>
+      <tr>
+        <td>
+          <table>
+            <tbody>
+              <tr>
+                <td><span style="width: 8em; height: 2em; background-color: #cdc; color: #777; padding: .5em 1em; cursor: default; margin-right: 1em; border: 2px outset #cec;">Click Me</span></td>
+                <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px outset #cec;">Click Me</span></td>
+                <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px inset #cec;">Click Me</span></td>
+              </tr>
+              <tr style="line-height: 25%;">
+                <td> </td>
+              </tr>
+              <tr style="font-style: italic;">
+                <td>disabled</td>
+                <td>normal</td>
+                <td>active</td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <p> </p>
+  <p>A fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus. It might also have a hover effect when the pointer is over it.</p>
+</div>
+<div class="tuto_details">
+  <div class="tuto_type">
+    More details</div>
+  <p>For more information about user interfaces in CSS, see <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> in the CSS Specification.</p>
+  <p>There is an example of Mozilla's markup language for user interfaces, XUL, in Part II of this tutorial.</p>
+</div>
+<h2 id="Action_Printing_a_document">Action: Printing a document</h2>
+<ol>
+  <li>Make a new HTML document, <code>doc4.html</code>. Copy and paste the content from here:
+    <pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Print sample&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style4.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Section A&lt;/h11&gt;
+    &lt;p&gt;This is the first section...&lt;/p&gt;
+    &lt;h1&gt;Section B&lt;/h1&gt;
+    &lt;p&gt;This is the second section...&lt;/p&gt;
+    &lt;div id="print-head"&gt;
+      Heading for paged media
+    &lt;/div&gt;
+    &lt;div id="print-foot"&gt;
+      Page:
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  </li>
+  <li>Make a new stylesheet, <code>style4.css</code>. Copy and paste the content from here:
+    <pre class="brush:css">/*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+</pre>
+  </li>
+  <li>View this document in your browser; it uses your browser's default style.</li>
+  <li>Print (or print preview) the document; the stylesheet places each section on a separate page, and it adds a header and footer to each page. If your browser supports counters, it adds a page number in the footer.
+    <table>
+      <tbody>
+        <tr>
+          <td>
+            <table style="border: 2px outset #36b; padding: 1em;">
+              <tbody>
+                <tr>
+                  <td>
+                    <table style="width: 15em; margin-right: 2em;">
+                      <tbody>
+                        <tr>
+                          <td>
+                            <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">
+                              Heading for paged media</div>
+                            <div style="font-size: 150%; font-weight: bold;">
+                              Section A</div>
+                            <div style="font-size: 75%;">
+                              This is the first section...</div>
+                            <div style="font-size: 150%; text-align: right; margin-top: 12em;">
+                              Page: 1</div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+          <td>
+            <table style="border: 2px outset #36b; padding: 1em;">
+              <tbody>
+                <tr>
+                  <td>
+                    <table style="width: 15em; margin-right: 2em;">
+                      <tbody>
+                        <tr>
+                          <td>
+                            <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">
+                              Heading for paged media</div>
+                            <div style="font-size: 150%; font-weight: bold;">
+                              Section B</div>
+                            <div style="font-size: 75%;">
+                              This is the second section...</div>
+                            <div style="font-size: 150%; text-align: right; margin-top: 12em;">
+                              Page: 2</div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </li>
+</ol>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+  <caption>
+    Challenges</caption>
+  <tbody>
+    <tr>
+      <td>Move the print-specific style rules to a separate CSS file.
+        <p>Read the {{ CSSXref("@import") }} reference page to find details of how to import the new print-specific CSS file into your <code>style4.css</code> stylesheet.</p>
+        <p>Make the headings turn blue when the mouse pointer is over them.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> <a href="/en/CSS/Getting_Started/Challenge_solutions#Media" title="https://developer.mozilla.org/en/CSS/Getting_started/Challenge_solutions#Media">See solutions to these challenges.</a></p>
+<h2 id="What_next">What next?</h2>
+<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="/Talk:en/CSS/Getting_Started/Media" title="Talk:en/CSS/Getting_Started/Media">Discussion</a> page.</p>
+<p>So far, all the style rules in this tutorial have been specified in files. The rules and their values are fixed. The next page describes how you can change rules dynamically by using a programming language: <strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p>
diff --git a/files/ko/web/css/시작하기/배치/index.html b/files/ko/web/css/시작하기/배치/index.html
new file mode 100644
index 0000000000..0b39699419
--- /dev/null
+++ b/files/ko/web/css/시작하기/배치/index.html
@@ -0,0 +1,369 @@
+---
+title: 배치
+slug: Web/CSS/시작하기/배치
+translation_of: Learn/CSS/CSS_layout
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자")}}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 12번째 장; 여기서는 Document의 배치를 정하는 몇몇 방법에 대해 알아본다. 예제 document를 좀 바꿔 보자.</p>
+
+<h2 class="clearLeft" id="정보_배치">정보: 배치</h2>
+
+<p>Document의 배치를 바꾸기 위해 CSS는 다양한 방법을 제공한다. 어떤 고급 기술은 여기 초급안내서의 범주를 훨씬 넘어서는 고급 기술이다.</p>
+
+<p>여러 브라우저에서의 결과물이 비슷하게 나오게 하기 위해, stylesheet값은 브라우저의 기본 stylesheet값과 배치값을 사용한다. 이 주제 또한 여기서의 초급과정보다 더 고급 과정이다.</p>
+
+<p>여기서는 간단한 기술에 대해 연습 해 보자.</p>
+
+<h3 id="Document_구조">Document 구조</h3>
+
+<p>만약 Document의 배치를 변경하려 한다면 이떤 경우에는 document 구조를 바꿔야 할지 모른다.</p>
+
+<p>document의 마크업 언어는 구조 생성을 위한 용도의 일반적인 태그를 가지고 있다. 예를 들면 HTML에서 구조를 생성 하기 위해 {{ HTMLElement("div") }} element를 사용 할 수 있다.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>예제 Document에서 <u>Numbered paragraphs</u>가 표시된 단락은 컨테이너 구조가 아니다.</p>
+
+<p>따라서 이 단락 주변에는 설렉터에서 이 element에 대해 정의 한 것이 없으므로 경계 박스를 그릴 수 없다.</p>
+
+<p>이 구조적 문제를 해결 하기 위해, {{ HTMLElement("div") }}태그를 단락 주변에 추가 하라. 이 태그는 유일한 것이어서 id속성으로 구분 될 수 있다.</p>
+
+<pre class="brush:html;highlight:[2,8]">&lt;h3&gt;Numbered paragraphs&lt;/h3&gt;
+&lt;div id="numbered"&gt;
+  &lt;p&gt;Lorem ipsum&lt;/p&gt;
+  &lt;p&gt;Dolor sit&lt;/p&gt;
+  &lt;p&gt;Amet consectetuer&lt;/p&gt;
+  &lt;p&gt;Magna aliquam&lt;/p&gt;
+  &lt;p&gt;Autem veleum&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>이제 예제 stylesheet 에 두 리스트에 주변의 경계 표시를 위한 규칙 하나를 아래와 같이 추가 하자.</p>
+
+<pre class="brush:css">ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+</pre>
+
+<p>아래와 같은 형식으로 출력된다.</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;">
+    <ul style="">
+     <li>Arctic</li>
+     <li>Atlantic</li>
+     <li>Pacific</li>
+     <li>Indian</li>
+     <li>Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="크기_단위">크기 단위</h3>
+
+<p>지금까지 이 안내서에서는 크기를 픽셀(px)단위로 표시 해왔다. 컴퓨터 화면과 같은 출력장치에서는 어느 정도 적절한 표시 방법이다. 그러나, 사용자가 글씨 크기를 바꿔 버리면 화면 출력은 이상하게 엉켜버릴 수 있다.</p>
+
+<p>다양한 용도를 위해 크기는 백분위(%)값이나, 고정넓이폰트 값(em)으료 표시하는 것이 더 좋은 방법이다.  고정 넓이 폰트 값(em)은 현재 사용되는 글씨체중 'm'에 해당하는 넓이를 기준으로 하고 있다.(영문에서는 'm'이 가장 넓은 폰트이다). 사용자가 글씨 크기를 바꾸면 배치는 자동적으로 맞추어 질 것이다.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>아래 텍스트의 왼쪽에 있는 경계는 픽셀로 크기를 지정 했다.</p>
+
+<p>오른쪽은 고정 넓이 폰트값(aka ems)으로 지정 했다.</p>
+
+<p>브라우저에서 글씨 크기를 변경하고 확인 해보면 오른쪽은 적당한 크기를 유지하지만, 왼쪽은 그렇지 않다는 것을 확인 할 수 있을 것이다.</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <div style="">RESIZE ME PLEASE</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">좀더 자세히</div>
+
+<p>다른 기기에서는 다른 단위가 적절할 수 있다.</p>
+
+<p>이 안내서 나중 페이지에 이에 대해 좀더 자세히 알아 보도록 하자.</p>
+
+<p>변수 값과 단위에 대해 상세하게 확인 하고 싶다면 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> 부분을 참고 하라.</p>
+</div>
+
+<h3 id="텍스트_배치">텍스트 배치</h3>
+
+<p>element 내용물을 배치하는데는 두가지 속성이 있다. 이 두가지를 통해 간단하게 배치/정열을 조절 할 수 있다.</p>
+
+<dl>
+ <dt>{{ cssxref("text-align") }}</dt>
+ <dd>이 <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>값로 할당하여 정열 할 수 있다.</dd>
+ <dt>{{ cssxref("text-indent") }}</dt>
+ <dd>들여쓰기를 위해 적당한 값을 명시하여 사용 한다.</dd>
+</dl>
+
+<p>이 두 속성은 실제 텍스트 외에도 모든 텍스트 같은(text-like) element에도 영향을 미친다. 속성들은 부모로부터 자식까지 상송되므로, 자식 element에서 부모로 부터 받지 않으려는 속성에 대해서 정확하게 제거 하는 규칙을 추가 하지 않는다면 원하는 결과를 얻지 못할지 모른다.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>헤더를 가운데 정렬하려면</p>
+
+<pre class="brush:css">h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+</pre>
+
+<p>결과는 아래와 같다.</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>HTML document에서, 헤더 아래쪽에 보여지는 내용물(content)는 헤더에서 구조적으로 포함된 사항이 아니다. 그러므로 이와 같은 헤더를 정렬하려면 헤더 아래쪽 테그는 그 스타일을 상속 받아서는 안된다.</p>
+</div>
+
+<h3 id="부유(Floats)">부유(Floats)</h3>
+
+<p>{{ cssxref("float") }}속성은 element를 강제로 왼쪽 혹은 오른쪽으로 정렬시킨다. 이것이 element의 위치와 크기를 조정하는 가장 간단한 방법이다.</p>
+
+<p>나머지 document의 내용물(content)는 부유 속성의 element 주변으로 떠있게 된다. {{ cssxref("clear") }} 속성을 통해서 element들을 부유 element로 부터 떨어져 고정 위치하도록 한다.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>예제 document에서 리스트는 윈도우의 크기에 맞게 늘어난다. 이를 방지하기 위해서는 부유속성으로 왼쪽으로 정렬되도록 하면 된다.</p>
+
+<p>아래 예로 헤더를 왼쪽 한곳에 고정 시키려면 clear속성과 left를 함께 선언 해 주어야 한다.</p>
+
+<pre class="brush:css">ul, #numbered {float: left;}
+h3 {clear: left;}
+</pre>
+</div>
+
+<p>The result looks like:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
+    <ul style="">
+     <li>Arctic</li>
+     <li>Atlantic</li>
+     <li>Pacific</li>
+     <li>Indian</li>
+     <li>Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(텍스트가 경계선에 바짝 붙어 있다면 박스의 오른편에 약간의 내부 여백 필요할듯 하다.)</p>
+
+<h3 id="위치잡기">위치잡기</h3>
+
+<p>{{ cssxref("position") }}속성에 아래 4가지 방법으로 값을 선언하여 위치를 잡을 수 있다.</p>
+
+<p>더 많은 속성이 있지만 아래와 같은 간단한 방법으로(여기서는 초급 안내서이므로) 위치를 조정 할 수 있다. 그러나 아래 방법을 조합해서 쓴다면 다소 어려워 질 것이다.</p>
+
+<dl>
+ <dt><code>relative</code></dt>
+ <dd>element의 위치는 상대적으로 정해진다. 어느 정도 값을 지정 함으로 element를 위치 시킬 수 있다. element의 바깥 여백값을 설정함으로 이와 동일한 설정 효과를 볼 수도 있다.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>고정 위치 설정법. document window에서의 상대적 위치를 지정하는 방법이다. document의 나머지 부분이 스크롤 되어야 할지라도 해당 element는 고정 값을 가진다.</dd>
+ <dt><code>absolute</code></dt>
+ <dd>부모 element의 위치에 상대적으로 위치가 고정된다. 그 부모 element는 위치 지정 방법이 <code>relative</code>, <code>fixed</code> or <code>absolute</code> 중 하나이어야 한다. element의 위치 속성을 releative로 설정 한다면 방향 표시를 하지 않더라도 어떠한 속성을 가진 부모 element에도 잘 동작 할 것이다.</dd>
+ <dt><code>static</code></dt>
+ <dd>기본 설정 값이다. 명확하게 상속받은 위치 지정을 해제하려면 이 값으로 선언 해야 한다.</dd>
+</dl>
+
+<p>이 위치 지정 속성과 함께(<code>static은 제외</code>) 방향(<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>), 높이(<code>width)</code>, 넓이(<code>height) 크기(size)도 같이 지정 해야 한다.</code></p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>아래 두 element의 Top정렬을 동일한 위치에 설정 하려면 예제 Document의 두 element에 부모 container를 만들어라.</p>
+
+<pre class="brush:html">&lt;div id="parent-div"&gt;
+  &lt;p id="forward"&gt;/&lt;/p&gt;
+  &lt;p id="back"&gt;\&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>예제 stylesheet에서 부모 element의 위치 속성을 <code>relative로 하라.</code> 방향 속성까지 같이 할 필요는 없다.자식 element의 위치는 absolute로 설정하라.</p>
+
+<pre class="brush:css">#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin:0px; /* no margin around the elements */
+  top: 0px; /* distance from top */
+  left: 0px; /* distance from left */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+</pre>
+
+<p>결과는 아래처럼 백슬레쉬(\)와 슬레쉬(/)가 겹쳐서 위치 되도록 하였다.</p>
+
+<div style="position: relative; left: .33em; font: bold 300% sans-serif;">
+<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p>
+
+<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
+</div>
+
+<table style="background-color: white; border: 2px outset #36b; height: 5em; padding: 1em; width: 30em;">
+ <tbody>
+  <tr>
+   <td> </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/visuren.html">Visual formatting model</a>과 <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>의 두 챕터에 나와 있다.</p>
+
+<p>다양한 브라우저에서 동작하도록 stylesheet를 설계하고자 한다면, 브라우저별로 표준을 다르게 해석하는 것과 특정 버전의 브라우저에 있는 버그에 대해서도 고려해야 한다.</p>
+</div>
+
+<h2 id="액션_배치_선언">액션: 배치 선언</h2>
+
+<ol>
+ <li><code>doc2.html와</code> <code>style2.css를 수정 하여 위에 나온</code><a href="#Document_structure" title="#Document structure"><strong>Document structure</strong></a> 와 <a href="#Floats" title="#Floats"><strong>Floats</strong></a>를 연습 해 보자.</li>
+ <li><a href="#Floats" title="#Floats"><strong>Floats</strong></a>예제에서 텍스트를 오른쪽 경계와의 안쪽 여백을 0.5 em로 설정 하라.</li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">도전</div>
+
+<p><code>doc2.html의 아래쪽 &lt;/body&gt; 바로 위에 아래 태그를 추가하라</code>.</p>
+
+<pre class="brush:html">&lt;img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
+</pre>
+
+<p>아래 이미지를 다운로드 하지 않았다면 지금 다운로드 하고, 위의 예제 파일이 있는 곳으로 저장하라.</p>
+
+<table style="border: 2px solid #ccc;">
+ <tbody>
+  <tr>
+   <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Document내에서 위의 이미지가 어느 위치에 표시될지 예상 해 보라. 그리고 브라우저에서 읽어들여 그 결과를 확인 해 보라.</p>
+
+<p>Document의 오른쪽 위에 자리 잡을 수 있도록 예제 stylesheet에 규칙을 추가 해 보라.</p>
+
+<p>브라우저에서 다시 읽어 보고 윈도우를 작게 조절 해 보라. 윈도우 크기를 조절 할때에도 Document가 Scroll될지라도 위의 이미지가 오른쪽 위에 계속 자리 하는지를 확인 해 보라.</p>
+
+<div style="position: relative; width: 29.5em; height: 18em;">
+<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
+<ul style="">
+ <li>Arctic</li>
+ <li>Atlantic</li>
+ <li>Pacific</li>
+ <li>Indian</li>
+ <li>Southern</li>
+</ul>
+</div>
+
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
+<p><strong>1: </strong>Lorem ipsum</p>
+
+<p><strong>2: </strong>Dolor sit</p>
+
+<p><strong>3: </strong>Amet consectetuer</p>
+
+<p><strong>4: </strong>Magna aliquam</p>
+
+<p><strong>5: </strong>Autem veleum</p>
+</div>
+
+<p style=""> </p>
+
+<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div>
+</div>
+</div>
+</div>
+
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Layout">정답 확인.</a></p>
+
+<h2 id="다음에는">다음에는?</h2>
+
+<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}이제까지 CSS의 초급 안내서에 나온 주제를 다 확인 해 보았다. 다음장에서 부터는 CSS 설렉터의 고급 기술과 <a href="/en-US/docs/CSS/Getting_Started/Tables" title="/en-US/docs/CSS/Getting_Started/Tables">테이블</a>의 스타일을 설정하는 방법에 대해 알아보자.</p>
diff --git a/files/ko/web/css/시작하기/상자/index.html b/files/ko/web/css/시작하기/상자/index.html
new file mode 100644
index 0000000000..17de8697c7
--- /dev/null
+++ b/files/ko/web/css/시작하기/상자/index.html
@@ -0,0 +1,330 @@
+---
+title: 상자
+slug: Web/CSS/시작하기/상자
+translation_of: Learn/CSS/Building_blocks
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Lists", "리스트") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 11번째 장; 여기서는 CSS를 통해 element들이 보여질때 page의 공간을 어떻게 배치하는지에 대해 알아본다. 예제 documnet에서 각 element의 여백 조절과 꾸미기에 대해 배워 보자.</p>
+
+<h2 class="clearLeft" id="정보_상자">정보: 상자</h2>
+
+<p>Element를 브라우저에서 표시할때 그 Element는 공간을 자치 한다. 차지하는 공간에는 4가지 요소가 있다.</p>
+
+<p>가운데는, element의 내용물을 표시가는 공간이며, 주변은 안쪽 여백이 있고, 그 주변에 경계가 있으며, 다른 element와의 간격이 있다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">margin</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">padding</p>
+
+    <div style="background-color: #eee;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>옅은 회색은 레이아웃의 구성을 보여준다.</em></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #fff;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>브라우저에서는 위와 같이 보여준다.</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>안쪽 여백, 경계 그리고 바깥 여백은 element에 대해 각각 top, right, bottom, left의 크기를 가진다. 이것들은 크기가 0이 될 수도 있다.</p>
+
+<h3 id="색상입히기">색상입히기</h3>
+
+<p>안쪽 여백 색상은 element의 배경과 항상 동일하게 유지된다. 배경색을 바꾼다면 element경과 안쪽 여백 색이 바뀌는 것을 확인 할 수 있을 것이다. 바깥 여백은 항상 투명하다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">margin</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">padding</p>
+
+    <div style="background-color: #ded;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>element는 녹색 배경색이다..</em></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #efe;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>브라우저에서 보면 위와 같다.</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="경계">경계</h3>
+
+<p>라인이나 상자를 통해 element의 경계를 치장 할 수 있다.</p>
+
+<p>경계를 설정 하려면 {{ cssxref("border") }}속성을 이용하라. 두께(보통 표시 화면의 픽셀 두께), 스타일, 색상등을 설정 하라.</p>
+
+<p>스타일은 아래와 같다.</p>
+
+<table style="margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>스타일을 none이라 hidden으로 설정하면 경계가 사라진다. 다른 방법으로는 경계 색상을 투명으로 설정하여 레이아웃을 변경하지 않고도 경계를 보이지 않게 할 수도 있다.</p>
+
+<p>경계를 각각 별개로 설정하기 위해서는{{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}등으로 할  수 있다. 각 top, right, bottom, left는 개별적으로 설정이 가능하다.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>아래 규칙은 헤더 element의 윗쪽 경계와 배경색에 대한 속성을 지정 한다.</p>
+
+<pre class="brush:css">h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+</pre>
+
+<p>결과는 아래와 같다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>아래 규칙은 이미지 주변에 회색띠를 둘러서 경계를 구분하기 편하게 하고 있다.</p>
+
+<pre class="brush:css">img {border: 2px solid #ccc;}
+</pre>
+</div>
+
+<p>결과는 아래와 같다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>Image:</td>
+   <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="내외부_여백">내/외부 여백</h3>
+
+<p>내/외부 여백을 이용하여(margins and padding) element의 위치와 그 주변의 여백을 설정 할 수 있다.</p>
+
+<p>바깥 여백은 {{ cssxref("margin") }}속성을 사용하며 내부여백은 {{ cssxref("padding") }}속성을 각각 사용한다.</p>
+
+<p>위의 속성으로 넓이 값을 하나 선언하면 element의 4방향(top, right, bottom and left) 모두 바뀐다.</p>
+
+<p>넓이 값을 두개 선언하면, 첫번째 값으로는 top, bottom값이 적용되고, 두번째 값으로는 right, left값이 바뀐다.</p>
+
+<p>4개 값을 각각 주기 위해서는 각 값을 top, right, bottom, left의 순서로 나열 하면 된다.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>아래는 p class가 remark인 단락을 빨간 경계박스로 만드는 규칙이다.</p>
+
+<p>안쪽 여백 값은 4픽셀으로 둘러져 있으며, 왼쪽 바깥 여백은 24픽셀이므로 들여쓰기 효과로 보여진다.</p>
+
+<pre class="brush:css">p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+</pre>
+
+<p>결과는 아래와 같다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p>Here is a normal paragraph.</p>
+
+    <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Here is a remark.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">좀더 자세히</div>
+
+<p>내/외부 여백으로 element의 배치를 할때는 브라우저에서 제공하는 기본 값과 사용자가 정의한 값을 바탕으로 정해지므로 조금 복잡할 수도 있다.</p>
+
+<p>브라우저에 따라 보이는 내용이 다를 수 있다. stylesheet에 내용을 많이 추가 할 수록 브라우저 기본값보단 설정된 값을 많이 사용하므로 더욱더 비슷한 결과물을 볼수 있을 것이다.</p>
+
+<p>원하는 결과물을 얻기 위해서는, Document의 마크업들을 바꿔야 할지도 모른다. 다음장에서는 이에 대해 좀더 자세히 알아보자.</p>
+
+<p>내/외부 여백과 경계선등에 대해 좀더 자세히 알아보려면 <a href="/en/CSS/box_model" title="en/CSS/box model"><span class="external">Box model</span></a>를 참조하라.</p>
+</div>
+
+<h2 id="액션_경계선_추가">액션: 경계선 추가</h2>
+
+<p><code>style2.css</code>를 열어, 각 헤더별로 윗쪽에 줄을 긋는 아래 규칙을 추가 하라.</p>
+
+<pre class="brush:css">h3 {border-top: 1px solid gray;}
+</pre>
+
+<p>이 페이지 아래 도전과제를 수행한다면, 그 규칙을 변경하고, 그렇지 않다면 각 리스트 아래에 바깥 여백을 추가하는 아래 규칙을 추가 하라.</p>
+
+<pre class="brush:css">li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+</pre>
+
+<p>결과를 보기위해 브라우저에서 새로 읽어 보라.</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">도전</div>
+
+<p>예제 stylesheet에 하나의 규칙을 추가하여 아래처럼 바다가 연생되는 색으로 모든 경계를 두껍게 만들어 보라.</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="border: 12px solid #69b; padding-left: 1em;">
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>. . .</strong></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p>(여기 보이는 예제와 똑같은 두께나 색상으로 바꿀 필요는 없다.)</p>
+</div>
+
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Boxes">결과 확인.</a></p>
+
+<h2 id="다음에는">다음에는?</h2>
+
+<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}지금까지 내/외부 여백을 설정하여 Document의 배치를 수정 해 보았다. 다음 장에서는 Document의 배치를 바꾸는 다른 방법에 대해 알아보자.</p>
diff --git a/files/ko/web/css/시작하기/종속과_상속/index.html b/files/ko/web/css/시작하기/종속과_상속/index.html
new file mode 100644
index 0000000000..ac819c8c64
--- /dev/null
+++ b/files/ko/web/css/시작하기/종속과_상속/index.html
@@ -0,0 +1,126 @@
+---
+title: 종속과 상속
+slug: Web/CSS/시작하기/종속과_상속
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/14)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/How_CSS_works", "CSS 동작 원리")}}<span class="seoSummary"><a href="/en-US/docs/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서의 4번쨰 섹션; stylesheets가 종속적으로 동작하는 것과 element가 부모로 부터 style을 상속 받는 것에 대해 서술해 본다. 단순하게 document의 많은 Style중 어떤 Style을 사용할 것인지 한단계 상속만으로 하나의 Style을 stylesheet에 추가 할 수 있다.</span></p>
+
+<h2 class="clearLeft" id="정보_종속과_상속">정보: 종속과 상속</h2>
+
+<p>element의 최종 style은 다양한 상호작용을 통해 여러 장소에서 선언된 것을 사용할 수 있다. 이런 다양한 상호작용을 통해 CSS는 강력해 질 수 있으며, 반대로 디버그 하기에는 복잡하고 어려워 진다.</p>
+
+<p>종속의 세가지 주요 원천은 아래와 같다.</p>
+
+<ul>
+ <li>마크업 언어를 위한 브라우저의 기본 style들</li>
+ <li>document를 읽는 사용자가 정의하는 styles</li>
+ <li>만든이에 의해 Style은 Document와 연결된다. 다음 3곳에서 그 내용을 명시할 수 있다.These can be specified in three places:
+  <ul>
+   <li>외부 파일: 이 안내서에서 주로 취급하는 Style에 대한 정의하는 법.</li>
+   <li>Document의 시작 부분에 정의하는 법: 선언한 Style은 선언된 Document의 페이지에서만 사용된다.</li>
+   <li>Document body의 특정 element에: 유지 보수가 가장 불편한 방법이며, 주로 테스트 용도로 쓴다.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>사용자 Style은 브라우저의 기본 Style을 변경 할수 있다. document 만든이의 style 에서 더 수정 변경 될 수도 있다. 이 안내서에서는, 예제 Document에서 만든 자신만의 stylesheets를 만들 수 있다.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>이 문서를 브라우저로 보면, 일부 style은 브라우저의 기본 값을 사용한다.</p>
+
+<p>일부는 브라우저 셋팅에서 수정한 style이 저장된 파일에서 가져온다. 파이어 폭스 브라우저에서 "설정" 메뉴나, 브라우저 폴더에 있는 userContent.css 직접 수정하여 변경 가능하다.</p>
+
+<p>일부 style은 wiki server에 의해 Stylesheet에 정의된 값을 사용한다.</p>
+</div>
+
+<p>예제 Document를 브라우저에서 열면, {{ HTMLElement("strong") }} elements로 지정된 문자는 다른 문자들 보다 두껍다. 이 Style은 기본 Style로 설정된 값에서 나온다.</p>
+
+<p>{{ HTMLElement("strong") }} elements의 색상은 red이다. 이 값은 예제 stylesheet에서 값을 가져 온다.</p>
+
+<p>{{ HTMLElement("strong") }} elements는 {{ HTMLElement("p") }} element의 자식 style이므로 대부분의 {{ HTMLElement("p") }} element의 style을 상속한다. 같은 방식으로, {{ HTMLElement("p") }} element는 {{ HTMLElement("body") }} element의 대부분의 style을 상속한다.</p>
+
+<p>종속적인 면에서 style은, 제작자(author)의 stylesheets가 사용자(reader) stylesheet보다도 브라우저의 기본 값보다도 우선 순위가 높다.</p>
+
+<p>상속적인 면에서는, 자식 노드의 자체 Style이 부모의 Style보다 우선 순위가 높다.</p>
+
+<p>우선 순위만 적용되는 것은 아니다. 페이지 아래부분에 좀더 자세히 설명 하도록 하자.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">좀더 자세히</div>
+
+<p>CSS는 <code>!important 키워드를 써서 </code>사용자(reader)가 document 제작자(author)의 style을 덮어 쓰는 방법도 제공힌다.</p>
+
+<p>이는 Document 제작자에게 사용자가 항상 제작자가 만든 내용을 그대로 본다는 것을 보장 하지 않는 다는 것을 의미한다.</p>
+
+<p>종속과 상속에 대해 자세히 알고 싶다면, CSS의 상세 사양서 중 <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">속성 값 할당, 종속 및 상속</a> 부분을 보라.</p>
+</div>
+
+<h2 id="액션_상속_사용하기">액션: 상속 사용하기</h2>
+
+<ol>
+ <li>CSS 예제 파일을 편집해 보자.</li>
+ <li>아래 라인을 추가 하라. 이미 문서 내에 존재하는 다른 내용이 있더라도 문서의 어디에 추가하든 상관 없다. 그러나, 맨 위에 추가 할수록 Document에 있는{{ HTMLElement("p") }} element가 {{ HTMLElement("strong") }} element의 부모가 되므로 지역적으로 영향을 미친다.
+  <pre class="brush:css">p {color: blue; text-decoration: underline;}
+</pre>
+ </li>
+ <li>이제 브라우저를 갱신하여 적용된 사항을 보라. 첫글자를 포함한 모든 문자들에 밑출이 그어져 있다. {{ HTMLElement("strong") }} elements는 부모{{ HTMLElement("p") }} element의 밑줄 속성을 상속 받았다.<br>
+
+  <p>그러나 {{ HTMLElement("strong") }} elements는 여전히 붉은색이다. 붉은색 속성은 자체 속성이므로 부모인 {{ HTMLElement("p") }} element의 파란색 속성보다 우선한다.</p>
+ </li>
+</ol>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
+</table>
+
+<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;">
+ <caption>Before</caption>
+ <tbody>
+  <tr>
+   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <caption>After</caption>
+ <tbody>
+  <tr>
+   <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">도전</div>
+Stylesheet를 변경하여 아래와 같이 붉은 글자만 밑줄 속성을 가지도록 수정 해 보라.
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p>
+
+<pre class="brush: css">p {color: blue; }
+strong {color: orange; text-decoration: underline;}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div>
+
+<h2 id="다음에는">다음에는?</h2>
+
+<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Selectors", "설렉터")}}예제 Stylesheet의 <code>&lt;p&gt;</code>와 <code>&lt;strong&gt; 태그</code>를 원하는 style로 임으로 바꾸어 보라. 다음 장에는 <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="/en-US/docs/CSS/Getting_Started/Selectors">설렉터</a>를 사용하는 법에 대해 알아보자.</p>
diff --git a/files/ko/web/css/시작하기/테이블/index.html b/files/ko/web/css/시작하기/테이블/index.html
new file mode 100644
index 0000000000..f7e832dbf1
--- /dev/null
+++ b/files/ko/web/css/시작하기/테이블/index.html
@@ -0,0 +1,474 @@
+---
+title: 테이블
+slug: Web/CSS/시작하기/테이블
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<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 &gt; 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">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Sample document 3&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style3.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;table id="demo-table"&gt;
+      &lt;caption&gt;Oceans&lt;/caption&gt;
+      &lt;thead&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;Area&lt;/th&gt;
+          &lt;th&gt;Mean depth&lt;/th&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;million km&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
+          &lt;th&gt;m&lt;/th&gt;
+        &lt;/tr&gt;
+      &lt;/thead&gt;
+      &lt;tbody&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Arctic&lt;/th&gt;
+          &lt;td&gt;13,000&lt;/td&gt;
+          &lt;td&gt;1,200&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Atlantic&lt;/th&gt;
+          &lt;td&gt;87,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Pacific&lt;/th&gt;
+          &lt;td&gt;180,000&lt;/td&gt;
+          &lt;td&gt;4,000&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Indian&lt;/th&gt;
+          &lt;td&gt;75,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Southern&lt;/th&gt;
+          &lt;td&gt;20,000&lt;/td&gt;
+          &lt;td&gt;4,500&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tbody&gt;
+      &lt;tfoot&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Total&lt;/th&gt;
+          &lt;td&gt;361,000&lt;/td&gt;
+          &lt;td&gt;&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Mean&lt;/th&gt;
+          &lt;td&gt;72,000&lt;/td&gt;
+          &lt;td&gt;3,800&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tfoot&gt;
+    &lt;/table&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</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 &gt; 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 &gt; thead &gt; tr:first-child &gt; th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table &gt; thead &gt; tr + tr &gt; 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 &gt; tfoot td {
+  background-color: #cee;
+}
+
+#demo-table &gt; tfoot &gt; 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>
diff --git a/files/ko/web/css/시작하기/텍스트_스타일/index.html b/files/ko/web/css/시작하기/텍스트_스타일/index.html
new file mode 100644
index 0000000000..2a99ee4f51
--- /dev/null
+++ b/files/ko/web/css/시작하기/텍스트_스타일/index.html
@@ -0,0 +1,149 @@
+---
+title: 텍스트 스타일
+slug: Web/CSS/시작하기/텍스트_스타일
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+
+<p>{{previousPage("/en-US/docs/CSS/Getting_Started/Readable_CSS", "알기 쉬운 CSS")}}<span class="seoSummary"><a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기 </a>안내서 7번째 장; 여기서는 텍스트 스타일에 대해 좀더 많은 예를 살펴 보자. 예제 Stylesheet를 다른 글씨체로 바꿔 보자.</span></p>
+
+<h2 class="clearLeft" id="정보_텍스트_스타일">정보: 텍스트 스타일</h2>
+
+<p>CSS는 몇가지 텍스트 스타일에 대한 속성이 있다.</p>
+
+<p>여러가지에 대해 한번에 편리하게 사용할 수 있는 {{ cssxref("font") }}라는 속성에 대해 알아보자. 예를 들면</p>
+
+<ul>
+ <li>굵게, 기울기, 작은 대문자체</li>
+ <li>크기</li>
+ <li>라인 높이</li>
+ <li>글씨체</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<pre class="brush:css">p {font: italic 75%/125% "Comic Sans MS", cursive;}
+</pre>
+
+<p>위의 규칙은 모든 단락내용을 italic폰트로 설정 하는 등의 다양한 설정을 한다.</p>
+
+<p>폰트 크기를 부모 element의 단락 크기의 3/4크기로 하고 라인 크기를 보통보다 좀 큰 125%크기로 한다.</p>
+
+<p>글자체는 Comic Sans MS이다. 하지만 이 글씨체가 유효하지 않다면 브라우저는 기본 글씨체인 손글씨체를 사용 할 것이다.</p>
+
+<p>이 규칙에는 굵기와 작은 대문자 속성을 무력화 하는 오류를 포함하고 있다.</p>
+</div>
+
+<h3 id="글씨체">글씨체</h3>
+
+<p>보통 Document에서 가용한 글씨체에는 어떤 것이 있는지 알고 작성할 수는 없다. 대체 가능한 글씨체를 같이 설정 해 주는 것도 좋은 방법이다.</p>
+
+<p>맨 마지막에는 기본 글씨체<code>(serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>)를 추가 설정 해 주는 것이 좋다.</p>
+
+<p>만약 document에서 지원 하지 않는 글씨체라면 브라우저가 다른 글씨체로 대체 할 것이다. 예를 들면, Document내에는 설정된 글씨체에서 지원 되지 않는 특수 문자를 포함 하는 경우 같은 것을 말한다. 브라우저는 자동적으로 다른 글씨체에서 위의 특수문자를 지원 한다면 그 글씨체를 사용하여 표시 할 것이다.</p>
+
+<p>글씨체를 설정 하기 위해서는 {{ cssxref("font-family") }}속성을 사용 하라.</p>
+
+<h3 id="글씨_크기">글씨 크기</h3>
+
+<p>브라우저는 보여지고 있는 페이지의 기본 글씨체의 크기와 텍스트의 크기를 바꿀 수 있어서 사용자에 맞는 것을 사용 할 수 있게 해준다.</p>
+
+<p><code>폰트 크기는 small, medium, large등 정해진 사이즈도 사용할 수 있다</code>. 또한 부모 글씨체 크기와 비교된(smaller, larger, 150%, 1.5 em) 값으로 설정 가능하다. 'em'은 'm'자의 폭을 말한다. 따라서 부모 element보다 1.5배 크기의 글씨크기를 말한다.</p>
+
+<p><code>14px</code> (14 pixels)와 같이 표시장치나 출력장치의 실체 크기로 지정 할 수도 있다. 이 경우는 크기를 바꿀수 없으므로 시각장애인들에게 불편할 수 있다. 이런 경우를 위해서는 document의 최 상위 element에서부터 정해진 크기 값중 하나인 'medium'으로 해 놓으면 하위 element는 그와 비교해 상대적인 값으로 크기를 설정 할 수 있다.</p>
+
+<p>글씨 크기를 설정 하려면 {{ cssxref("font-size") }}를 사용하라.</p>
+
+<h3 id="줄_높이">줄 높이</h3>
+
+<p>Line height는 줄간 높이를 말한다. 단락이 여러줄로 구성되었다면 보통보다 큰(larger-than-normal) 간격이 특히 작은 글씨라면 읽기 편하다.</p>
+
+<p>줄 높이 설정은 {{ cssxref("line-height") }}속성을 사용하라.</p>
+
+<h3 id="장식(Decoration)">장식(Decoration)</h3>
+
+<p>별도의 {{ cssxref("text-decoration") }} 속성으로 밑줄, 취소선 같은 다른 스타일 설정 할 수 있다. 설정된 장식(Decoration)속성을 없애기 위해서 값을 none을 쓸 수 있다.</p>
+
+<h3 id="다른_속성">다른 속성</h3>
+
+<p>기울기 속성 {{ cssxref("font-style") }}<code>: italic;</code><br>
+ 굵은 속성 <code>{{ cssxref("font-weight") }}: bold;</code><br>
+ 작은 대문자 <code>{{ cssxref("font-variant") }}: small-caps;</code></p>
+
+<p>위의 속성을 해제하려면 <code>normal</code> 또는 <code>inherit</code>로 설정하라.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">좀더 자세히</div>
+
+<p>텍스트 스타일은 다양한 방법으로 설정 가능하다.</p>
+
+<p>예를 들면, 위에 언급한 속성들에 다른 사용 가능한 값들이 더 있다.</p>
+
+<p>복잡한 stylesheet에서는, 원치 않는 오류(설정 값이 다르게 나타나는 오류) 방지를 위해 약칭 <code>font 속성 사용을 피하라.</code></p>
+
+<p>글씨체에 관한 모든 속성을 보려면, CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a>부분을 보라. 다양한 텍스트 효과를 위해서는 <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a> 부분을 참고 하라.</p>
+
+<p>사용자 시스템 환경에 설치된 폰트 외에 다른 폰트를 설정하려면 <a href="/en/css/@font-face" title="https://developer.mozilla.org/en/css/@font-face">@font-face</a>로 온라인에 있는 폰트 설정 할 수 있다. 이를 위해서는 브라우저에서 해당 규칙을 지원해야 한다.</p>
+</div>
+
+<h2 id="액션_글씨체_설정">액션: 글씨체 설정</h2>
+
+<p>간단한 document에서는, {{ HTMLElement("body") }} element의 글씨체를 설정 할 수 있으며, 그 이후에서는 이 속성을 상속한다.</p>
+
+<ol>
+ <li>예제 CSS 편집 해 보자.</li>
+ <li>예제의 Document에 아래 규칙을 추가 하라. CSS파일의 위쪽은 논리적인 곳(?)이다. 하지만 어디에 추가하든 그 속성은 적용 될 것이다.
+  <pre class="eval">body {font: 16px "Comic Sans MS", cursive;}
+</pre>
+ </li>
+ <li>주석을 탭이나 공백과 함께 잘 배치해 보라.</li>
+ <li>저장하고 브라우저를 다시 읽어보라. 해당 기기에 italic 스타일이 지원되지 않는 Comic Sans MS나 손글씨체 글씨체가 있다면 브라우저는 다음 예제의 첫출과 같이 italic이 지원되는 다른 글씨체로 바꿔서 보여 줄 것이다.
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>브라우저 메뉴에서 <strong>View &gt; Text Size &gt; Increase</strong> (or <strong>View &gt; Zoom &gt; Zoom In</strong>)을 선택 해 보라. 위에 16 pixels로 스타일 속성을 주었더라도, 화면에는 그 글씨 크기가 바뀔 것이다.</li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">도전</div>
+
+<p>다른것은 그대로 두고, 단어 앞 첫 글자 6개만 기본 sarif글씨체로 바꾸고 브라우저 기본 사이즈의 2배 크기로 변경 해 보라.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Add the following style declaration to the <code>strong</code> rule:</p>
+
+<pre class="brush: css">  font: 200% serif;
+</pre>
+If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div>
+
+<h2 id="다음에는">다음에는?</h2>
+
+<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Color", "색상")}}이미 예제에서 몇가지 색상을 사용 해 왔다. <a href="/en-US/docs/CSS/Getting_Started/Color" title="/en-US/docs/CSS/Getting_Started/Color">다음 장에서는</a> 기본 색생과 다른 색상 표현 법에 대해 알아본다.</p>