Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS 선택자 완벽 가이드: 기본 개념부터 실전 활용까지

CSS 선택자(selector)는 스타일을 적용할 HTML 요소를 지정하는 역할을 합니다. 가장 기본적인 선택자는 요소 이름으로 대상을 찾는 요소 선택자이며, 그 외에도 id 선택자, 클래스 선택자, 전체 선택자, 하위 선택자 등 다양한 종류가 있습니다.

선택자는 모든 CSS 문장을 구성하는 두 요소 중 하나입니다. 선택자를 사용하면 HTML 페이지에서 특정 스타일을 적용할 요소를 정확하게 지정할 수 있습니다.

CSS는 웹 페이지의 요소를 정밀하게 타겟팅할 수 있는 폭넓은 선택자를 제공합니다. 이를 잘 활용하면 디자인 작업에서 높은 수준의 커스터마이징이 가능해집니다.

이 가이드에서는 CSS 선택자의 기본 개념과 함께, 실무에서 가장 많이 사용되는 선택자들을 코드에 적용하는 방법을 살펴보겠습니다.

CSS 선택자란 무엇인가?

CSS 선택자는 스타일을 적용하고 싶은 HTML 요소를 식별하는 도구입니다. 요소의 이름, ID, 클래스, 그 밖의 속성을 기준으로 요소를 선택할 수 있으며, CSS 규칙(rule)에서 중괄호 { } 앞에 위치합니다.

CSS에서 규칙은 하나의 요소 또는 여러 요소에 적용할 스타일을 정의합니다. 규칙은 두 가지 구성 요소로 이루어집니다.

  • 선택자(Selector): 어떤 요소에 스타일을 적용할지 지정
  • 선언(Declaration): 해당 요소에 적용될 실제 스타일 내용

다음은 CSS 규칙의 간단한 예시입니다.

h1 {
	color: pink;
}

이 CSS 규칙은 웹 페이지의 모든 h1 요소 색상을 분홍색으로 지정합니다. 이 규칙의 두 구성 요소는 다음과 같습니다.

  • h1: 스타일이 적용될 대상 요소로, '선택자'라고 부릅니다.
  • color: pink;: 선택된 요소에 적용되는 스타일로, '선언'이라고 부릅니다. 이 예제에서는 모든 h1 요소의 글자색을 분홍색으로 변경합니다.

CSS 선택자는 웹 스타일링의 근간을 이루는 핵심 요소입니다. 선택자를 통해 브라우저에게 "어떤 요소에 어떤 스타일을 적용할지" 명확히 전달할 수 있습니다. 예를 들어, 페이지의 모든 <h1> 요소 또는 모든 <p> 요소에 스타일을 적용하도록 지시할 수 있습니다.

CSS 선택자의 주요 유형

CSS는 매우 다양한 선택자를 제공합니다. 지금부터 CSS 규칙을 작성할 때 자주 마주치게 되는 핵심 선택자들을 예제와 함께 살펴보겠습니다.

1. 요소 선택자 (Element Selector)

요소 선택자는 문서 내에서 해당 규칙에 일치하는 모든 요소 인스턴스에 스타일을 적용합니다. 예를 들어, 요소 선택자를 사용하면 페이지의 모든 <p> 태그에 동일한 스타일을 한 번에 적용할 수 있습니다.

웹 페이지의 모든 단락 텍스트 색상을 회색으로 변경하고 싶다면 다음과 같이 작성할 수 있습니다.

p {
	color: gray;
}

'p' 선택자 안의 선언은 웹 페이지의 모든 단락(HTML <p> 태그)에 적용됩니다.

2. ID 선택자 (ID Selector)

ID 선택자는 HTML 요소의 고유 ID를 기준으로 요소를 선택합니다. HTML에서 ID는 문서 내에서 유일해야 하므로, ID 선택자는 페이지의 단 하나의 요소에만 스타일을 적용할 때 사용됩니다. ID 선택자의 문법은 해시(#) 기호 뒤에 요소의 ID를 붙이는 형태입니다.

예를 들어, 페이지에서 'box9'라는 ID를 가진 요소의 height 속성 값을 150px로 설정하고 싶다면 다음 코드를 사용합니다.

#box9 {
	height: 150px;
}

이 규칙은 'box9'라는 ID를 가진 요소의 높이를 150px로 설정합니다.

3. 클래스 선택자 (Class Selector)

클래스 선택자는 특정 class 속성을 가진 요소들을 찾아 스타일을 적용합니다. 문법은 마침표(.) 뒤에 선택하고자 하는 클래스 이름을 붙이는 형태입니다.

예를 들어 'boxMiddle' 클래스를 타겟팅하려면 '.boxMiddle' 선택자를 사용하면 됩니다.

웹 페이지에 분홍색 배경을 가진 박스를 디자인한다고 가정해 보겠습니다. 이 박스에는 'pinkBox'라는 클래스가 할당되어 있습니다. pinkBox 클래스를 가진 요소들의 색상을 분홍색으로 설정하는 코드는 다음과 같습니다.

.pinkBox {
	color: pink;
}

이제 웹 페이지에서 'pinkBox' 클래스를 가진 모든 요소가 분홍색으로 표시됩니다.

또한, 특정 클래스를 가진 요소 중에서도 특정 태그에만 스타일을 적용하도록 범위를 좁힐 수도 있습니다. 클래스 선택자만 단독으로 사용하면 해당 클래스를 가진 모든 요소에 스타일이 적용되지만, 클래스 이름 앞에 요소 타입을 함께 명시하면 더욱 정밀한 타겟팅이 가능합니다.

