diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-10 08:37:18 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-10 08:37:18 -0500 |
commit | 65cc6eabd71b1bceccf6fd3d3d4970c2955f3784 (patch) | |
tree | 3d54e994e6b6ff762841fe4c3eb60e87130589a5 /files/ko/learn/css/building_blocks/선택자/index.html | |
parent | a065e04d529da1d847b5062a12c46d916408bf32 (diff) | |
download | translated-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.html | 28 |
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><h1></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><span></code> 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 <code><p></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>></code>) 를 사용하여 <code><article></code> 요소의 자식인 단락을 선택합니다:</p> -<pre class="brush: css">article > p { }</pre> +<pre class="brush: css notranslate">article > p { }</pre> <h2 id="다음_단계">다음 단계</h2> |