선택자의 첫 번째 장에서는 "단순" 선택자들에 대해 배워보겠습니다. 단순 선택자는 문서 내 하나 이상의 요소를 요소 유형, class, id를 통해 선택합니다.

유형 선택자(또는 요소 선택자)

유형 선택자는 선택자와 주어지는 HTML 요소 이름이 같으면 선택합니다. 같은 유형을 가진 모든 요소를 제일 간단하게 선택할 수 있는 방법입니다. 예제를 볼까요?

약간의 HTML과...

<p>무슨 색을 좋아하시나요?</p>
<div>저는 파랑을 좋아해요.</div>
<p>전 빨강이요!</p>

간단한 스타일 시트입니다.

/* 모든 p 요소는 빨강 */
p {
  color: red;
}

/* 모든 div 요소는 파랑 */
div {
  color: blue;
}

결과는 다음과 같습니다.

실습: 서로 다른 요소 선택하기

이번 실습에서는 CSS 규칙 하나의 선택자를 바꿔 서로 다른 요소에 스타일을 입히려고 합니다. 어떻게 수정해야 한 번에 여러 종류의 요소에 규칙 세트를 적용할 수 있을까요?

잘못 입력한 경우 초기화 버튼을 사용하여 언제든지 처음으로 돌아갈 수 있습니다. 정말 막혔다면 답안 보기 버튼을 사용해 가능한 답안 중 한 가지를 확인하세요.

클래스 선택자

클래스 선택자는 마침표(.)와 뒤따르는 클래스 이름으로 이루어집니다. 클래스 이름은 공백을 제외하고 HTML class 속성에 사용한 어떤 값입니다. 클래스 이름을 결정하는건 마음대로 하셔도 됩니다. 또한 문서 내 여러 요소에 같은 클래스 값을 부여할 수 있고, 한 개 요소에 여러 클래스 값를 공백으로 구분하여 부여할 수 있습니다.

예제 HTML입니다.

<ul>
  <li class="first done">HTML 문서 만들기</li>
  <li class="second done">CSS 스타일시트 만들기</li>
  <li class="third">서로 연결하기</li>
</ul>

CSS는,

/* "first" 클래스를 가지면 굵게 */
.first {
  font-weight: bold;
}

/* "done" 클래스를 가지면 취소선 */
.done {
  text-decoration: line-through;
}

결과는 다음과 같습니다.

실습: 여러 클래스 다루기

이번 실습에서는 여러개의 독립적인 효과들이 문단 요소에 적용될 수 있게 클래스 속성을 변경해보려고 합니다. base-box 클래스에 역할 클래스(editor-note 또는 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;
}

결과는 다음과 같습니다.

실습: ID로 승자에 색 입히기

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

잘못 입력한 경우 초기화 버튼을 사용하여 언제든지 처음으로 돌아갈 수 있습니다. 정말 막혔다면 답안 보기 버튼을 사용해 가능한 답안 중 한 가지를 확인하세요.

공통 선택자

공통 선택자(*)는 궁극의 조커 카드로, 페이지의 모든 요소를 선택합니다. 혼자서 쓰이는 경우는 드물고, 대개 다른 선택자와 조합해서 사용합니다. (결합자를 참고하세요) 

중요: 공통 선택자를 사용할 때에는 주의해야 합니다. 모든 요소에 적용되기 때문에, 큰 규모의 페이지에서는 인지할 수 있을 정도로 성능에 영향을 줄 수 있습니다. 즉, 웹 페이지가 생각보다 느리게 표시될 수 있습니다. 공통 선택자를 쓸만한 상황은 그렇게 많지 않습니다.

예제 HTML입니다.

<div>
  <p>컨테이너가 그냥 <strong>테두리</strong>나 아무튼 <strong>뭐라도</strong>
  가지고 있는게 좋지 않을까 했는데,
  이건 <strong>통제를 벗어나고</strong> 있잖아!</p>
</div>

CSS는,

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

결과는 다음과 같습니다.

다음으로

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

문서 태그 및 공헌자

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