From 65cc6eabd71b1bceccf6fd3d3d4970c2955f3784 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 10 Dec 2020 08:37:18 -0500 Subject: dump 2020-12-10 --- .../index.html" | 28 +++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'files/ko/learn/css/building_blocks/선택자') diff --git "a/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" "b/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" index 7674063921..274653da91 100644 --- "a/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" +++ "b/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" @@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors

선택자란 무엇인가?

-

이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 선택자의 주제(subject) 로 지칭됩니다.

+

우리는 이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 선택자의 주제(subject) 로 지칭됩니다.

Some code with the h1 highlighted.

@@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors

동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 선택자 목록 으로 결합할 수 있습니다. 예를 들어, h1 에 대해 동일한 CSS 와 special class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.

-
h1 {
+
h1 {
   color: blue;
 }
 
@@ -44,13 +44,13 @@ translation_of: Learn/CSS/Building_blocks/Selectors
 
 
또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.

 
-
h1, .special {
+
h1, .special {
   color: blue;
 } 

 
 
공백은 쉼표 앞뒤에 유효합니다. 각 라인이 새 라인에 있으면 선택자를 더 읽기 쉽습니다.

 
-
h1,
+
h1,
 .special {
   color: blue;
 } 

@@ -63,7 +63,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors
 
 
다음 예에서는, 잘못된 class 선택자 규칙이 무시되고 h1 은 여전히 스타일이 지정됩니다.

 
-
h1 {
+
h1 {
   color: blue;
 }
 
@@ -73,7 +73,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors
 
 
그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 h1 또는 class 가 스타일 지정되지 않습니다.

 
-
h1, ..special {
+
h1, ..special {
   color: blue;
 } 

 
@@ -85,41 +85,41 @@ translation_of: Learn/CSS/Building_blocks/Selectors
 
 
이 그룹에는 <h1> 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.

 
-
h1 { }

+
h1 { }

 
 
또한 class 를 대상으로 하는 선택자가 포함됩니다:

 
-
.box { }

+
.box { }

 
 
또는 ID:

 
-
#unique { }

+
#unique { }

 
 
속성 선택자

 
 
이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를  선택하는 다른 방법을 제공합니다:

 
-
a[title] { }

+
a[title] { }

 
 
또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오:

 
-
a[href="https://example.com"] { }

+
a[href="https://example.com"] { }

 
 
Pseudo-classes 및 pseudo-elements

 
 
이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 :hover pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다:

 
-
a:hover { }

+
a:hover { }

 
 
또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, ::first-line 은 항상 <span> 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 <p>) 을 선택합니다.

 
-
p::first-line { }

+
p::first-line { }

 
 
결합자 (Combinators)

 
 
최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (>) 를 사용하여 <article> 요소의 자식인 단락을 선택합니다:

 
-
article > p { }

+
article > p { }

 
 
다음 단계

 
-- 
cgit v1.2.3-54-g00ecf