MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

CSS 에서, 선택자는 스타일을 적용하려는 웹 페이지의 HTML 요소를 대상으로 사용됩니다. 다양한 CSS의 선택자들을 사용할 수 있기 때문에, 당신이 각 요소에 대해 스타일을 선택할때 세밀하게 지정해 줄 수 있습니다. 다음 몇개의 문서에서 우리는 몇개의 요소들을 아주 자세히 살펴보고, 그 요소가 어떻게 작동하는지 살펴볼 것입니다.

전재조건: 기본적인 컴퓨터 지식, 기본적인 프로그램 설치 방법, 파일작업에 대한 기본적 지식, HTML 기본 ('HTML에 대해 소개합니다'로 공부하세요), 그리고 How CSS works에 대한 아이디어.
목적: CSS 선택자가 어떻게 동작하는지 자세히 배우기.


지난 글에서 CSS 문법과 전문용어에 대해 자세히 설명했습니다. 정리하자면, 선택자는 CSS 규칙의 일종이며 CSS 선언부 블럭 바로 앞에 위치합니다.

선택자의 다양한 유형

선택자는 다음으로 분류될 수 있습니다.

  • 간단한 선택자: element type, class 또는 id으로 하나이상의 요소를 일치시킵니다.
  • 속성 선택자: 속성이나 속성값으로 하나 이상의 요소를 일치시킵니다.
  • 가상 선택자: Match one or more elements that exist in a certain state, such as an element that is being hovered over by the mouse pointer, or a checkbox that is currently disabled or checked, or an element that is the first child of its parent in the DOM tree.
  • 가짜 요소: Match one or more parts of content that are in a certain position in relation to an element, for example the first word of each paragraph, or generated content appearing just before an element.
  • 결합: These are not exactly selectors themselves, but ways of combining two or more selectors in useful ways for very specific selections. So for example, you could select only paragraphs that are direct descendants of divs, or paragraphs that come directly after headings.
  • 다중 선택자: Again, these are not separate selectors; the idea is that you can put multiple selectors on the same CSS rule, separated by commas, to apply a single set of declarations to all the elements selected by those selectors.

선택자 개요

The next four articles all explore different aspects of selectors — we've broken this information up because there is a lot of it, and we wanted to make it less intimidating and give you some clear points to take breaks mid-learning. The articles are as follows:

You are strongly advised to tackle simple selectors first, in case you miss any pertinent information.

문서 태그 및 공헌자

 이 페이지의 공헌자: beingboring, CodeRi13
 최종 변경: beingboring,