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/css_selectors/index.html | 133 ++++++++++++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 files/ko/web/css/css_selectors/index.html (limited to 'files/ko/web/css/css_selectors/index.html') diff --git a/files/ko/web/css/css_selectors/index.html b/files/ko/web/css/css_selectors/index.html new file mode 100644 index 0000000000..eb5af87d66 --- /dev/null +++ b/files/ko/web/css/css_selectors/index.html @@ -0,0 +1,133 @@ +--- +title: CSS 선택자 +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - Guide + - Overview + - Reference + - Selectors + - 선택자 +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef("Selectors")}}
+ +

CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.

+ +
+

참고: 부모, 부모의 형제, 부모 형제의 자식을 선택할 수 있는 선택자는 존재하지 않습니다.

+
+ +

기본 선택자

+ +
+
전체 선택자
+
모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.
+ 구문: * ns|* *|*
+ 예제: *은 문서 내의 모든 요소와 일치합니다.
+
유형 선택자
+
주어진 노드 이름을 가진 모든 요소를 선택합니다.
+ 구문: elementname
+ 예제: input은 모든 {{HTMLElement("input")}} 요소와 일치합니다.
+
클래스 선택자
+
주어진 class 특성을 가진 모든 요소를 선택합니다.
+ 구문: .classname
+ 예제: .index는 "index" 클래스를 가진 모든 요소와 일치합니다.
+
ID 선택자
+
id 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.
+ 구문: #idname
+ 예제: #toc는 "toc" ID를 가진 요소와 일치합니다.
+
특성 선택자
+
주어진 특성을 가진 모든 요소를 선택합니다.
+ 구문: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ 예제: [autoplay]는 autoplay 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.
+
+ +

그룹 선택자

+ +
+
선택자 목록
+
,는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다.
+ 구문: A, B
+ 예제: div, span은 모든 {{HTMLElement("span")}}과 {{HTMLElement("div")}} 요소와 일치합니다.
+
+ +

결합자

+ +
+
자손 결합자
+
  (공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다.
+ 구문: A B
+ 예제: div span은 {{HTMLElement("div")}} 요소 안에 위치하는 모든 {{HTMLElement("span")}} 요소와 일치합니다.
+
자식 결합자
+
> 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.
+ 구문: A > B
+ 예제: ul > li는 {{HTMLElement("ul")}} 요소 바로 아래에 위치하는 모든 {{HTMLElement("li")}} 요소와 일치합니다.
+
일반 형제 결합자
+
~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
+ 구문: A ~ B
+ 예제: p ~ span은 {{HTMLElement("p")}} 요소를 뒤따르는 모든 {{HTMLElement("span")}} 요소와 일치합니다.
+
인접 형제 결합자
+
+ 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
+ 구문: A + B
+ 예제: h2 + p는 {{HTMLElement("h2")}} 바로 뒤에 위치하는 {{HTMLElement("p")}} 요소와 일치합니다.
+
열 결합자 {{Experimental_Inline}}
+
|| 결합자는 같은 열에 속하는 노드를 선택합니다.
+ 구문: A || B
+ 예제: col || td는 {{HTMLElement("col")}}의 범위에 속하는 모든 {{HTMLElement("td")}} 요소와 일치합니다.
+
+ +

의사 클래스/요소

+ +
+
의사 클래스
+
의사 :은 문서 트리가 포함하지 않는 상태 정보에 기반해 요소를 선택할 수 있습니다.
+ 예제: a:visited는 사용자가 방문한 모든 {{HTMLElement("a")}} 요소와 일치합니다.
+
의사 요소
+
의사 ::는 HTML이 포함하지 않는 개체를 선택합니다.
+ 예제: p::first-line은 모든 {{HTMLElement("p")}} 요소의 첫 번째 줄과 일치합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Added the ~ general sibling combinator and tree-structural pseudo-classes.
+ Made pseudo-elements use a :: double-colon prefix. Additional attribute selectors
{{SpecName("CSS2.1", "selector.html")}}{{Spec2("CSS2.1")}}Added the > child and + adjacent sibling combinators.
+ Added the universal and attribute selectors.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
+ +

의사 클래스와 의사 요소의 명세 표에서 각각의 상세 정보를 볼 수 있습니다.

+ +

같이 보기

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