Simple selectors

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

첫번째 선택자 글에서는, "단순" 선택자들에 대해 배워봅시다. 요소 유형(혹은 Class나 Id)으로 문서 내 하나 이상의 요소와 바로 연결시키기 때문에 이렇게 불립니다.

유형 선택자 (aka. 요소 선택자)

이 선택자는 작성한 선택자명과 주어진 HTML 요소 이름이 맞으면 연결합니다. 주어진 유형의 모든 요소들에 연결시킬 수 있는 가장 간단한 방법입니다. 예제를 볼까요?:

HTML :

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

CSS :

/* All p elements are red */
p {
  color: red;
}

/* All div elements are blue */
div {
  color: blue;
}

결과 :

학습활동: 다른 요소들 선택하기

이번 학습활동에서는, 예제의 다른요소에 스타일된 CSS에 선택자를 바꾸는 것을 해보려고 합니다. 어떻게 수정해야 한 번에 여러 요소들에게 CSS가 적용될까요?

만약에 실수를 했다면,  리셋  버튼을 이용해서 언제든지 초기화 할 수 있습니다. 만약 정말 곤란한 상황이라면, 해답 보기  버튼을 눌러서 해답을 볼수 있습니다.

Class 선택자

Class 선택자는 점 '.'과 뒤따르는 Class 이름으로 이루어져 있습니다. Class명은 공백을 제외한 아무 값이나 HTML class 속성에 들어갑니다. Class명을 결정하는 것은 마음대로 하셔도 됩니다.  또한 문서 내 여러 요소에 같은 Class 값을 부여할 수 있고, 한 개 요소에 여러 Class 값를 공백으로 구분하여 부여할 수 있습니다. 간단한 예제 입니다 :

HTML:

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

CSS:

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

결과:

학습활동: 여러 Class 다루기

이번 학습활동에서는 여러개의 독립적인 효과들이 문단 요소 ('P')에 적용될 수 있게 Class 속성을 변경해보려고 합니다. base-box Class에 역할 Class (editor-note or warning)가 추가 적용되도록 해봅시다. 그리고 선택적으로 박스를 강하게 강조하고 싶다면 important 를 추가해 봅시다. 이런한 규칙 설정이 어떻게 CSS를 모듈형 시스템으로 만들 수 있는지를 생각해 보세요.

만약에 실수를 했다면,  리셋  버튼을 이용해서 언제든지 초기화 할 수 있습니다. 만약 정말 곤란한 상황이라면, 해답 보기  버튼을 눌러서 해답을 볼수 있습니다.

ID 선택자

ID 선택자는 해쉬(#)와 뒤따르는 ID 이름으로 이루어져 있습니다. 어떠한 요소든 유니크한 ID 이름을 id 속성에 지정할 수 있습니다. ID 이름은 마음대로 정할 수 있습니다. 단일 요소를 선택하는데에 가장 유용한 방법입니다.

중요: ID명은 반드시 문서내에서 유일한 것이여야 합니다. ID가 중복이 되면 어떤식으로 작동될지 예측 불가능합니다. 예를들어 어떤 브라우저에서는 첫번째 선언된 ID만 계산되고 나머지는 무시됩니다.

예제를 봅시다

HTML:

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

CSS:

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

결과:

학습활동: winner에게 ID로 컬러값 주기

이번 학습활동에서는 대회의 우승자, 2등, 3등에게 각각 알맞는 금색, 은색, 브론즈색을 ID를 이용하여 2-4개의 적절한 선택자로 CSS를 선택, 적용해보려고 합니다. 

만약에 실수를 했다면,  리셋  버튼을 이용해서 언제든지 초기화 할 수 있습니다. 만약 정말 곤란한 상황이라면, 해답 보기  버튼을 눌러서 해답을 볼수 있습니다.

공통 선택자

공통 선택자(*)는 궁극의 조커카드입니다. 이것은 페이지의 모든 요소들을 선택합니다. 페이지에서 모든 요소에 스타일을 적용해야할 때, 드물게 유용합니다. 이것은 종종 다른 선택자들과 함께 사용되기도 합니다. (see Combinators below.)

중요: 공통 선택자를 사용할 때에는 주의해주세요. 모든 요소에 적용되기 때문에, 큰 규모의 페이지에서는 인지할 수 있을 정도로 성능에 영향이 갈 수 있습니다 : 웹 페이지는 생각보다 느리게 표시될 수 있으며, 원치 않던 여러 인스턴스들에 해당 선택자가 적용 됩니다.

HTML:

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

CSS:

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

결과:

다음에는

첫 번째 선택자 튜토리얼의 끝까지 잘 오셨습니다. 선택자를 처음 다뤄보신 것이 재미있으셨으면 좋겠습니다. 지금까지 앞으로 많이 사용하실 단순 선택자들을 살펴봤습니다. 다음에는 속성 선택자부터 해서 더 많은 고급기능들을 살펴보도록 합시다.

문서 태그 및 공헌자

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