선택자 사용

개요

이 강좌에서는 CSS 선택자 — 스타일이 적용되는 요소를 선택하는 방법 – 자세히 말하면, 사용 가능한 선택자의 종류 및 선택자 유형에 따라 우선순위가 어떻게 다르게 적용되는지를 살펴본다.

정보: 선택자

CSS는 CSS 언어를 설명하는 자신의 용어가 있다. 이전 강좌에서, 스타일 시트 행을 이와 같이 만들었다:

CSS 용어에서, 이 전체 행은 규칙 이다. 이 규칙은 strong 으로 시작한다. 이것은 선택자 이다. DOM에서 규칙이 적용되는 요소를 선택한다.

  • 중괄호 안에 있는 부분이 선언 이다.
  • 키워드 color속성이고, red이다.
  • 속성-값 쌍 다음에 오는 세미 콜론은 같은 선언에 있는 다른 속성-값 쌍을 구분한다.

이 강좌는 태그 선택자로 strong 과 비슷한 선택자에 관한 것이다. 보통 요소 선택자로 언급되는 것을 볼 것이다. CSS 설명서에서는 이것을 type 선택자라고 한다.

태그 이름에 추가하여, 선택자에서 속성 값을 사용할 수 있다. 이것으로 규칙을 더 구체적으로 만들 수 있다. 두 속성이 CSS에서 특별한 자격을 가진다. 그것은 classid 이다.

class 선택자

요소를 명명된 class에 할당하기 위해 한 요소에 class 속성을 사용한다. class에 어떤 이름을 사용하는가는 당신의 몫이다. 한 문서에 있는 여러 개의 요소는 같은 class 값을 가질 수 있다.

스타일 시트에서,선택자에 사용할 때 class 이름 앞에 마침표 (period)를 입력한다.

ID selectors

요소에 ID를 할당하기 위해 요소에 id 속성을 사용한다. ID에 어떤 이름을 사용할 것인가는 당신 몫이다. ID 이름은 문서에서 고유해야 한다.

