CSS 튜토리얼)Part2. CSS 기본문법 - 선택자란?
안녕하세요, 여러분! 👋
CSS 튜토리얼 part2 - 선택자에 대해 알아보도록 하겠습니다!
CSS 기본 문법
선택자(Selector)
CSS 선택자는 HTML 문서 내의 요소를 타겟팅해서 스타일을 적용하기 위해 사용하는 패턴입니다.
이 선택자는 CSS 규칙의 일부로 사용되어, 해당 선택자에 맞는 요소들에 스타일 속성을 적용합니다.
CSS 선택자는 매우 다양한 유형이 있습니다!
요소 선택자:
요소 선택자는 특정 유형의 HTML 요소를 선택하여 스타일을 적용하기 위해 사용됩니다.
요소 선택자는 가장 기본적인 선택자 유형 중 하나로, HTML 문서의 특정 태그에 직접 스타일을 적용할 때 사용합니다.
요소 선택자의 기본 작동 방식 요소 선택자는 해당하는 HTML 태그의 모든 인스턴스에 CSS 스타일을 적용합니다.
예를 들어, <p> 태그를 선택하기 위해서는 단순히 p를 선택자로 사용합니다.
- 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 모든 <p> 요소에 스타일을 적용합니다. */
p {
color: blue;
font-size: 16px;
}
/* 모든 <h1> 요소에 스타일을 적용합니다. */
h1 {
font-weight: bold;
margin-bottom: 20px;
}
/* 모든 <ul> 요소에 스타일을 적용합니다. */
ul {
list-style-type: none;
padding-left: 0;
}
클래스 선택자:
클래스 선택자는 HTML 요소의 class 속성에 맞춰 스타일을 적용하는 데 사용됩니다. 클래스 선택자는 문서 내에서 재사용 가능하며, 동일한 스타일을 여러 요소에 적용하고자 할 때 유용합니다. 클래스 선택자는 점(.) 기호를 사용하여 지정합니다.
클래스 선택자의 기본 작동 방식
클래스 선택자는 class 속성이 지정된 모든 요소를 선택합니다.
한 요소에 여러 클래스가 있을 경우, 해당 요소는 각 클래스에 대한 스타일을 모두 적용받습니다.
또한, 하나의 클래스를 여러 요소에 적용할 수 있어, 일관된 스타일을 쉽게 관리할 수 있습니다.
- 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 'highlight' 클래스가 지정된 요소에 스타일을 적용합니다. */
.highlight {
background-color: yellow;
font-weight: bold;
}
/* 'text-large' 클래스가 지정된 요소에 스타일을 적용합니다. */
.text-large {
font-size: 24px;
}
/* 'margin-top' 클래스가 지정된 요소에 스타일을 적용합니다. */
.margin-top {
margin-top: 20px;
}
클래스 선택자 특징
| 특징 | 설명 |
|---|---|
| 재사용성 | 하나의 클래스를 여러 요소에 적용할 수 있어 스타일을 재사용하는 데 효율적입니다. |
| 결합 가능 | 다른 클래스와 결합하거나, 요소 선택자와 다른 선택자들과 함께 사용할 수 있습니다. |
| 구체성 | 클래스 선택자는 요소 선택자보다 구체적이어서 스타일 적용 우선순위에서 높습니다. |
ID 선택자:
ID 선택자는 특정 HTML 요소를 그 요소의 ID 속성을 사용하여 직접 선택합니다.
ID 선택자는 문서 내에서 고유해야 하며, 한 문서 내에서 같은 ID를 가진 요소가 두 개 이상 있어서는 안 됩니다.
ID 선택자는 샵(#) 기호를 사용하여 지정하며, 특정 요소에 대해 매우 구체적인 스타일을 적용할 때 사용됩니다.
ID 선택자의 기본 작동 방식
ID 선택자는 id 속성이 지정된 한 요소를 선택합니다. 문서 내에서 ID는 유일하므로, ID 선택자를 사용한 스타일은 오직 그 ID를 가진 요소에만 적용됩니다.
- 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 'header' ID를 가진 요소에 스타일을 적용합니다. */
#header {
background-color: navy;
color: white;
padding: 20px;
}
/* 'footer' ID를 가진 요소에 스타일을 적용합니다. */
#footer {
background-color: grey;
color: white;
padding: 10px;
}
속성 선택자:
속성 선택자는 HTML 요소의 특정 속성을 기준으로 요소를 선택하는 방식입니다.
이 선택자는 요소의 속성 이름과, 필요한 경우 그 속성의 값을 기준으로 요소를 선택합니다.
속성 선택자는 요소의 상태나 특성에 따라 스타일을 조건적으로 적용할 때 유용합니다.
속성 선택자의 기본 형태:
속성 선택자는 다양한 형태로 사용할 수 있으며, 각각 다른 조건에 따라 요소를 선택합니다:
| 선택자 | 설명 |
|---|---|
[attr] | attr 속성을 가진 모든 요소를 선택합니다. |
[attr=value] | attr 속성의 값이 정확히 value와 일치하는 요소를 선택합니다. |
[attr^=value] | attr 속성의 값이 value로 시작하는 요소를 선택합니다. |
[attr$=value] | attr 속성의 값이 value로 끝나는 요소를 선택합니다. |
[attr*=value] | attr 속성의 값에 value가 포함된 요소를 선택합니다. |
[attr~=value] | attr 속성의 값에 value가 공백으로 구분된 리스트 중 하나로 포함된 요소를 선택합니다. |
[attr\|=value] | attr 속성의 값이 value 또는 value-로 시작하는 요소를 선택합니다. |
- 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* type 속성이 "text"인 모든 <input> 요소를 선택합니다. */
input[type="text"] {
border: 1px solid #ccc;
}
/* href 속성이 "https://"로 시작하는 모든 <a> 요소를 선택합니다. */
a[href^="https://"] {
color: green;
}
/* class 속성에 "example"이 포함된 모든 요소를 선택합니다. */
[class*="example"] {
background-color: yellow;
}
속성 선택자 특징
| 특징 | 설명 |
|---|---|
| 유연성 | 속성 선택자는 특정 속성이나 속성 값에 기반하여 요소를 선택할 수 있는 유연성을 제공합니다. |
| 조건적 스타일링 | 요소의 속성에 따라 조건적으로 스타일을 적용할 수 있어, HTML 구조의 변경 없이도 다양한 스타일링이 가능합니다. |
| 적용 범위 | 속성 선택자는 특정 조건에 따라 요소들을 타깃으로 하므로, 스타일 시트 내에서 특정 상황에 맞는 스타일을 적용하는 데 적합합니다. |
자식 선택자:
자식 선택자는 특정 요소의 직접적인 자식들에게만 스타일을 적용하는 선택자입니다.
이 선택자는 부모 요소와 직접적인 자식 요소 사이에 > 기호를 사용하여 표현합니다.
자식 선택자는 자식 요소에만 스타일을 적용하며, 그 자식의 자식(손자 요소)에는 영향을 미치지 않습니다.
자식 선택자의 기본 작동 방식
자식 선택자는 부모 요소의 직접적인 자식에만 스타일을 적용합니다. 이는 선택자를 통해 더 구체적인 요소 그룹을 타깃팅할 수 있게 하며, 보다 정교한 스타일 제어를 가능하게 합니다.
- 예시
1
2
3
4
5
/* <div> 요소의 직접적인 자식인 모든 <p> 요소에 스타일을 적용합니다. */
div > p {
color: red;
margin: 10px;
}
자식 선택자 특징
| 특징 | 설명 |
|---|---|
| 정밀한 타깃팅 | 특정 요소의 직접적인 자식에만 스타일을 적용하여 문서의 깊이에 따른 정밀한 스타일 제어가 가능합니다. |
| 상속 방지 | 자식 선택자로 스타일이 적용된 요소의 자식들에게만 영향을 미칩니다. 손자 요소 등 더 하위의 요소에는 영향을 미치지 않습니다. |
| 범위 제한 | 선택된 요소의 범위를 제한하여, 스타일 시트의 복잡성을 줄이고 다른 요소에 영향을 미치지 않습니다. |
하위(후손) 선택자:
하위 선택자 또는 후손 선택자는 특정 요소의 모든 후손(자식, 자식의 자식 등)에 스타일을 적용할 때 사용하는 선택자입니다.
이 선택자는 공백( )으로 표현되며, 특정 요소 아래에 있는 모든 요소들이 선택자에 의해 선택됩니다.
이는 요소의 모든 하위 레벨에 걸쳐 스타일을 적용할 때 매우 유용합니다.
하위 선택자의 기본 작동 방식
하위 선택자는 특정 요소와 그 요소의 모든 후손 요소 사이에 사용됩니다. 선택된 요소 아래의 모든 요소들, 즉 모든 하위 요소들에 스타일이 적용됩니다, 다만 이것은 직접적인 자식뿐만 아니라 모든 하위 요소를 포함합니다.
- 예시
1
2
3
4
5
/* <div> 요소의 모든 후손 <p> 요소에 스타일을 적용합니다. */
div p {
color: green;
margin-left: 20px;
}
하위(후손) 선택자 특징
| 특징 | 설명 |
|---|---|
| 범위 확장 | 하위 선택자는 선택된 요소 아래에 있는 모든 요소에 스타일을 적용하므로, 범위가 매우 넓습니다. |
| 유연성 | 요소의 계층 구조에 따라 자동으로 모든 하위 요소에 스타일을 적용할 수 있어, 복잡한 문서 구조에서도 스타일을 일관되게 유지할 수 있습니다. |
| 세밀한 조절 필요 | 하위 선택자는 매우 강력하지만, 너무 많은 요소에 스타일을 적용할 수 있으므로, 의도하지 않은 스타일 변경이 일어날 수 있습니다. 이 때문에 사용시 세심한 조절이 필요합니다. |
인접 형제 선택자:
인접 형제 선택자는 특정 요소 바로 다음에 오는 형제 요소 하나에 스타일을 적용할 때 사용하는 선택자입니다. 이 선택자는 플러스(+) 기호를 사용하여 표현되며, 두 요소가 같은 부모를 공유하고 첫 번째 요소 바로 다음에 두 번째 요소가 위치할 때만 작동합니다.
인접 형제 선택자의 기본 작동 방식
인접 형제 선택자는 첫 번째 요소 바로 다음에 위치하는 형제 요소에만 스타일을 적용합니다.
이 선택자는 매우 구체적인 상황에서 유용하며, 연속적인 요소 간의 스타일 관계를 정의할 때 사용됩니다.
- 예시
1
2
3
4
5
/* <h1> 요소 바로 다음에 오는 <p> 요소에 스타일을 적용합니다. */
h1 + p {
margin-top: 0;
color: red;
}
인접 형제 선택자 특징
| 특징 | 설명 |
|---|---|
| 정밀한 타깃팅 | 인접 형제 선택자는 매우 구체적인 요소 간의 관계를 정의하며, 특정 요소 바로 다음 요소에만 스타일을 적용합니다. |
| 제한적 사용 | 이 선택자는 첫 번째 요소 바로 다음에 오는 형제 요소에만 영향을 미치며, 다른 형제 요소에는 영향을 주지 않습니다. |
| 간단한 조직 | 인접 형제 선택자는 요소들의 직접적인 순서에 기반한 스타일 규칙을 적용하며, 복잡하지 않은 조직에서 유용하게 사용될 수 있습니다. |
일반 형제 선택자:
일반 형제 선택자 (또는 “일반 동위 선택자”)는 특정 요소와 같은 부모를 공유하는 모든 형제 요소 중, 지정된 요소 뒤에 오는 모든 요소에 스타일을 적용할 때 사용하는 선택자입니다.
이 선택자는 물결 기호(~)를 사용하여 표현됩니다.
일반 형제 선택자의 기본 작동 방식
일반 형제 선택자는 지정된 요소의 뒤에 위치하는 모든 형제 요소에 스타일을 적용합니다. 즉, 같은 부모를 가지고 지정된 요소 다음에 있는 모든 요소들이 선택됩니다.
- 예시
1
2
3
4
5
/* <h2> 요소 다음에 오는 모든 <p> 요소에 스타일을 적용합니다. */
h2 ~ p {
color: blue;
margin-top: 10px;
}
일반 형제 선택자 특징
| 특징 | 설명 |
|---|---|
| 범위 | 일반 형제 선택자는 지정된 요소 다음에 위치하는 모든 형제 요소에 스타일을 적용합니다. |
| 유연성 | 특정 위치 이후의 모든 형제 요소를 타겟팅할 수 있어 유연한 스타일링이 가능합니다. |
| 조직성 | 문서의 흐름에 따라 여러 요소에 일관된 스타일을 적용할 수 있으며, 복잡한 요소 구조에도 적용하기 쉽습니다. |
가상 클래스 선택자:
가상 클래스 선택자는 특정 상태에 있는 요소를 스타일링하기 위해 사용됩니다.
가상 클래스 선택자는 요소의 상태(예: 호버된 상태, 포커스된 상태, 체크된 상태 등)에 따라 스타일을 적용하며, 그 상태는 요소의 구조나 내용에 의존하지 않고 사용자의 상호작용이나 요소의 상태에 기반합니다.
가상 클래스 선택자의 기본 작동 방식
가상 클래스 선택자는 콜론(:)으로 시작하며, 특정 조건을 만족하는 요소에만 스타일을 적용합니다.
다양한 상황과 조건에서 사용할 수 있는 여러 가지 가상 클래스 선택자가 있습니다.
몇 가지 주요 가상 클래스 선택자
| 가상 클래스 | 기능 설명 | 예시 코드 |
|---|---|---|
:hover | 요소 위에 마우스 커서가 올라갔을 때 적용 | a:hover { color: red; } |
:focus | 요소가 포커스를 받았을 때 적용 | input:focus { border-color: blue; } |
:active | 요소를 사용자가 클릭하고 있는 동안 적용 | button:active { top: 2px; } |
:checked | 체크박스나 라디오 버튼이 선택되었을 때 적용 | input[type="checkbox"]:checked { background-color: blue; } |
:first-child | 부모의 첫 번째 자식 요소일 때 적용 | p:first-child { color: green; } |
:last-child | 부모의 마지막 자식 요소일 때 적용 | p:last-child { margin-bottom: 0; } |
:nth-child(n) | 부모의 n번째 자식 요소일 때 적용 | li:nth-child(2n) { color: navy; } |
가상 요소 선택자:
가상 요소 선택자는 문서의 특정 부분을 스타일링하기 위해 사용되는 선택자입니다.
가상 요소 선택자는 콜론 두 개(::)를 사용하여 표시하며, 문서의 특정 부분에 스타일을 적용할 때 이를 가상적으로 참조하여 스타일링합니다.
주로 문서의 특정 텍스트를 스타일링하거나, 요소 앞이나 뒤에 콘텐츠를 추가할 때 사용됩니다.
가상 요소 선택자의 기본 종류
| 가상 요소 | 용도 | 예시 코드 |
|---|---|---|
::first-line | 요소의 첫 번째 줄에 스타일을 적용합니다. | p::first-line { font-weight: bold; color: blue; } |
::first-letter | 요소의 첫 글자에 스타일을 적용합니다. | p::first-letter { font-size: 200%; float: left; } |
::before | 요소의 내용 전에 콘텐츠를 추가합니다. | h1::before { content: "★ "; color: red; } |
::after | 요소의 내용 후에 콘텐츠를 추가합니다. | h1::after { content: " ★"; color: red; } |
::selection | 사용자에 의해 선택된 텍스트 영역에 스타일을 적용합니다. | p::selection { background: lightblue; color: white; } |
가상 요소 선택자의 특징
| 특징 | 설명 |
|---|---|
| 문서의 특정 부분 타겟팅 | 가상 요소 선택자는 문서의 특정 부분(예: 첫 줄, 첫 글자)에만 스타일을 적용할 수 있게 해줍니다. |
| 콘텐츠 생성 | ::before와 ::after 선택자는 HTML에 없는 콘텐츠를 CSS에서 생성하여 추가할 수 있습니다. |
| 정교한 스타일링 | 텍스트의 첫 글자나 첫 줄 등 특정 부분에만 스타일을 적용할 수 있어 디자인에 정교함을 더할 수 있습니다. |
| 동적 상호작용 반응 | ::selection과 같은 선택자는 사용자의 상호작용(예: 텍스트 선택)에 반응하여 동적으로 스타일을 적용할 수 있습니다. |