1 files changed, 190 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>