스타일 시트에서, 선택자에 사용할 때 ID 앞에 숫자 표시 (해시, #)를 입력한다.

class 및 ID 선택자 예제

이 HTML는 class 속성과 id 속성 두 개를 가지고 있다:

idprincipal 은 문서에서 고유해야 한다. 그러나 문서의 다른 태그는 같은 class 이름 key 를 가질 수 있다.

CSS 스타일 시트에서, 이 규칙은 class key 값을 가지고 있는 모든 요소의 색상을 초록색으로 만든다. (이것들은 html/elements/p 요소에 있는 모든 것은 아닐 것이다.)

이 규칙은 id principal 을 가진 한 요소의 글자를 굵게 표시한다:

한 요소에 규칙을 하나 이상 적용하고 같은 속성을 지정한다면, CSS는 더 구체적인 선택자를 가지는 규칙에 우선순위를 제공한다. 그리고 ID 선택자는class 선택자 보다 더 구체적이다. 차례로 이것은 태그 선택자 보다 더 구체적이다.

결합 선택자

또한 선택자를 결합할 수 있다. 더 구체적인 선택자를 만들 수 있다.

예를 들어, 선택자 .key 는 class key 이름을 가진 모든 요소를 선택한다. 선택자 p.key 는 class key 이름을 가지고 있는 html/elements/p 요소만 선택한다.

두 속성 classid 에만 제한되지 않는다. 대괄호를 사용하여 다른 속성을 지정할 수 있다. 예를 들어 선택자 [type='button'] button 값의 type 속성을 가지고 있는 모든 요소를 선택한다.

스타일 시트가 충돌하는 규칙을 가지고 있고 똑같이 구체적이라면, 스타일 시트에서 나중에 있는 규칙에 우선 순위를 제공한다.

충돌하는 규칙으로 문제가 있으면, 규칙 중의 하나를 더 구체적으로 만들어 우선 순위를 가지게 해서 해결한다. 그렇게 할 수 없다면 규칙 중의 하나가 우선 순위를 가지도록 스타일 시트의 마지막에 가깝게 이동한다.

가상 class 선택자

CSS pseudo-class 는 선택자에 추가되는 키워드이다. 이것은 선택되는 요소의 특별한 상태를 지정한다.예를 들면 :hover 는 선택자가 지정한 요소 위에 사용자가 마우스를 올려 놓을 때 스타일을 적용한다.


가상 클래스는 가상 요소와 함께 문서 트리의 내용과 관련된 요소 뿐만 아니라, 탐색기의 이력(예: visited), 내용의 상태 (예: form 요소에 :checked) 또는 마우스의 위치(예: :hover 이것은 마우스가 요소 위에 있는지 여부를 알려준다) 과 같은 외부 요인과 관련된 요소에도 스타일을 적용할 수 있게 한다. 모든 선택자 목록은 css/selectors 참조.

가상 클래스 목록

정보: 관계와 관련된 선택자

CSS는 요소 간의 관계에 기반한 요소를 선택할 방법이 있다. 이것을 사용하면 선택자를 더 구체적으로 만들 수 있다.

관계에 기반한 선택자
선택자 대상
A E 모든 E 요소는 A 요소의 후손 이다 (즉: 자식, 또는 자식의 자식, .)
A > E 모든 E 요소는 A 요소의 자식이다.
E:first-child 모든 E 요소는 부모의 첫 번째 자식이다.
B + E 모든 E 요소는 B 요소의 다음 형제 이다 (즉: 같은 부모의 다음 자식)

복잡한 관계를 표현하기 위해 이것들을 혼합할 수 있다.

관계에 기반한 선택자 예제

HTML 테이블이id 속성을 가지고 있지만, 행과 셀은 개개의 구분자를 가지고 있지 않다:

이 규칙은 각 행의 첫 번째 셀을 굵게 만든다. 이것은 문서에서 하나의 특정 테이블에만 영향을 미친다:

결과는 다음과 같다:

Prefix 0001 default

구체성 증가 (Increasing specificity)

일반적인 방법으로, 선택자를 더 구체적으로 만들면, 우선 순위가 높아진다.

이 기술을 사용하면, 당신 문서에서 그렇게 많은 태그에 class 또는 id 속성을 구체화할 필요가 없다. 대신 CSS가 그 일을 한다.

스피드가 중요한 곳의 대부분의 디자인에서, 요소간의 관계에 기반한 복잡한 규칙을 피함으로써 더 효율적인 스타일 시트를 만들 수 있다.

테이블에 관한 더 많은 예제는 CSS 참조 페이지에 있는 Tables 참조.

실습: class 및 ID 선택자 사용

  1. HTML 파일을 편집하고 복사 및 붙여 넣기 하여 단락을 복제한다. and duplicate the paragraph by copying and pasting it.

  2. 그리고 첫 번째 사본에 idclass 속성을 추가하고, 아래와 같이 두 번째 사본에 id 속성을 추가한다. 다른 방법으로는 전체 파일을 다시 복사 및 붙여 넣기 한다:

  3. 이제 CSS 파일을 편집한다. 전체 내용을 아래와 같이 바꾼다:

  4. 파일을 저장하고 결과를 확인하기 위해 브라우저 새로 고침을 실행한다:

usingclassandid result.jpg

순서에 영향을 주지 않는다는 것을 보여주기 위해 CSS 파일에서 줄을 재배치 할 수 있다. 클래스 선택자 .carrot.spinach 는 태그 선택자 strong 보다 우선 순위가 높다. ID 선택자 #first 는 클래스 및 태그 선택자 보다 우선 순위가 높다.

연습 문제

  • HTML 파일을 바꾸지 않고, CSS 파일에 하나의 규칙을 추가할 수 있다. 이 규칙은 첫 글자를 현재와 같은 색으로 남겨 두고, 두 번째 문단의 다른 모든 텍스트를 파란색으로 바꾼다.
  • 첫 번째 문단을 파란색으로 설정하기 위해, 규칙을 추가만(그 밖의 다른 것은 바꾸지 않고) 해서 바꾸어라.

실습: 가상 클래스 선택자 사용

  1. 다음 코드로 HTML 페이지를 만든다:

  2. 이제 CSS 파일을 편집한다. 전체 내용을 다음과 같이 바꾼다:

  3. 파일을 저장하고 결과를 확인하기 위해 브라우저에서 새로 고침을 실행한다 (효과를 확인하기 위해 다음 링크에 마우스를 올려 놓는다):

    pseudoclassselector result.jpg

    링크가 어두운 회색으로 변한다.

실습: 관계와 가상 클래스에 기반한 선택자 사용

관계와 가상 클래스에 기반한 선택자를 가지고 복잡한 캐스케이드 알고리즘을 만들 수 있다. 예를 들면, 이것은 순수 CSS 드롭 다운 메뉴(자바스크립트 를 사용하지 않고, CSS 만 사용)를 만들기 위해 사용되는 일반적인 기술이다. 이 규칙의 진수는 다음을 포함한다:

HTML 구조에 다음과 같이 적용된다:

참고 사항

관련된 글

선택자

답글 남기기