path: root/files/ko/learn/css/building_blocks/selectors/index.html

---
title: CSS 선택자
slug: Learn/CSS/Building_blocks/선택자
translation_of: Learn/CSS/Building_blocks/Selectors
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>

<p class="summary">{{Glossary("CSS")}} 에서, 선택자는 스타일을 지정할 웹 페이지의 {{glossary("HTML")}} 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 기사와 하위 기사에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴보겠습니다.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">전제조건:</th>
   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 CSS 작동 방식에 대한 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 단계</a> 학습)</td>
  </tr>
  <tr>
   <th scope="row">목적:</th>
   <td>CSS 선태자 작동 방식에 대해 자세히 알아보기.</td>
  </tr>
 </tbody>
</table>

<h2 id="선택자란_무엇인가">선택자란 무엇인가?</h2>

<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>

<p>이전 기사에서는 몇 가지 다른 선택자를 만났으며 — 예를 들어 <code>h1</code> 과 같은 요소 또는 <code>.special</code> 과 같은 class 를 선택하는 등 다양한 방법으로 문서를 대상으로 하는 선택자가 있다는 것을 배웠습니다.</p>

<p>CSS 에서, 선택자는 CSS 선택자 사양에 정의되어 있습니다. CSS 의 다른 부분과 마찬가지로 작동하려면, 브라우저에서 지원해야합니다. 당신이 보게 될 대부분의 선택자는 <a href="https://www.w3.org/TR/selectors-3/">Level 3 선택자 사양</a> 에 정의되어 있으므로, 이러한 선택자에 대한 훌륭한 브라우저 지원을 찾을 수 있습니다.</p>

<h2 id="선택자_목록">선택자 목록</h2>

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

<pre class="brush: css notranslate"><code>h1 {
  color: blue;
}

.special {
  color: blue;
} </code></pre>

<p>또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.</p>

<pre class="brush: css notranslate"><code>h1, .special {
  color: blue;
} </code></pre>

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

<pre class="brush: css notranslate"><code>h1,
.special {
  color: blue;
} </code></pre>

<p>아래 라이브 예제에서 동일한 선언을 가진 두 선택자를 결합 하십시오. 시각적 디스플레이는 결합 후 동일해야 합니다.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>

<p>이러한 방식으로 선택자를 그룹화할 때, 선택자가 유효하지 않은 경우 전체 규칙이 무시됩니다.</p>

<p>다음 예에서는, 잘못된 class 선택자 규칙이 무시되고 <code>h1</code> 은 여전히 스타일이 지정됩니다.</p>

<pre class="brush: css notranslate"><code>h1 {
  color: blue;
}

..special {
  color: blue;
} </code></pre>

<p>그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 <code>h1</code> 또는 class 가 스타일 지정되지 않습니다.</p>

<pre class="brush: css notranslate"><code>h1, ..special {
  color: blue;
} </code></pre>

<h2 id="선택자의_유형">선택자의 유형</h2>

<p>선택자에는 몇 가지 그룹이 있으며, 어떤 유형의 선택자가 필요한지 알면 작업에 적합한 도구를 찾는데 도움이 됩니다. 이 기사의 하위 기사에서는 다양한 선택자 그룹을 자세히 살펴 보겠습니다.</p>

<h3 id="Type_class_및_ID_선택자">Type, class 및 ID 선택자</h3>

<p>이 그룹에는 <code>&lt;h1&gt;</code> 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.</p>

<pre class="brush: css notranslate">h1 { }</pre>

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

<pre class="brush: css notranslate">.box { }</pre>

<p>또는 ID:</p>

<pre class="brush: css notranslate">#unique { }</pre>

<h3 id="속성_선택자">속성 선택자</h3>

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

<pre class="brush: css notranslate">a[title] { }</pre>

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

<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 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 notranslate">p::first-line { }</pre>

<h3 id="결합자_Combinators">결합자 (Combinators)</h3>

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

<pre class="brush: css notranslate">article &gt; p { }</pre>

<h2 id="다음_단계">다음 단계</h2>

<p>이 학습 섹션 또는 일반적으로 MDN 에서 다양한 유형의 선택자로 직접 연결되는 링크에 대해서는 아래의 선택자 참조 표를 참고하거나 <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">type, class 및 ID 선택자</a> 에 대해 계속해서 여행을 시작하십시오.</p>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>

<h2 id="선택자_참조_표">선택자 참조 표</h2>

<p>아래 표는 사용 가능한 선택자의 개요와 이 안내서의 페이지에 대한 링크와 함께 각 유형의 선택자 사용법을 보여줍니다. 브라우저 지원 정보를 확인할 수 있는 각 선택자의 MDN 페이지에 대한 링크도 포함되어 있습니다. 이 자료를 나중에 자료에서 선택자를 찾아 보거나, CSS 를 일반적으로 실험할 때 다시 참조할 수 있습니다.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">선택자</th>
   <th scope="col">예제</th>
   <th scope="col">CSS 자습서 배우기</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Type_selectors">Type 선택자</a></td>
   <td><code>h1 {  }</code></td>
   <td><a href="/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Type_selectors">Type selectors</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Universal_selectors">범용 선택자</a></td>
   <td><code>* {  }</code></td>
   <td><a href="/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Class_selectors">Class 선택자</a></td>
   <td><code>.box {  }</code></td>
   <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/ID_selectors">id 선택자</a></td>
   <td><code>#unique { }</code></td>
   <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">속성 선택자</a></td>
   <td><code>a[title] {  }</code></td>
   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">Attribute selectors</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class 선택자</a></td>
   <td><code>p:first-child { }</code></td>
   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element 선택자</a></td>
   <td><code>p::first-line { }</code></td>
   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">하위 결합자</a></td>
   <td><code>article p</code></td>
   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Child_combinator">자식 결합자</a></td>
   <td><code>article &gt; p</code></td>
   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">Child combinator</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">인접 형제 결합자</a></td>
   <td><code>h1 + p</code></td>
   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a></td>
   <td><code>h1 ~ p</code></td>
   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">General sibling</a></td>
  </tr>
 </tbody>
</table>

<h2 id="이번_강의에서는">이번 강의에서는</h2>

<ol>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
  <ul>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
  </ul>
 </li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값과 단위</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
</ol>