선택자(selector)
선택자란?
- CSS 선택자(CSS selector)는 CSS 스타일 규칙을 적용할 HTML 요소를 선택하는 데 사용되는 패턴 또는 표현식입니다. 선택자는 특정 요소를 선택하여 스타일을 적용하는 데 사용됩니다.
- CSS 선택자는 HTML 요소의 이름, 클래스, ID 등의 속성을 기반으로 선택할 수 있습니다. 이를 통해 원하는 요소를 정확하게 선택하여 스타일을 적용할 수 있습니다.
- CSS 선택자를 사용하면 HTML 요소를 선택하여 스타일을 적용할 수 있으며, 웹 페이지의 디자인과 레이아웃을 제어하는 데 도움이 됩니다.
01. type 선택자
일반적으로 type 선택자는 HTML 요소의 이름만으로 지정됩니다. 예를 들어, p 선택자는 모든 < p > 요소를 선택하고, h1 선택자는 모든 < h1 > 요소를 선택합니다.
1
2
3
4
5
6
| input[type="submit"] {
background-color: green;
color: white;
border: none;
padding: 10px 20px;
}
|
02. id 선택자
CSS에서 “id 선택자”란 HTML 요소의 고유 식별자(ID)를 기반으로 스타일을 지정하는 선택자입니다. HTML 요소에 id 속성이 지정되어 있으면 해당 요소를 고유하게 식별할 수 있습니다. CSS에서는 이 id 값을 사용하여 특정 요소를 선택하고 스타일을 적용할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| /* 기본구문 */
#id_name {
}
/* 사용예제 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID 선택자 예시</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="header">
<h1>Welcome</h1>
</div>
<p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
|
03. class 선택자
CSS에서 “id 선택자”란 HTML 요소의 고유 식별자(ID)를 기반으로 스타일을 지정하는 선택자입니다. HTML 요소에 id 속성이 지정되어 있으면 해당 요소를 고유하게 식별할 수 있습니다. CSS에서는 이 id 값을 사용하여 특정 요소를 선택하고 스타일을 적용할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
| /* 기본구문 */
.class_name {
}
/* 사용예제 */
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
|
04. 전체 선택자
전체 선택자는 문서 내의 모든 요소를 선택하는 CSS 선택자입니다. 전체 선택자는 * 기호로 표시되며, 문서 내의 모든 요소에 스타일을 적용할 때 사용됩니다.
05. 하위 선택자
하위 선택자는 CSS에서 한 요소의 하위 요소를 선택하기 위해 사용되는 선택자입니다. 이 선택자는 특정 요소의 하위 요소 중에서만 스타일을 지정할 때 유용합니다.
하위 선택자를 사용하면 특정 요소의 하위 요소에 대해 스타일을 세밀하게 지정할 수 있으며, 선택자의 특정 범위를 좁힐 수 있습니다. 그러나 하위 선택자를 사용할 때는 선택자의 구체성에 주의하여 스타일 충돌을 방지해야 합니다.
1
2
3
| parent_element child_element {
}
|
- parent_element: 상위 요소를 나타내는 선택자입니다.
- child_element: 상위 요소의 하위 요소를 나타내는 선택자입니다.
- 이는 .container 클래스를 가진
<div> 요소의 하위에 있는 모든 <a> 요소에 스타일을 적용합니다.
06. 자식 선택자
자식 선택자는 CSS에서 특정 요소의 직계 자식 요소를 선택하기 위해 사용되는 선택자입니다. 이 선택자는 상위 요소의 직계 자식 요소만을 선택하므로, 하위 요소 중에서는 선택되지 않습니다.
1
2
3
4
| /* 기본구문 */
parent_element > child_element {
}
|
- parent_element: 상위 요소를 나타내는 선택자입니다.
- child_element: 상위 요소의 직계 자식 요소를 나타내는 선택자입니다.
07. 인접 선택자
인접 선택자(Adjacent sibling combinator)는 CSS에서 사용되는 선택자 중 하나로, 특정 요소의 바로 뒤에 나오는 형제 요소를 선택할 때 사용됩니다. 인접 선택자는 두 요소가 같은 부모 요소를 가지고 있고, 첫 번째 요소의 바로 뒤에 나오는 두 번째 요소를 선택합니다.
인접 선택자는 + 기호를 사용하여 표시되며, 기본 구문은 다음과 같습니다.
인접 선택자는 특정 상황에서 유용하게 사용될 수 있으며, 특히 동일한 형태의 여러 요소 중에서 특정 요소를 선택할 때 유용합니다.
1
2
3
4
| /* 기본구문 */
element1 + element2 {
}
|
- element1: 첫 번째 요소를 나타내는 선택자입니다.
- element2: element1 바로 뒤에 나오는 형제 요소를 나타내는 선택자입니다.
08. 형제 선택자
형제 선택자(Sibling combinator)는 CSS에서 사용되는 선택자 중 하나로, 특정 요소의 형제 요소를 선택하는 데 사용됩니다. 형제 선택자는 특정 요소의 모든 형제 요소를 선택하는 것이 아니라 특정 요소의 다음에 오는 형제 요소를 선택합니다.
형제 선택자는 ~ 기호를 사용하여 표시되며, 기본 구문은 다음과 같습니다.
1
2
3
4
| /* 기본구문 */
element1 ~ element2 {
}
|
1
2
3
4
5
6
7
8
9
10
11
| <!-- 사용예제 -->
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ul>
<!-- 첫 번째 <li> 요소 다음에 오는 모든 <li> 요소에 스타일 적용 -->
<!-- li:first-of-type ~ li {
color: blue;
} -->
|
- element1: 기준이 되는 요소를 나타내는 선택자입니다.
- element2: element1 다음에 오는 형제 요소를 나타내는 선택자입니다.
09. 그룹 선택자
그룹 선택자(Grouping selector)는 CSS에서 여러 요소에 동일한 스타일을 적용하기 위해 사용되는 선택자입니다. 여러 선택자를 쉼표(,)로 구분하여 하나의 그룹으로 묶어 사용할 수 있습니다. 이렇게 하면 동일한 스타일을 적용해야 하는 요소들을 각각 따로 선택자를 작성하는 것보다 간결하게 표현할 수 있습니다.
그룹 선택자의 기본 구문은 다음과 같습니다.
1
2
3
4
| <!-- 기본구문 -->
selector1, selector2, selector3 {
}
|
- selector1, selector2, selector3: 각각의 선택자들을 쉼표로 구분하여 나열합니다.
1
2
3
4
5
6
7
| <!-- 사용예제 -->
<h1>제목</h1>
<p>내용</p>
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
|
- 경우
<h1>, <p>, <li> 요소에 동일한 글꼴, 색상, 여백 등의 스타일을 적용하려면 그룹 선택자를 사용할 수 있습니다.1
2
3
4
5
6
| /* 사용예제 */
h1, p, li {
font-family: Arial, sans-serif;
color: #333;
margin-bottom: 10px;
}
|
- 위 CSS는
<h1>, <p>, <li> 요소에 동일한 스타일을 적용합니다. - 그룹 선택자를 사용하면 코드를 더 간결하게 작성할 수 있으며, 유사한 스타일을 가진 요소들을 한데 묶어 관리할 수 있습니다.
10. 속성 선택자
속성 선택자(Attribute selector)는 CSS에서 특정 HTML 요소의 속성 값에 따라 스타일을 적용하는 방법입니다. HTML 요소가 특정 속성을 가지고 있을 때 그 요소에 대한 스타일을 지정할 수 있습니다. 이는 속성 이름과 해당 속성 값으로 요소를 선택하는 방식으로 동작합니다. 속성 선택자를 사용하면 특정 속성을 가진 요소를 선택하여 스타일을 적용할 수 있으므로 유용합니다. 이는 특정 링크나 이미지 등을 선택하여 스타일을 적용할 때 유용하게 사용될 수 있습니다.
1
2
3
4
5
6
7
8
9
| /* 기본구문 */
[attribute] {
}
/* 사용예제 */
[attribute="value"] {
/* 스타일 속성 */
}
|
- attribute: 선택하려는 속성의 이름입니다.
- 또한 속성 선택자를 특정 속성 값으로 선택하려면 다음과 같이 사용할 수 있습니다.
11. 가상클래스 선택자
가상 클래스 선택자는 CSS에서 특정 상태나 동작을 가지고 있는 요소를 선택하는 방법 중 하나입니다. HTML 요소가 특정 상태에 있거나 사용자와의 상호 작용에 따라 특별한 스타일을 적용해야 할 때 사용됩니다. 일반적으로는 링크, 마우스 오버, 특정 위치에 있는 요소 등과 같은 상황에서 많이 사용됩니다.
가상 클래스 선택자는 콜론(:)으로 표시되며, 다음과 같은 형식을 가집니다.
가상 클래스 선택자를 사용하면 요소의 상태나 동작에 따라 다른 스타일을 적용할 수 있으므로 웹 페이지의 사용자 경험을 향상시키는 데 유용합니다.
1
2
3
4
5
6
7
8
| /* 기본구문 */
selector:pseudo-class {
}
/* 사용예제 */
a:hover {
color: red;
}
|
- selector: 선택하려는 요소를 나타내는 선택자입니다.
- pseudo-class: 가상 클래스를 나타내는 부분으로, 선택하려는 상태나 동작을 지정합니다.
- 가상 클래스 선택자는 많은 종류가 있지만, 일반적으로 사용되는 몇 가지 예시는 다음과 같습니다.
- :hover: 마우스를 요소 위로 올렸을 때의 상태를 선택합니다.
- :active: 요소가 활성화되었을 때의 상태를 선택합니다.
- :focus: 요소가 포커스를 받았을 때의 상태를 선택합니다.
- :first-child: 부모 요소 내에서 첫 번째 자식 요소를 선택합니다.
- :last-child: 부모 요소 내에서 마지막 자식 요소를 선택합니다.
12. 가상요소 선택자
가상 요소 선택자는 CSS에서 특정 요소의 내부의 일부를 선택하여 스타일을 적용하는 방법 중 하나입니다. 이것은 HTML에 실제로 존재하지 않는 요소의 스타일을 정의할 때 사용됩니다. 일반적으로 콜론(:)으로 표시되며, 가상 요소의 이름을 사용하여 정의됩니다.
일반적으로 사용되는 가상 요소 선택자에는 ::before와 ::after가 있습니다.
- ::before: 선택한 요소의 내용의 앞에 가상 요소를 추가합니다.
- ::after: 선택한 요소의 내용의 뒤에 가상 요소를 추가합니다. ````css /* 기본구문 */ selector::pseudo-element {
} /* 사용예제 */ p::before { content: “이전 내용: “; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| - selector: 선택하려는 요소를 나타내는 선택자입니다.
- pseudo-element: 가상 요소를 나타내는 부분으로, before 또는 after와 같은 가상 요소를 지정합니다.
- 이 CSS는 모든 `<p>` 요소의 내용 앞에 "이전 내용: "을 추가합니다.
- 가상 요소 선택자를 사용하면 HTML에 실제로 존재하지 않는 요소에 스타일을 적용할 수 있으므로 디자인에 창의적인 요소를 추가할 수 있습니다.
- 그러나 가상 요소는 CSS로 생성된 것이기 때문에 JavaScript로 수정할 수 없습니다.
### **13. 종속 선택자**
종속 선택자(Child combinator)는 CSS에서 사용되는 선택자 중 하나로, 특정 요소의 자식 요소를 선택하는 데 사용됩니다. 종속 선택자는 특정 요소의 직계 자식 요소를 선택하기 위해 사용됩니다.
종속 선택자는 > 기호를 사용하여 표시되며, 기본 구문은 다음과 같습니다:
````css
/* 기본구문 */
parent > child {
}
|
1
2
3
4
5
| <!-- 사용예제 -->
<div class="parent">
<div class="child">자식 요소 1</div>
<div class="child">자식 요소 2</div>
</div>
|
1
2
3
| .parent > .child {
}
|
- parent: 부모 요소를 나타내는 선택자입니다.
- child: 부모 요소의 직계 자식 요소를 나타내는 선택자입니다.
- 이 경우 .parent 요소의 직계 자식인 .child 요소에 스타일을 적용하려면 다음과 같이 종속 선택자를 사용할 수 있습니다.
- 위 CSS는 .parent 요소의 직계 자식인 .child 요소에 스타일을 적용합니다. 이렇게 하면 .parent 요소 내의 다른 요소들에는 영향을 주지 않고 .child 요소에만 스타일이 적용됩니다.
- 종속 선택자를 사용하면 특정 요소의 직계 자식 요소를 선택하여 스타일을 적용할 수 있으므로, 원하는 요소에 집중하여 스타일을 관리할 수 있습니다.
14. 선택자의 우선순위
CSS에서 선택자의 우선순위는 스타일 규칙이 적용되는 우선 순위를 나타냅니다. 여러 CSS 규칙이 동일한 요소에 적용될 때, 브라우저는 이러한 규칙 중에서 어떤 것을 우선하여 적용해야 하는지를 결정해야 합니다. 이 결정은 선택자의 우선순위에 따라 이루어집니다.
선택자의 우선순위는 다음과 같은 요소들에 의해 결정됩니다. 이러한 요소들은 우선순위가 높은 순서대로 나열됩니다:
- important: !important 키워드가 스타일 규칙에 사용되면 해당 규칙은 다른 모든 규칙보다 우선합니다.
- 인라인 스타일: HTML 요소의 style 속성에 직접 지정된 스타일은 다른 모든 스타일보다 우선합니다.
- ID 선택자: ID 선택자에 의해 지정된 스타일은 클래스 선택자나 요소 선택자보다 우선합니다. 클래스 선택자 및 속성 선택자: 클래스 선택자나 속성 선택자에 의해 지정된 스타일은 요소 선택자보다 우선합니다.
- 요소 선택자: 요소 이름에 의해 지정된 스타일은 더 낮은 우선순위를 가집니다.
1
2
3
4
5
6
7
8
9
| /* 사용예제 */
#header {
background-color: blue !important;
}
.header {
background-color: red;
}
|
위의 코드에서 배경색은 블루로 설정됩니다. 이는 우선순위가 높은 !important 키워드로 인해 #header의 배경색이 blue로 지정되었기 때문입니다. 만약 !important 키워드가 없었다면 클래스 선택자에 의해 배경색이 red로 지정되었을 것입니다. 인라인 스타일의 배경색은 우선순위가 가장 낮기 때문에 적용되지 않습니다.
이러한 우선순위 규칙을 이해하면 스타일이 어떻게 적용되는지를 더 잘 이해할 수 있습니다. 그러나 너무 많은 !important 사용이나 과도한 인라인 스타일은 코드를 복잡하게 만들고 유지 보수를 어렵게 할 수 있으므로 주의해야 합니다. 가능한 한 우선순위를 명시적으로 지정하는 것이 좋습니다.
