CSS(Cascading Style Sheets) 101 시리즈의 이전 부분에서는 요소에 대한 여러 규칙을 처리하는 방법에 대해 논의했습니다. 이 기사에서는 또 다른 중요한 CSS 기능인 선택기에 대해 설명합니다. 선택기는 웹 페이지의 스타일을 지정하기 위해 페이지 내의 요소를 선택하는 데 사용할 수 있습니다.
선택기 유형
CSS 스타일에는 요소 선택을 구현하는 다양한 방법이 있습니다. 다양한 선택 방법에는 범용 선택기, 유형 선택기, 클래스 선택기, ID 선택기, 조상 선택기, 자손 선택기, 인접 형제 선택기 및 속성 선택기를 통한 선택이 포함됩니다.
여기서는 이러한 각 메서드를 개별적으로 살펴보겠습니다(다음 주에 논의할 인접 형제 및 특성 제외). 참고: CSS 선택기에 대한 브라우저 지원은 일관되지 않지만 온라인 지침을 사용하여 특정 선택기가 대상 브라우저에서 작동하는지 확인할 수 있습니다.
만능인
범용 선택기를 사용하면 페이지 전체에서 스타일을 사용할 수 있습니다. 기본적으로 스타일은 특정 요소, 클래스 등을 지정하지 않으므로 페이지의 모든 요소에 적용됩니다. 색상, 글꼴 등을 설정하는 데 유용합니다.
범용 선택기는 페이지의 모든 요소에 사용할 수 있지만 특정 선택기로 재정의될 수 있습니다. CSS 사양에는 별표(*)를 사용하여 범용 선택기를 나타낼 수 있다고 명시되어 있습니다. 목록 A에서는 범용 선택기를 사용하여 페이지의 배경 및 기본 글꼴을 설정하는 방법을 보여줍니다.
유형
요소의 스타일을 지정하는 가장 일반적인 방법 중 하나는 요소 유형을 이용하는 것입니다. 즉, 특정 요소에는 자체적으로 정의된 스타일이 있으며 이 스타일은 페이지에서의 요소 위치에 관계없이 해당 유형의 모든 요소에 사용될 수 있습니다. 목록 B의 예에서는 유형 선택기를 사용하여 페이지의 모든 세그먼트 요소에 스타일을 지정하는 방법을 보여줍니다.
이 유형의 선택기를 사용하면 리프 내의 모든 단락 요소(더 구체적인 선택기로 재정의되지 않는 한)에는 특정 여백과 빨간색 텍스트가 있습니다. 이제 페이지의 특정 요소 스타일 지정을 처리하는 고유한 CSS 클래스를 만들 수도 있습니다.
친절한
클래스 선택자는 스타일이 무엇을 다루는지 결정할 때 유형 선택자보다 더 많은 제어권을 제공합니다. 클래스 선택기로 정의된 스타일은 페이지에서의 요소 위치에 관계없이 class 속성이 있는 모든 요소에 적용될 수 있습니다. 스타일을 받는 요소를 효과적으로 제어할 수 있습니다. 목록 C의 예제에서는 클래스를 사용하여 페이지의 첫 번째 단락에만 서식을 지정하는 방법을 보여줍니다. 그래서 첫 번째 단락의 글꼴이 들쭉날쭉하고 다음 단락은 다릅니다.
클래스 선택자는 제목, p, h1 등과 같은 HTML 예약 요소를 사용할 수 없습니다. 공백으로 구분하여 동일한 요소에 대해 여러 클래스를 사용할 수도 있습니다. 목록 D는 특정 단락의 스타일을 지정하기 위해 여러 클래스를 사용하는 방법을 보여줍니다.
클래스 선택기와 유형 선택기를 결합하여 클래스가 할당된 특정 요소의 스타일을 지정할 수 있습니다. 이 시나리오에서는 스타일을 정의할 때 요소 이름에 공백으로 구분된 클래스 이름이 있습니다. 목록 E의 예에서는 특정 클래스 이름이 지정된 세그먼트 요소만 한 방향으로 스타일이 지정되고 동일한 클래스 이름을 가진 헤더는 다른 방식으로 스타일이 지정되는 기술을 보여줍니다. 요소의 ID 속성을 사용할 때 좀 더 자세히 다루겠습니다.