initial commit

2 files changed, 321 insertions, 0 deletions

diff --git a/files/ko/web/css/reference/index.html b/files/ko/web/css/reference/index.html
new file mode 100644
index 0000000000..21ee49d424
--- /dev/null
+++ b/files/ko/web/css/reference/index.html
@@ -0,0 +1,190 @@
+---
+title: CSS 참고서
+slug: Web/CSS/Reference
+tags:
+  - CSS
+  - Guide
+  - Overview
+  - Reference
+  - 'l10n:priority'
+translation_of: Web/CSS/Reference
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 참고서</strong>를 이용해 <a href="#키워드_색인">알파벳 순서로 정리한</a> 모든 표준 <a href="/ko/docs/Web/CSS">CSS</a> 속성, <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>, <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>, <a href="/ko/docs/Web/CSS/CSS_Types">CSS 자료형</a>과 <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 찾아보세요. 또한 <a href="#선택자">유형별로 정리한 CSS 선택자</a>와 <a href="#개념">주요 CSS 개념</a>도 찾아볼 수 있습니다. 추가로 간단한 <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM</a> 참조도 들어 있습니다.</p>
+
+<h2 id="기본_규칙_구문">기본 규칙 구문</h2>
+
+<h3 id="스타일_규칙_구문">스타일 규칙 구문</h3>
+
+<pre class="syntaxbox notranslate"><var>style-rule</var> <strong>::=</strong>
+    <var>selectors-list</var> <strong>{</strong>
+      <var>properties-list</var>
+    <strong>}</strong>
+</pre>
+
+<p>... where :</p>
+
+<pre class="syntaxbox notranslate"><var>selectors-list</var> <strong>::=</strong>
+    <var>selector</var>[<strong>:</strong><var>pseudo-class</var>] [<strong>::</strong><var>pseudo-element</var>]
+    [<strong>,</strong> <var>selectors-list</var>]
+
+<var>properties-list</var> <strong>::=</strong>
+    [<var>property</var> <strong>:</strong> <var>value</var>] [<strong>;</strong> <var>properties-list</var>]
+</pre>
+
+<p>아래 <a href="#선택자">선택자</a>, <a href="#의사_클래스">의사 클래스</a>, <a href="#의사_요소">의사 요소</a> 목록을 참고하세요. 각 <em><code>value</code></em>의 구문은 지정한 <em><code>property</code></em>가 정의하는 자료형에 따라 다릅니다.</p>
+
+<h4 id="스타일_규칙_예제">스타일 규칙 예제</h4>
+
+<pre class="brush: css notranslate">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>CSS 선택자 구문을 설명하는 입문자 단계의 소개 부분은 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS/%EC%84%A0%ED%83%9D%EC%9E%90">이 자습서</a>에서 찾아볼 수 있습니다. 규칙 정의에서 <a href="/ko/docs/Web/CSS/syntax">구문</a> 오류가 하나라도 발생하면 규칙 전체가 유효하지 않다는 점을 명심하세요. 유효하지 않은 규칙은 브라우저가 무시합니다. CSS 규칙 정의는 모두 (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">텍스트에 기반</a>하지만, DOM-CSS / CSSOM (규칙 관리 시스템)은 <a href="https://www.w3.org/TR/cssom/#introduction">객체에 기반</a>합니다.</p>
+
+<h3 id="규칙_구문">@규칙 구문</h3>
+
+<p>@규칙 체계는 매우 다양하므로 필요한 구체적인 구문을 찾으려면 <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 봐주세요.</p>
+
+<h2 id="키워드_색인">키워드 색인</h2>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 이 색인에 있는 속성 이름에는 CSS 표준 이름과 다른 <a href="/ko/docs/Web/CSS/CSS_Properties_Reference">JavaScript 이름</a>이 들어가지 않습니다.</p>
+</div>
+
+<div>{{CSS_Ref}}</div>
+
+<h2 id="선택자">선택자</h2>
+
+<p>다음은 <a href="/ko/docs/Web/CSS/CSS_Selectors">선택자</a> 목록입니다. 선택자를 사용하면 DOM 요소의 다양한 기능에 기반한 조건을 통해 스타일을 입힐 수 있습니다.</p>
+
+<h3 id="기본_선택자">기본 선택자</h3>
+
+<p><strong>기본 선택자</strong>는 선택자의 기초를 이루며, 조합을 통해 더 복잡한 선택자를 생성합니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Universal_selectors">전체 선택자</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
+ <li><a href="/ko/docs/Web/CSS/Type_selectors">태그 선택자</a> <em><code>elementname</code></em></li>
+ <li><a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a> <code>.<em>classname</em></code></li>
+ <li><a href="/ko/docs/Web/CSS/ID_selectors">ID 선택자</a> <code>#<em>idname</em></code></li>
+ <li><a href="/ko/docs/Web/CSS/Attribute_selectors">속성 선택자</a> <code>[<em>attr</em>=<em>value</em>]</code></li>
+</ul>
+
+<h3 id="그룹_선택자">그룹 선택자</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/Selector_list">선택자 목록</a> <code><em>A</em>, <em>B</em></code></dt>
+ <dd>A와 B 요소를 모두 선택합니다. 일치하는 여러가지 요소를 선택할 때 사용합니다.</dd>
+</dl>
+
+<h3 id="결합자">결합자</h3>
+
+<p>결합자는 "<em><code>A</code></em>는 <em><code>B</code></em>의 자식", "<em><code>A</code></em>는 <em><code>B</code></em>와 인접 요소"처럼, 두 개 이상의 선택자끼리 관계를 형성합니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/%EC%9D%B8%EC%A0%91_%ED%98%95%EC%A0%9C_%EC%84%A0%ED%83%9D%EC%9E%90">인접 형제 결합자</a> <code><em>A</em> + <em>B</em></code></dt>
+ <dd>요소 <em><code>A</code></em>와 <em><code>B</code></em>가 같은 부모를 가지며 <em><code>B</code></em>가 <em><code>A</code></em>를 바로 뒤따라야 하도록 지정합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a> <code><em>A</em> ~ <em>B</em></code></dt>
+ <dd>요소 <em><code>A</code></em>와 <em><code>B</code></em>가 같은 부모를 가지며 <em><code>B</code></em>가 <em><code>A</code></em>를 뒤따라야 하도록 지정합니다. 그러나 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 옆에 위치해야 할 필요는 없습니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Child_combinator">자식 결합자</a> <code><em>A</em> &gt; <em>B</em></code></dt>
+ <dd>요소 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 밑에 위치해야 하도록 지정합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Descendant_combinator">자손 결합자</a> <code><em>A</em> <em>B</em></code></dt>
+ <dd>요소 <em><code>B</code></em>가 <em><code>A</code></em>의 밑에 위치해야 하도록 지정합니다. 그러나 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 아래에 있을 필요는 없습니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Column_combinator">열 결합자</a> <code><em>A</em> || <em>B</em></code> {{experimental_inline}}</dt>
+ <dd>요소 <em><code>B</code></em>가 표의 열 <em><code>A</code></em> 안에 위치해야 하도록 지정합니다. 여러 열에 걸친 요소는, 각각의 열 모두에 대해 안쪽에 위치한 것으로 간주합니다.</dd>
+</dl>
+
+<h3 id="의사_클래스요소">의사 클래스/요소</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a> <code>:</code></dt>
+ <dd>요소의 특정 상태를 선택합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a> <code>::</code></dt>
+ <dd>HTML이 포함하지 않은 객체를 나타냅니다.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>같이 보기:</strong> <a href="https://www.w3.org/TR/selectors/#overview">Selectors Level 4 명세의 선택자 목록.</a></p>
+</div>
+
+<h2 id="개념">개념</h2>
+
+<h3 id="구문과_의미">구문과 의미</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Syntax">CSS 구문</a></li>
+ <li><a href="/ko/docs/Web/CSS/At-rule">@-규칙</a></li>
+ <li><a href="/ko/docs/Web/CSS/Cascade">종속</a></li>
+ <li><a href="/ko/docs/Web/CSS/Comments">주석</a></li>
+ <li><a href="/ko/docs/Glossary/Descriptor_(CSS)">서술자</a></li>
+ <li><a href="/ko/docs/Web/CSS/inheritance">상속</a></li>
+ <li><a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a></li>
+ <li><a href="/ko/docs/Web/CSS/Specificity">명시도</a></li>
+ <li><a href="/ko/docs/Web/CSS/Value_definition_syntax">값 정의 구문</a></li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/actual_value">실제값</a></li>
+ <li><a href="/ko/docs/Web/CSS/computed_value">계산값</a></li>
+ <li><a href="/ko/docs/Web/CSS/initial_value">초깃값</a></li>
+ <li><a href="/ko/docs/Web/CSS/resolved_value">결정값</a></li>
+ <li><a href="/ko/docs/Web/CSS/specified_value">지정값</a></li>
+ <li><a href="/ko/docs/Web/CSS/used_value">사용값</a></li>
+</ul>
+
+<h3 id="레이아웃">레이아웃</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a></li>
+ <li><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a></li>
+ <li><a href="/ko/docs/Web/CSS/Layout_mode">레이아웃 모드</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a></li>
+ <li><a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">쌓임 맥락</a></li>
+ <li><a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 맥락</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<h3 id="주요_객체_유형">주요 객체 유형</h3>
+
+<ul>
+ <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li>
+ <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li>
+ <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> <span style="white-space: nowrap;">(selector &amp; style)</span></li>
+ <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li>
+ <li>{{DOMxRef("HTMLElement.style")}}</li>
+ <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (just style)</li>
+ <li>{{DOMxRef("Element.className")}}</li>
+ <li>{{DOMxRef("Element.classList")}}</li>
+</ul>
+
+<h3 id="중요_메서드">중요 메서드</h3>
+
+<ul>
+ <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li>
+ <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS 확장</a> (<code>-moz-</code> 접두사 사용)</li>
+ <li><a href="/ko/docs/Web/CSS/WebKit_Extensions">WebKit CSS 확장</a> (대다수 <code>-webkit-</code> 접두사 사용)</li>
+ <li><a href="/ko/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS 확장</a> (<code>-ms-</code> 접두사 사용)</li>
+</ul>
+
+<h2 id="외부_링크">외부 링크</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/CSS/#indices">CSS 색인 (w3.org)</a></li>
+</ul>
diff --git a/files/ko/web/css/reference/property_template/index.html b/files/ko/web/css/reference/property_template/index.html
new file mode 100644
index 0000000000..9df3680b49
--- /dev/null
+++ b/files/ko/web/css/reference/property_template/index.html
@@ -0,0 +1,131 @@
+---
+title: Property Template
+slug: Web/CSS/Reference/Property_Template
+tags:
+  - CSS
+  - MDN Meta
+translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template
+---
+<p>{{MDNSidebar}}</p>
+
+<div class="blockIndicator note">
+<p><span class="seoSummary">This is a template page for CSS property. Please use this as a raw template when you create a new CSS property page.</span><br>
+ <em>Comment in italics are information about how to use part of the template</em></p>
+</div>
+
+<p>{{CSSRef}}</p>
+
+<p><em>Add the non-standard header if the property is not on the standard track. In the summary section, in a note, describe how to achieve its effect using standard Open Web technologies.</em></p>
+
+<p>{{Non-standard_Header}}</p>
+
+<p><em>Add the experimental header if in your judgement the property's behavior is likely to change in future, for example because of very immature specifications or competing incompatible implementations.</em></p>
+
+<p>{{SeeCompatTable}}</p>
+
+<p><em>Description of the property. It must start by "The <code>xyz</code> CSS property" followed by a one-sentence description. The first paragraph of this introduction will be used by default as the description of the page.</em></p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Placeholder for any special messages.</p>
+</div>
+
+<p><em>But don't add several notes. It should be really important, or be part of the description!</em></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css;">/* Keyword values */
+property: value1;
+property: value2;
+
+/* &lt;length&gt; values */
+property: 12.8em;   /* A valid length */
+
+/* Global values */
+property: inherit;  /* &lt;-- To remember those are a possible values */
+property: initial;
+property: unset;
+</pre>
+
+<p><em>The second part of the is a simple translation of the what the formal syntax tells. It is aimed at medium-level users that will not understand well the formal syntax. </em></p>
+
+<h3 id="Values">Values</h3>
+
+<p><em>Each element of the formal syntax must be explained</em></p>
+
+<dl>
+ <dt><code>value_1</code></dt>
+ <dd>Is a keyword meaning...</dd>
+ <dt><code>value_2</code> {{Non-standard_Inline}} {{Experimental_Inline}}</dt>
+ <dd>Is a keyword meaning</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<p><em>The formal syntax must be taken from the spec and added to the <a href="https://github.com/mdn/data">MDN data repository</a>. It is an important tool to get precise syntax information for advanced users.</em></p>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p><em>Add this only if there is such an example. No dead link here.</em></p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css"><em>elementName {
+  property: value;
+  thisis: "example";
+  dream: 10000000mm;
+  love: "danger";
+}</em></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"><em>&lt;elementName&gt;foo bar&lt;/elementName&gt;</em></pre>
+
+<h3 id="Result">Result</h3>
+
+<p><em>{{EmbedLiveSample("Examples")}}</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p><em>Exclusively use this standard table. Place older spec on the bottom. Use the templates SpecName() for the name and Spec2() for the status. That way, when the spec progress on the standard track, or move, the table content will be automatically adapted.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>No change from CSS 2.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "#fake-link", "fake value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p><em>(See <a href="/Project:en/Compatibility_tables" title="Project:en/Compatibility_tables">Compatibility tables</a> for more information)</em></p>
+
+
+
+<p>{{Compat("css.property.<em>property-name</em>")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><em>Links of link of related properties: {{CSSxRef("example-property")}}</em></li>
+ <li><em>Links to article showing how to use the property in context: "Using … article"</em></li>
+ <li><em>Very good external links. Don't be afraid of external links, but they should be outstanding, and not only mention minor details.</em></li>
+</ul>