From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/reference/index.html | 190 +++++++++++++++++++++ .../web/css/reference/property_template/index.html | 131 ++++++++++++++ 2 files changed, 321 insertions(+) create mode 100644 files/ko/web/css/reference/index.html create mode 100644 files/ko/web/css/reference/property_template/index.html (limited to 'files/ko/web/css/reference') 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 +--- +
{{CSSRef}}
+ +

CSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다. 추가로 간단한 DOM-CSS / CSSOM 참조도 들어 있습니다.

+ +

기본 규칙 구문

+ +

스타일 규칙 구문

+ +
style-rule ::=
+    selectors-list {
+      properties-list
+    }
+
+ +

... where :

+ +
selectors-list ::=
+    selector[:pseudo-class] [::pseudo-element]
+    [, selectors-list]
+
+properties-list ::=
+    [property : value] [; properties-list]
+
+ +

아래 선택자, 의사 클래스, 의사 요소 목록을 참고하세요. 각 value의 구문은 지정한 property가 정의하는 자료형에 따라 다릅니다.

+ +

스타일 규칙 예제

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

CSS 선택자 구문을 설명하는 입문자 단계의 소개 부분은 이 자습서에서 찾아볼 수 있습니다. 규칙 정의에서 구문 오류가 하나라도 발생하면 규칙 전체가 유효하지 않다는 점을 명심하세요. 유효하지 않은 규칙은 브라우저가 무시합니다. CSS 규칙 정의는 모두 (ASCII) 텍스트에 기반하지만, DOM-CSS / CSSOM (규칙 관리 시스템)은 객체에 기반합니다.

+ +

@규칙 구문

+ +

@규칙 체계는 매우 다양하므로 필요한 구체적인 구문을 찾으려면 @규칙을 봐주세요.

+ +

키워드 색인

+ +
+

참고: 이 색인에 있는 속성 이름에는 CSS 표준 이름과 다른 JavaScript 이름이 들어가지 않습니다.

+
+ +
{{CSS_Ref}}
+ +

선택자

+ +

다음은 선택자 목록입니다. 선택자를 사용하면 DOM 요소의 다양한 기능에 기반한 조건을 통해 스타일을 입힐 수 있습니다.

+ +

기본 선택자

+ +

기본 선택자는 선택자의 기초를 이루며, 조합을 통해 더 복잡한 선택자를 생성합니다.

+ + + +

그룹 선택자

+ +
+
선택자 목록 A, B
+
A와 B 요소를 모두 선택합니다. 일치하는 여러가지 요소를 선택할 때 사용합니다.
+
+ +

결합자

+ +

결합자는 "A는 B의 자식", "A는 B와 인접 요소"처럼, 두 개 이상의 선택자끼리 관계를 형성합니다.

+ +
+
인접 형제 결합자 A + B
+
요소 A와 B가 같은 부모를 가지며 B가 A를 바로 뒤따라야 하도록 지정합니다.
+
일반 형제 결합자 A ~ B
+
요소 A와 B가 같은 부모를 가지며 B가 A를 뒤따라야 하도록 지정합니다. 그러나 B가 A의 바로 옆에 위치해야 할 필요는 없습니다.
+
자식 결합자 A > B
+
요소 B가 A의 바로 밑에 위치해야 하도록 지정합니다.
+
자손 결합자 A B
+
요소 B가 A의 밑에 위치해야 하도록 지정합니다. 그러나 B가 A의 바로 아래에 있을 필요는 없습니다.
+
열 결합자 A || B {{experimental_inline}}
+
요소 B가 표의 열 A 안에 위치해야 하도록 지정합니다. 여러 열에 걸친 요소는, 각각의 열 모두에 대해 안쪽에 위치한 것으로 간주합니다.
+
+ +

의사 클래스/요소

+ +
+
의사 클래스 :
+
요소의 특정 상태를 선택합니다.
+
의사 요소 ::
+
HTML이 포함하지 않은 객체를 나타냅니다.
+
+ +
+

같이 보기: Selectors Level 4 명세의 선택자 목록.

+
+ +

개념

+ +

구문과 의미

+ + + +

값

+ + + +

레이아웃

+ + + +

DOM-CSS / CSSOM

+ +

주요 객체 유형

+ + + +

중요 메서드

+ + + +

같이 보기

+ + + +

외부 링크

+ + 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 +--- +

{{MDNSidebar}}

+ +
+

This is a template page for CSS property. Please use this as a raw template when you create a new CSS property page.
+ Comment in italics are information about how to use part of the template

+
+ +

{{CSSRef}}

+ +

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.

+ +

{{Non-standard_Header}}

+ +

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.

+ +

{{SeeCompatTable}}

+ +

Description of the property. It must start by "The xyz 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.

+ +
+

Note: Placeholder for any special messages.

+
+ +

But don't add several notes. It should be really important, or be part of the description!

+ +

Syntax

+ +
/* Keyword values */
+property: value1;
+property: value2;
+
+/* <length> values */
+property: 12.8em;   /* A valid length */
+
+/* Global values */
+property: inherit;  /* <-- To remember those are a possible values */
+property: initial;
+property: unset;
+
+ +

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.

+ +

Values

+ +

Each element of the formal syntax must be explained

+ +
+
value_1
+
Is a keyword meaning...
+
value_2 {{Non-standard_Inline}} {{Experimental_Inline}}
+
Is a keyword meaning
+
+ +

Formal syntax

+ +

The formal syntax must be taken from the spec and added to the MDN data repository. It is an important tool to get precise syntax information for advanced users.

+ +
{{CSSSyntax}}
+ +

Examples

+ +

Add this only if there is such an example. No dead link here.

+ +

CSS

+ +
elementName {
+  property: value;
+  thisis: "example";
+  dream: 10000000mm;
+  love: "danger";
+}
+ +

HTML

+ +
<elementName>foo bar</elementName>
+ +

Result

+ +

{{EmbedLiveSample("Examples")}}

+ +

Specifications

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}{{Spec2("CSS3 Animations")}}No change from CSS 2.1
{{SpecName("CSS2.1", "#fake-link", "fake value")}}{{Spec2("CSS2.1")}}Initial definition
+ +

{{CSSInfo}}

+ +

Browser compatibility

+ +

(See Compatibility tables for more information)

+ + + +

{{Compat("css.property.property-name")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf