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 ++++++++++++++++++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 files/ko/web/css/reference/index.html (limited to 'files/ko/web/css/reference/index.html') 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

+ +

주요 객체 유형

+ + + +

중요 메서드

+ + + +

같이 보기

+ + + +

외부 링크

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