본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

CSS 선택자 1

최초 작성일
최종 수정일
이번 시간에는...
HTML 문서에 스타일을 주기위한 기초적인 CSS 선택자 종류인, 요소 선택자, id 또는 class 선택자, 선택자 묶음 그리고 후손 선택자에 대해 살펴 봅니다. 또한 선택자 중복 시 우선 순위가 어떻게 되는지 살펴 봅니다.

HTML 문서에 CSS로 스타일을 주기 위해서는 '선택자'를 통해서 해당 요소를 선택한 뒤에, 해당하는 스타일을 줘야 합니다. 처음 CSS 맛보기 시간에 잠깐 소개하긴 했지만, 이번 시간에 좀 더 기본적인 선택자에 대해 살펴보겠습니다.

'기본적인' 선택자이긴 하지만, 오늘 살펴보는 선택자 만으로도 웹 페이지를 꾸미는데 충분할 정도로 많이 쓰는 선택자들입니다.

기본적인 선택자들

요소 선택자

h1, img, p, div 등등 요소 명을 적어서 나타내는 선택자입니다. 만약 선택자를 'p'라고 한다면, 페이지 전체 p 요소에 스타일이 적용됩니다.

다음과 같이 사용합니다.

ID 선택자

id 속성을 가진 요소를 선택하는 선택자입니다. id 이름 앞에 '#'을 붙여서 표현합니다. 만약 해당 요소의 id 속성 값이 'abc'라면 '#abc'로 표현합니다.

Class 선택자

class 속성을 가진 요소를 선택하는 선택자입니다. class 이름 앞에 '.'을 붙여서 표현합니다. 만약 해당 요소의 class 속성 값이 'abc'라면 '.abc'로 표현합니다.

선택자의 중첩 사용

요소 선택자와 id, class 선택자는 중첩돼서 사용 가능합니다.

만약 HTML 문서에 'box'라는 class 속성을 가진 요소들 중에서 p 요소에 만 스타일을 주고 싶다면, 다음과 같이 붙여 쓸 수 있습니다.

요소 이름과 클래스 이름이 띄어쓰기 없이 붙여 쓴 것에 주의하시기 바랍니다.

이는 id 선택자 역시 마찬가지 입니다. 만약 'box'란 이름의 id 속성을 가진 p 요소에만 스타일을 주고 싶다면, 'p#box'로 작성하시면 됩니다. 다만, id 속성은 페이지 내에 단 한번만 선언되기 때문에, 이와 같은 선택자를 쓸 일은 많지 않을 것입니다.

선택자 묶음

만약 h1와 div, p 요소 모두에 빨간 글자 색을 주고 싶다고 한다면, 다음과 같이 작성해야 할 것입니다.

정말 소모적인 방법입니다.

다행히도 쉼표(,)를 이용하면 묶어서 한 번에 스타일을 줄 수 있습니다. 다음과 같이 작성합니다.

이는 class 선택자나 id 선택자 모두 사용 가능합니다.

후손 선택자

앞서 살펴본 선택자들은 단일한 선택자들입니다. 하지만, 여러분이 웹 페이지를 만들다 보면 무수히 중첩된 요소들에 스타일을 주는 데는 앞선 선택자들 만으로는 부족합니다. 만약 다음과 같이 마크 업이 되어있다고 가정합니다.

위의 마크 업에서 클래스 명이 box2 인 div요소 (앞으로 이런 요소는 div.box2 라는 식으로 표현하겠습니다.) 안에 class속성값 name인 요소를 선택하고 싶다면 어떻게 해야 할까요?

이럴 때 필요한 것이 관계를 나타내는 선택자입니다. 그리고 그 중 지금 다룰 후손 선택자는 관계를 나타내는 선택자 중 가장 기본이 되는 선택자입니다. 다음과 같이 작성합니다.

다음과 같이 띄어쓰기로 표현을 합니다. .box2 요소 안에 있는 .name 요소를 선택하라는 뜻 입니다. 이는 요소 선택자나 id 선택자 모두 동일하며, 더 많은 단계를 나타낼 수 도 있습니다.

또한 이런 관계 선택자 역시 쉼표(,)로 묶을 수 있습니다.

기본적인 우선 순위와 중복 사용

만약 css에서 다음과 같이 스타일을 준다면, 웹 페이지에서 어떻게 보여질 까요?

같은 .box1 선택자에 글자 색상을 위에는 빨강을, 아래에는 파랑을 주었습니다. 이럴 경우, 글자는 파란 색상으로 표현됩니다. 이렇게, 선택자에는 우선 순위가 있습니다.

기본적인 우선 순위의 기준은 일단 같은 단계의 선택자 중에서는 나중에 선언된 스타일을 우선합니다.

그리고 후손 선택자라면, 더 많은 단계로 표현된 선택자가 우선시 됩니다.

이와 같은 경우 위의 선택자가 더 많은 단계로 표현되었기 때문에 글씨가 빨간 색으로 표현됩니다.

그리고 id 선택자는 다른 class 선택자나, 요소 선택자 보다 우선순위가 높습니다.

위의 경우에도 id 선택자가 더 우선 순위가 높으므로, div#side-box 요소는 빨간 글씨로 나타납니다.

일단 선택자들의 우선 순위는 나머지 선택자들을 좀 더 다루고 알아볼 계획이기 때문에, 이 정도만 간단히 살펴 보겠습니다. 방금 살펴본 세 가지만 일단 기억하셔도, 웬만한 선택자 사용에 큰 혼란은 없으실 것 입니다.

  • 같은 순위의 선택자일 경우, 후에 나온 스타일을 우선한다.
  • 더 많은 단계를 나타낸 후손 선택자가 적은 단계보다 우선한다.
  • 다른 단일 선택자들 보다 아이디 선택자가 우선한다.

그리고 후에 나온 선택자가 준 스타일이 겹치지 않는다면, 그 스타일이 없어지지 않습니다.

위와 같이 CSS를 작성했다면, 'div p' 선택자는 글자색만을 담고 있기 때문에, 'p'의 글자 색만을 덮어씌웁니다. 때문에 'div p'요소는 글씨 색상은 파란색이면서, 글씨 크기는 12px을 가지게 됩니다. 'div p'에게 적용되는 스타일을 다음과 같이 표현할 수 있습니다.

font-size: 12px;
color: red;
color: blue;

여기까지 기본적인 선택자에 대해서 알아 보았습니다. 더 많은 선택자는 나중에 'CSS 중급'에서 더 다룰 계획이고요, 일단 다음 강의부터 본격적인 스타일 속성들을 다루도록 하겠습니다.

요점 정리
  • 요소 선택자 - 'p'와 같은 기본적인 태그를 선택.
  • id 선택자 - '#id'로 표현, 해당 아이디를 가진 요소를 선택.
  • class 선택자 - '.class'로 표현, 해당 클래스를 가진 요소들을 선택.
  • 선택자 중첩 - 'p.class' 처럼 띄어쓰기 없이 선택자를 붙여쓰면 중첩된 선택자에 모두 해당되는 요소들만 선택.
  • 선택자 묶음 - 'a, img' 처럼 콤마(,)를 이용하여 여러 선택자들을 묶어서 선택
  • 후손 선택자 - 'p a' 처럼 띄어쓰기를 통해 상속 관계를 명시하여 선택
  • 같은 단계의 선택자가 중복이 될 경우, 아래쪽에 입력된 선택자를 우선
  • 더 많은 단계를 가진 후손 선택자가 우선
  • 다른 단일 선택자보다 id 선택자가 우선

이 글이 유용하셨다면 친구들에게 공유 해주세요.