CSS 선택자 그룹화

선택자 그룹화

h2 요소와 문단이 모두 회색이 되기를 원한다면, 이 목표를 달성하기 위해 가장 쉬운 방법은 다음과 같은 선언을 사용하는 것입니다:

h2, p {color:gray;}

h2과 p 선택자를 규칙 왼쪽에 두고, 그런 다음 콤마로 구분하면 규칙을 정의할 수 있습니다. 그 오른쪽의 스타일(color:gray;)은 이 두 선택자가 참조하는 요소에 적용됩니다. 콤마는 브라우저에게 규칙에 두 가지 다른 선택자가 포함되었다고 알립니다. 이 콤마가 없다면 규칙의 의미는 완전히 다릅니다. 후대 선택자를 참조하세요.

다른 제한 없이 여러 개의 선택자를 그룹화할 수 있습니다。

예를 들어, 많은 요소를 회색으로 표시하려면 다음과 같은 규칙을 사용할 수 있습니다：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

푸시:그룹화를 통해, 창작자는 특정 유형의 스타일을 '압축'할 수 있으며, 이렇게 하면 더 간결한 스타일 시트를 얻을 수 있습니다。

다음 두 그룹 규칙은 동일한 결과를 얻을 수 있지만, 쓰기가 더 쉬운 것을 명확히 볼 수 있습니다：

/* 그룹화 없음 */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* 그룹화 */
h1, h2, h3, h4, h5, h6 {color:blue;}

직접 시도해 보세요

그룹은 흥미로운 선택을 제공합니다. 예를 들어, 다음 예제에서 모든 규칙 그룹은 동일하며, 각 그룹은 선택자 그룹화와 선언 그룹화의 다른 방법을 보여줍니다：

/* 그룹 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* 그룹 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* 그룹 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

직접 시험해 보세요：

주의하십시오, 그룹 3에서 '선언 그룹화'가 사용되었습니다. 나중에 '선언 그룹화'에 대해 설명하겠습니다.

스플래시 선택자

CSS2는 새로운 간단한 선택자 - 스플래시 선택자(universal selector)를 도입했습니다. 이 선택자는 별표(*)로 표시되며, 어떤 요소와도 일치할 수 있습니다. 이는 스플래시 기호와 같습니다.

예를 들어, 다음 규칙은 문서 중 모든 요소를 빨간색으로 만들 수 있습니다:

* {color:red;}

직접 시도해 보세요

이 선언은 문서 중 모든 요소의 그룹 선택자로 동일합니다. 스플래시 선택자를 사용하면(하나의 별표) 문서 중 모든 요소의 color 속성 값을 red로 지정할 수 있습니다.

선언 그룹화

우리는 선택자를 그룹화할 수도 있고, 선언을 그룹화할 수도 있습니다.

h1 요소가 모두 빨간 배경을 가지고 28픽셀 높이의 Verdana 글꼴로 파란 텍스트로 표시되기를 원한다면, 다음과 같은 스타일을 작성할 수 있습니다:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

그러나 위의 방법의 효율성은 높지 않습니다. 특히 여러 스타일을 가진 요소에 대해 이러한 목록을 생성하는 것이 어려울 때 더욱 그렇습니다. 대신, 우리는 선언을 그룹화할 수 있습니다:

h1 {font: 28px Verdana; color: white; background: black;}

이는 위의 3 행 스타일 시트의 효과와 완전히 동일합니다.

주의하십시오, 선언을 그룹화할 때는 각 선언의 마지막에 분号을 사용해야 합니다. 이는 매우 중요합니다. 브라우저는 스타일 시트에서의 공백 문자를 무시합니다. 분号을 추가하면 다음과 같은 형식으로 스타일을 무료로 설정할 수 있습니다:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

직접 시도해 보세요

그렇다면, 위의 작성 방식의 가독성이 더 높아지지 않았나요.

하지만, 두 번째 분号을 무시하면 사용자代理는 다음과 같이 스타일 시트를 해석합니다:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

직접 시도해 보세요

because background 은 color에 대해 유효한 값이 아니며, color에 대해 단일 키워드만 지정할 수 있기 때문에, 사용자代理는 이 color 선언(또한 background: black 부분을 포함하여)을 완전히 무시합니다. 이렇게 하면 h1 제목은 파란색으로만 표시되며, 빨간 배경이 없습니다. 그러나 파란색의 h1를 얻지 못하는 것이 더 가능성이 큽니다. 대신, 이러한 제목은 기본 색상(보통 검은색)으로만 표시되며, 배경색이 없습니다. font: 28px Verdana 선언은 분号으로 올바르게 끝나기 때문에 정상적으로 작동합니다.

선택자 그룹화와 마찬가지로, 선언 그룹화도 스타일 시트를 단축하고 명확하게 하며 유지보수가 더 쉬운便利한 방법입니다.

푸시:규칙의 마지막 선언 뒤에도 분号을 추가하는 것이 좋은 습관입니다. 다른 선언을 추가할 때 분号을 추가하는 것을 잊지 않도록 합니다.

선택자와 선언의 그룹화

선택자 그룹화와 선언 그룹화를 하나의 규칙에서 결합하면 많은 문장을 사용하지 않고 상대적으로 복잡한 스타일을 정의할 수 있습니다.

모든 제목에 복잡한 스타일을 지정하는 규칙이 다음과 같습니다:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

직접 시도해 보세요

이 규칙은 모든 제목의 스타일을 흰 배경의 회색 텍스트로 정의하며, 10픽셀의 내간격을 가지고 있으며, 1픽셀의 실 heart 테두리를 가지고 있으며, 텍스트 글꼴은 Verdana입니다.