aboutsummaryrefslogtreecommitdiff
path: root/files/ko/learn/css/building_blocks/선택자/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-10 08:37:18 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-10 08:37:18 -0500
commit65cc6eabd71b1bceccf6fd3d3d4970c2955f3784 (patch)
tree3d54e994e6b6ff762841fe4c3eb60e87130589a5 /files/ko/learn/css/building_blocks/선택자/index.html
parenta065e04d529da1d847b5062a12c46d916408bf32 (diff)
downloadtranslated-content-65cc6eabd71b1bceccf6fd3d3d4970c2955f3784.tar.gz
translated-content-65cc6eabd71b1bceccf6fd3d3d4970c2955f3784.tar.bz2
translated-content-65cc6eabd71b1bceccf6fd3d3d4970c2955f3784.zip
dump 2020-12-10
Diffstat (limited to 'files/ko/learn/css/building_blocks/선택자/index.html')
-rw-r--r--files/ko/learn/css/building_blocks/선택자/index.html28
1 files changed, 14 insertions, 14 deletions
diff --git a/files/ko/learn/css/building_blocks/선택자/index.html b/files/ko/learn/css/building_blocks/선택자/index.html
index 7674063921..274653da91 100644
--- a/files/ko/learn/css/building_blocks/선택자/index.html
+++ b/files/ko/learn/css/building_blocks/선택자/index.html
@@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors
<h2 id="선택자란_무엇인가">선택자란 무엇인가?</h2>
-<p>이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 <em><strong>선택자의 주제(subject)</strong> </em>로 지칭됩니다.</p>
+<p>우리는 이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 <em><strong>선택자의 주제(subject)</strong> </em>로 지칭됩니다.</p>
<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
@@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors
<p>동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 <em><strong>선택자 목록</strong> </em>으로 결합할 수 있습니다. 예를 들어, <code>h1</code> 에 대해 동일한 CSS 와 <code>special</code> class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.</p>
-<pre class="brush: css"><code>h1 {
+<pre class="brush: css notranslate"><code>h1 {
color: blue;
}
@@ -44,13 +44,13 @@ translation_of: Learn/CSS/Building_blocks/Selectors
<p>또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.</p>
-<pre class="brush: css"><code>h1, .special {
+<pre class="brush: css notranslate"><code>h1, .special {
color: blue;
} </code></pre>
<p>공백은 쉼표 앞뒤에 유효합니다. 각 라인이 새 라인에 있으면 선택자를 더 읽기 쉽습니다.</p>
-<pre class="brush: css"><code>h1,
+<pre class="brush: css notranslate"><code>h1,
.special {
color: blue;
} </code></pre>
@@ -63,7 +63,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors
<p>다음 예에서는, 잘못된 class 선택자 규칙이 무시되고 <code>h1</code> 은 여전히 스타일이 지정됩니다.</p>
-<pre class="brush: css"><code>h1 {
+<pre class="brush: css notranslate"><code>h1 {
color: blue;
}
@@ -73,7 +73,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors
<p>그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 <code>h1</code> 또는 class 가 스타일 지정되지 않습니다.</p>
-<pre class="brush: css"><code>h1, ..special {
+<pre class="brush: css notranslate"><code>h1, ..special {
color: blue;
} </code></pre>
@@ -85,41 +85,41 @@ translation_of: Learn/CSS/Building_blocks/Selectors
<p>이 그룹에는 <code>&lt;h1&gt;</code> 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.</p>
-<pre class="brush: css">h1 { }</pre>
+<pre class="brush: css notranslate">h1 { }</pre>
<p>또한 class 를 대상으로 하는 선택자가 포함됩니다:</p>
-<pre class="brush: css">.box { }</pre>
+<pre class="brush: css notranslate">.box { }</pre>
<p>또는 ID:</p>
-<pre class="brush: css">#unique { }</pre>
+<pre class="brush: css notranslate">#unique { }</pre>
<h3 id="속성_선택자">속성 선택자</h3>
<p>이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를  선택하는 다른 방법을 제공합니다:</p>
-<pre class="brush: css">a[title] { }</pre>
+<pre class="brush: css notranslate">a[title] { }</pre>
<p>또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오:</p>
-<pre class="brush: css">a[href="https://example.com"] { }</pre>
+<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
<h3 id="Pseudo-classes_및_pseudo-elements">Pseudo-classes 및 pseudo-elements</h3>
<p>이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 <code>:hover</code> pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다:</p>
-<pre class="brush: css">a:hover { }</pre>
+<pre class="brush: css notranslate">a:hover { }</pre>
<p>또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, <code>::first-line</code> 은 항상 <code>&lt;span&gt;</code> 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 <code>&lt;p&gt;</code>) 을 선택합니다.</p>
-<pre class="brush: css">p::first-line { }</pre>
+<pre class="brush: css notranslate">p::first-line { }</pre>
<h3 id="결합자_Combinators">결합자 (Combinators)</h3>
<p>최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (<code>&gt;</code>) 를 사용하여 <code>&lt;article&gt;</code> 요소의 자식인 단락을 선택합니다:</p>
-<pre class="brush: css">article &gt; p { }</pre>
+<pre class="brush: css notranslate">article &gt; p { }</pre>
<h2 id="다음_단계">다음 단계</h2>