CSS(Cascading Style Sheets)는 웹 페이지의 디자인을 담당하는 중요한 기술입니다.
웹 페이지의 요소들을 어떻게 스타일링할 것인지를 정의할 때, 선택자(Selector)를 사용하여 특정 HTML 요소를 선택하고 스타일을 적용합니다. 이 포스트에서는 CSS 선택자에 대해 자세히 알아보겠습니다.
1. CSS 선택자란 무엇인가?
선택자는 CSS에서 스타일을 적용할 요소를 지정하는 역할을 합니다. 선택자를 통해 HTML 문서 내에서 어떤 요소에 스타일을 적용할지를 정의합니다.
CSS 기본 구조
선택자 {
스타일속성: 스타일값;
}
- 선택자: 스타일을 적용할 HTML 요소를 지정합니다.
- 스타일속성: 적용할 스타일 속성 (예:
color
,font-size
,margin
등) - 스타일값: 속성에 적용할 값 (예:
red
,16px
,auto
등)
2. CSS 선택자의 종류
2.1. 태그 선택자 (Element Selector)
태그 선택자는 HTML 태그를 직접 지정하여 스타일을 적용합니다. 예를 들어, h1
태그를 선택하려면 아래와 같이 작성합니다.
h1 {
color: red;
}
위의 코드는 모든 h1
태그의 텍스트 색상을 빨간색으로 설정합니다.
2.2. 아이디 선택자 (ID Selector)
아이디 선택자는 HTML 요소의 id
속성을 기준으로 스타일을 적용합니다. 아이디는 페이지 내에서 유일해야 하므로 하나의 요소에만 적용됩니다.
#header {
width: 800px;
margin: 0 auto;
}
위 코드는 id="header"
를 가진 요소에 대해 스타일을 적용합니다. 즉, header
라는 아이디를 가진 요소의 너비를 800px로 설정하고, 자동으로 중앙 정렬합니다.
2.3. 클래스 선택자 (Class Selector)
클래스 선택자는 HTML 요소의 class
속성 값을 기준으로 스타일을 적용합니다. 클래스는 여러 요소에 동일하게 적용할 수 있기 때문에 여러 번 재사용이 가능합니다.
.select {
color: blue;
}
위 코드는 class="select"
를 가진 모든 요소에 파란색 텍스트 색상을 적용합니다.
2.4. 전체 선택자 (Universal Selector)
전체 선택자는 페이지 내의 모든 HTML 요소에 스타일을 적용합니다. 별표(*) 기호로 사용됩니다.
* {
color: red;
}
이 코드는 페이지 내 모든 태그의 텍스트 색상을 빨간색으로 변경합니다. 주의할 점은, 이 선택자는 페이지 내 모든 요소에 영향을 미치기 때문에 사용에 신중해야 합니다.
2.5. 자식 선택자 (Child Selector)
자식 선택자는 부모 요소 바로 아래에 있는 자식 요소를 선택합니다. >
기호를 사용하여 부모와 자식 관계를 명시합니다.
div > p {
color: green;
}
위 코드는 div
태그의 바로 아래에 있는 p
태그의 텍스트 색상을 초록색으로 지정합니다. 자식 요소를 선택할 때 사용됩니다.
2.6. 후손 선택자 (Descendant Selector)
후손 선택자는 부모 요소의 모든 하위 요소 중에서 선택할 수 있습니다. 공백을 사용하여 부모와 자식 관계를 구분합니다.
div p {
color: purple;
}
이 코드는 div
태그 내부에 있는 모든 p
태그의 텍스트 색상을 보라색으로 설정합니다. 자식뿐만 아니라 모든 하위 요소에도 적용됩니다.
2.7. 인접 형제 선택자 (Adjacent Sibling Selector)
인접 형제 선택자는 특정 요소의 바로 다음 형제 요소를 선택합니다. +
기호를 사용하여 선택합니다.
h1 + p {
color: orange;
}
위 코드는 h1
태그 바로 뒤에 있는 첫 번째 p
태그에 대해서만 텍스트 색상을 주황색으로 설정합니다.
2.8. 일반 형제 선택자 (General Sibling Selector)
일반 형제 선택자는 특정 요소 이후에 나오는 모든 형제 요소를 선택합니다. ~
기호를 사용합니다.
h1 ~ p {
color: brown;
}
이 코드는 h1
태그 이후에 나오는 모든 p
태그의 텍스트 색상을 갈색으로 설정합니다.
3. CSS 선택자의 특수 기능
3.1. 속성 선택자 (Attribute Selector)
속성 선택자는 특정 HTML 요소가 가지고 있는 속성 값에 따라 스타일을 적용할 수 있습니다.
input[type="text"] {
border: 1px solid black;
}
위 코드는 type="text"
속성을 가진 모든 input
요소에 대해 검은색 테두리를 설정합니다.
3.2. 가상 클래스 선택자 (Pseudo-class Selector)
가상 클래스 선택자는 특정 상태의 요소를 선택하는 데 사용됩니다. 예를 들어, 링크가 클릭되었을 때, 마우스 오버 시 등 특정 상태에 따라 스타일을 지정할 수 있습니다.
a:hover {
color: green;
}
위 코드는 마우스를 링크 위에 올리면, 링크의 텍스트 색상을 초록색으로 변경합니다.
3.3. 가상 요소 선택자 (Pseudo-element Selector)
가상 요소 선택자는 요소의 특정 부분을 선택하여 스타일을 적용할 때 사용합니다. 예를 들어, ::before
와 ::after
는 요소의 앞뒤에 내용을 삽입할 때 사용됩니다.
p::before {
content: "🔹 ";
}
위 코드는 모든 p
태그 앞에 "🔹" 아이콘을 추가합니다.
4. 선택자의 우선순위와 적용
CSS에서 스타일을 적용할 때, 여러 스타일이 충돌할 경우 우선순위가 중요합니다. 일반적으로 다음과 같은 우선순위 규칙이 적용됩니다:
인라인 스타일 > 2. 아이디 선택자 > 3. 클래스 선택자, 속성 선택자, 가상 클래스 > 4. 태그 선택자
인라인 스타일이 가장 우선하며, 그 다음으로 아이디 선택자가 높은 우선순위를 가집니다.
5. CSS 선택자의 단위
CSS에서는 다양한 단위를 사용하여 스타일을 적용할 수 있습니다. 예를 들어, px
, %
, em
, vh
등이 있습니다.
- px (픽셀): 고정된 크기
- % (백분율): 부모 요소의 크기에 대한 비율
- em: 부모 요소의 폰트 크기를 기준으로 한 배수
- vh (뷰포트 높이): 화면 높이를 기준으로 한 비율
body {
font-size: 16px;
}
h1 {
font-size: 2em; /* 32px (16px의 두 배) */
}