예를 들어, 'pinkBox' 클래스를 가진 HTML <div> 태그에만 배경색을 분홍색으로 지정하고 싶다면 다음과 같이 작성합니다.

div.pinkBox {
	color: pink;
}

이 스타일은 'pinkBox' 클래스를 가진 <div> 태그에만 적용되며, 같은 클래스를 가진 다른 태그에는 영향을 주지 않습니다.

4. 전체 선택자 (Universal Selector)

전체 선택자는 웹 페이지의 모든 요소를 선택합니다. 별표(*) 기호로 표기하며, 요소 이름 없이 단독으로 사용합니다. 주로 페이지 전체의 기본 마진이나 기본 글꼴을 설정할 때 활용됩니다.

페이지의 모든 요소를 화면 중앙에 정렬하고 싶다면 다음 코드를 사용할 수 있습니다.

* {
	text-align: center;
}

이 규칙은 웹 페이지의 모든 요소에 'text-align: center;' 스타일을 적용합니다.

5. 하위 선택자 (Descendant Selector)

하위 선택자는 특정 요소의 자손(descendant)에 해당하는 요소를 선택하여 스타일을 적용합니다. 문법은 상위 요소를 먼저 쓰고, 공백(스페이스)을 두고, 그 뒤에 선택하려는 하위 요소를 나열하는 형태입니다.

예를 들어, 목록(list) 안에 있는 링크만 노란색 배경으로 바꾸고, 페이지의 다른 링크에는 영향을 주고 싶지 않다고 가정해 보겠습니다. 이럴 때 다음 코드를 사용할 수 있습니다.

li a {
	background-color: yellow;
}

이 스타일은 'li a' 하위 선택자를 사용합니다. 즉, HTML <li> 태그 내부에 있는 <a> 태그에만 스타일이 적용됩니다. 페이지의 다른 위치에 있는 <a> 태그에는 아무런 영향을 미치지 않습니다.

CSS 선택자 목록 (Selector List)

동일한 스타일을 여러 요소에 적용해야 한다면 선택자 목록을 활용할 수 있습니다. 선택자 목록은 목록에 포함된 모든 개별 선택자에 동일한 규칙을 한 번에 적용합니다.

예를 들어, 아래처럼 동일한 스타일을 담고 있는 두 개의 CSS 규칙이 있다고 가정해 보겠습니다.

h2 {
	text-align: center;
}

.alignCenter {
	text-align: center;
}

이 두 규칙을 하나의 선택자 목록으로 합치면 코드가 훨씬 읽기 쉬워집니다. 선택자 사이에 쉼표(,)를 추가하기만 하면 됩니다.

h2, .alignCenter {
	text-align: center;
}

이 코드는 첫 번째 예제와 완전히 동일하게 동작하지만, 선택자 목록을 사용함으로써 코드가 더 간결해졌습니다.

CSS 그룹화 선택자 (Grouping Selector)

CSS 그룹화 선택자는 여러 선택자에 공통 스타일 세트를 적용할 때 사용합니다. 반복되는 코드를 줄이고 더 깔끔한 코드를 작성하는 데 유용합니다. 문법은 쉼표로 구분된 요소 선택자 목록 뒤에 적용할 CSS 규칙을 작성하는 형태입니다.

다음과 같은 스타일을 사용하는 웹 페이지를 디자인한다고 가정해 보겠습니다.

h1 {
	text-align: center;
	font-size: 32px;
	font-weight: normal;
}

h2 {
	text-align: center;
	font-size: 24px;
	font-weight: normal;
}

h3 {
	text-align: center;
	font-size: 18px;
	font-weight: normal;
}

이 코드에서 'font-weight: normal;'과 'text-align: center;' 스타일은 모든 선택자에서 중복되고 있습니다. 이러한 반복을 줄이려면 그룹화 선택자를 사용해 공통 스타일을 묶으면 됩니다.

h1, h2, h3 {
	text-align: center;
	font-weight: normal;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}

모든 태그에서 동일했던 text-align과 font-weight 두 스타일을 하나로 그룹화했습니다. 덕분에 코드가 훨씬 간결하고 읽기 쉬워졌습니다.

마무리

CSS 선택자를 활용하면 웹 페이지의 특정 요소 또는 요소 집합에 원하는 스타일을 정확하게 적용할 수 있습니다. CSS는 ID 선택자, 클래스 선택자, 그룹화 선택자 등 다양한 선택자를 제공하며, 이를 조합하면 정교한 CSS 스타일을 만들 수 있습니다.

물론 이번 글은 CSS 선택자의 빙산의 일각만 다룬 것입니다. CSS에는 속성 선택자(attribute selector), 가상 클래스(pseudo-class), 가상 요소(pseudo-element), 결합자(combinator) 등 더 많은 선택자가 존재합니다. 더 발전된 규칙을 작성하고 싶다면 이러한 선택자들에 대해 추가로 학습해 보는 것이 좋습니다.

이 튜토리얼에서는 예제를 통해 CSS에서 가장 널리 사용되는 선택자들의 사용법을 살펴보았습니다. 이제 여러분은 CSS 선택자를 활용해 전문가처럼 스타일을 만들 수 있는 기본기를 갖추게 되었습니다.