CSS 선택자(CSS Selectors)
기본 선택자 (Basic Selectors)
역사적 배경 (Historical Background)
CSS 선택자는 HTML 요소를 스타일링하기 위해 CSS1 사양에서 처음 도입되었습니다. 기본 선택자는 가장 기본적이고 널리 사용되는 선택자들로, HTML 문서 구조를 기반으로 스타일을 적용합니다.
태그 선택자 (Tag Selector)
태그 선택자는 HTML 요소의 태그 이름을 기준으로 선택합니다.
p {
color: blue;
}
이 코드는 모든 <p> 태그의 텍스트 색상을 파란색으로 지정합니다.
클래스 선택자 (Class Selector)
클래스 선택자는 특정 클래스 이름을 가진 요소를 선택합니다. HTML 요소에 class 속성을 사용해 정의합니다.
.example {
font-size: 20px;
}
이 코드는 class="example"인 모든 요소의 글꼴 크기를 20픽셀로 설정합니다.
아이디 선택자 (ID Selector)
아이디 선택자는 특정 ID를 가진 요소를 선택합니다. HTML 요소에 id 속성을 사용해 정의합니다.
#header {
background-color: yellow;
}
이 코드는 id="header"인 요소의 배경색을 노란색으로 지정합니다.
그룹화(Grouping)와 결합자(Combinators)
역사적 배경 (Historical Background)
CSS2 사양에서는 그룹화와 결합자가 도입되어, 여러 선택자에 동일한 스타일을 적용하거나 선택자들 간의 관계를 정의할 수 있게 되었습니다.
그룹화 (Grouping)
그룹화는 여러 선택자에 동일한 스타일을 적용할 때 사용됩니다.
h1, h2, p {
color: green;
}
이 코드는 모든 <h1>, <h2>, <p> 태그의 글꼴 색상을 녹색으로 설정합니다.
결합자 (Combinators)
결합자는 선택자들 간의 관계를 정의합니다.
- 하위 선택자 (Descendant Selector): 공백을 사용하여 특정 요소의 모든 하위 요소를 선택합니다.
div p {
color: red;
}
- 자식 선택자 (Child Selector):
>기호를 사용하여 특정 요소의 직계 자식 요소를 선택합니다.
ul > li {
font-weight: bold;
}
- 형제 선택자 (Adjacent Sibling Selector):
+기호를 사용하여 특정 요소의 다음에 위치한 형제 요소를 선택합니다.
h1 + p {
margin-top: 0;
}
- 일반 형제 선택자 (General Sibling Selector):
~기호를 사용하여 특정 요소의 모든 형제 요소를 선택합니다.
h1 ~ p {
color: gray;
}
속성 선택자 (Attribute Selectors)
역사적 배경 (Historical Background)
속성 선택자는 CSS2에서 처음 도입되었습니다. 속성 선택자는 특정 속성을 가진 요소를 선택할 수 있게 해, 보다 정교한 스타일링이 가능하게 합니다.
기본 속성 선택자 (Basic Attribute Selector)
특정 속성을 가진 모든 요소를 선택합니다.
a[target] {
color: blue;
}
이 코드는 target 속성이 있는 모든 <a> 태그의 텍스트 색상을 파란색으로 지정합니다.
값이 지정된 속성 선택자 (Attribute Selector with Value)
특정 값을 가진 속성을 선택합니다.
input[type="text"] {
border: 1px solid black;
}
이 코드는 type="text"인 모든 <input> 요소에 검은색 테두리를 지정합니다.
값의 일부를 포함하는 속성 선택자 (Attribute Selector Containing Value)
특정 문자열을 포함하는 속성을 선택합니다.
[class*="button"] {
background-color: yellow;
}
이 코드는 클래스 이름에 “button”을 포함하는 모든 요소의 배경색을 노란색으로 설정합니다.
의사 클래스(Pseudo-classes)와 의사 요소(Pseudo-elements)
역사적 배경 (Historical Background)
의사 클래스와 의사 요소는 CSS2에서 도입되었으며, 요소의 특정 상태나 부분을 스타일링할 수 있는 강력한 도구입니다.
의사 클래스 (Pseudo-classes)
의사 클래스는 요소의 특정 상태를 스타일링합니다.
- :hover: 요소에 마우스를 올렸을 때
a:hover {
color: red;
}
- :focus: 요소가 포커스를 받을 때
input:focus {
background-color: lightblue;
}
- :nth-child(): 특정 순서에 있는 요소를 선택
li:nth-child(2) {
color: green;
}
의사 요소 (Pseudo-elements)
의사 요소는 요소의 특정 부분을 스타일링합니다.
- ::before: 요소의 내용 앞에
p::before {
content: "Note: ";
font-weight: bold;
}
- ::after: 요소의 내용 뒤에
p::after {
content: " - End";
font-style: italic;
}
- ::first-line: 첫 번째 줄
p::first-line {
font-size: 1.2em;
}
고급 선택자 (Advanced Selectors)
:nth-child()
nth-child()는 부모 요소의 자식 중 특정 순서에 있는 요소를 선택합니다.
- 짝수 번째 자식 선택
li:nth-child(even) {
background-color: #f0f0f0;
}
- 홀수 번째 자식 선택
li:nth-child(odd) {
background-color: #e0e0e0;
}
- n 번째 자식 선택
li:nth-child(3) {
color: blue;
}
:not()
not() 선택자는 특정 선택자와 일치하지 않는 요소를 선택합니다.
p:not(.special) {
color: gray;
}
이 코드는 class="special"이 아닌 모든 <p> 태그의 텍스트 색상을 회색으로 지정합니다.
<p class="special">이 문장은 회색이 아닙니다.</p> <p>이 문장은 회색입니다.</p>
종합 예제 (Comprehensive Example)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selectors Example</title>
<style>
/* 기본 선택자 */
h1 {
color: red;
}
.intro {
font-size: 20px;
}
#main {
padding: 10px;
background-color: lightgray;
}
/* 그룹화와 결합자 */
h2, p {
color: green;
}
div p {
color: blue;
}
ul > li {
font-weight: bold;
}
/* 속성 선택자 */
a[target] {
color: orange;
}
input[type="text"] {
border: 1px solid black;
}
/* 의사 클래스와 의사 요소 */
a:hover {
color: pink;
}
input:focus {
background-color: yellow;
}
p::before {
content: "Start: ";
color: gray;
}
p::after {
content: " End.";
color: gray;
}
/* 고급 선택자 */
li:nth-child(2) {
color: purple;
}
p:not(.intro) {
color: brown;
}
</style>
</head>
<body>
<h1>CSS 선택자 예제</h1>
<p class="intro">이 문장은 기본 선택자 예제를 보여줍니다.</p>
<div id="main">
<h2>그룹화와 결합자</h2>
<p>이 문장은 그룹화된 선택자입니다.</p>
<p>이 문장은 <a href="#" target="_blank">속성 선택자</a>를 포함하고 있습니다.</p>
<ul>
<li>첫 번째 아이템</li>
<li>두 번째 아이템</li>
<li>세 번째 아이템</li>
</ul>
</div>
<input type="text" placeholder="텍스트 입력">
</body>
</html>
이 종합 예제는 다양한 CSS 선택자를 사용하여 HTML 요소를 스타일링하는 방법을 보여줍니다. 각 선택자의 기능과 사용법을 이해하고 활용하면, 보다 정교하고 강력한 CSS를 작성할 수 있습니다.