많은 선택자(selector)들이 있는데요, 무엇이 있는지 한번 알아볼까요?
1. 타입(type) 선택자
타입 선택자(Type Selector)는 HTML 태그의 이름으로 스타일을 적용하는 선택자입니다.
예를 들어, h1 태그에 스타일을 적용하려면 아래와 같이 작성합니다.
h1 {
color: red;
font-size: 36px;
}위 코드는 모든 h1 태그에 적용됩니다.
따라서, 문서 내 모든 h1 태그의 색상은 빨강이 되고, 글꼴 크기는 36px이 됩니다.
2. id 선택자
아이디 선택자(ID Selector)는 HTML 요소의 고유한 아이디를 사용하여 스타일을 적용하는 선택자입니다.
아래와 같이 작성합니다.
#my-id {
background-color: yellow;
font-weight: bold;
}위 코드는 id가 "my-id"인 요소에 적용됩니다.
따라서, 해당 요소의 배경색은 노랑이 되고, 글꼴 굵기는 bold가 됩니다.
3. class 선택자
클래스 선택자(Class Selector)는 HTML 요소의 클래스를 사용하여 스타일을 적용하는 선택자입니다.
아래와 같이 작성합니다.
.my-class {
color: blue;
font-size: 24px;
}위 코드는 class가 "my-class"인 요소에 적용됩니다.
따라서, 해당 요소의 글자색은 파랑이 되고, 글꼴 크기는 24px이 됩니다.
4. 전체 선택자
전체 선택자(Universal Selector)는 모든 HTML 요소에 스타일을 적용하는 선택자입니다.
아래와 같이 작성합니다.
* {
margin: 0;
padding: 0;
}위 코드는 모든 HTML 요소에 적용됩니다.
따라서, 모든 요소의 마진과 패딩이 0이 됩니다.
5. 하위 선택자
하위 선택자(Child Selector)는 특정 요소의 하위 요소에 스타일을 적용하는 선택자입니다.
아래와 같이 작성합니다.
parent-element child-element {
/* styles */
}위 코드는 parent-element의 하위 요소 중 child-element에 적용됩니다.
따라서, 해당 요소의 스타일이 변경됩니다.
6. 자식 선택자
자식 선택자(Child Selector)는 특정 요소의 직계 하위 요소에 스타일을 적용하는 선택자입니다.
아래와 같이 작성합니다.
parent-element > child-element {
/* styles */
}위 코드는 parent-element의 직계 하위 요소 중 child-element에 적용됩니다.
따라서, 해당 요소의 스타일이 변경됩니다.
7. 인접 선택자
인접 선택자(Adjacent Sibling Selector)는 특정 요소의 바로 옆에 있는 형제 요소에 스타일을 적용하는 선택자입니다.
아래와 같이 작성합니다.
element1 + element2 {
/* styles */
}위 코드는 element1 요소 다음에 바로 나오는 element2 요소에 적용됩니다.
따라서, 해당 요소의 스타일이 변경됩니다.
8. 형제 선택자
형제 선택자(General Sibling Selector)는 특정 요소의 형제 요소에 스타일을 적용하는 선택자입니다.
아래와 같이 작성합니다.
element1 ~ element2 {
/* styles */
}위 코드는 element1 요소 뒤에 나오는 모든 element2 요소에 적용됩니다.
따라서, 해당 요소의 스타일이 변경됩니다.
9. 그룹 선택자
그룹 선택자(Group Selector)는 여러 개의 선택자에 동일한 스타일을 적용하는 선택자입니다.
선택자들을 쉼표로 구분하여 작성합니다. 아래와 같이 작성합니다.
selector1, selector2 {
/* styles */
}위 코드는 selector1과 selector2에 동일한 스타일을 적용합니다.
10. 속성 선택자
속성 선택자(Attribute Selector)는 HTML 요소의 속성을 사용하여 스타일을 적용하는 선택자입니다.
아래와 같이 작성합니다.
[attribute-name] {
/* styles */
}위 코드는 attribute-name 속성이 있는 모든 요소에 적용됩니다.
따라서, 해당 속성을 가진 모든 요소의 스타일이 변경됩니다.
11. 가상 클래스 선택자
가상 클래스 선택자(Pseudo-Class Selector)는 HTML 요소의 상태나 위치를 기반으로 스타일을 적용하는 선택자입니다.
특정 상태에 있는 요소에 스타일을 적용할 때 사용됩니다.
예를 들어, 링크를 방문한 상태에 대해 다른 색상으로 표시하거나,
마우스를 올린 상태에 대해 다른 스타일을 지정할 수 있습니다.
가상 클래스 선택자는 :를 사용하여 표기하며, 다음과 같은 형식을 가집니다.
선택자:상태 {
스타일 속성: 값;
}
12. 가상 요소 선택자
가상요소 선택자(Pseudo-Element Selector)는 HTML 요소의 특정 부분을 선택하여 스타일을 적용하는 선택자입니다.
가상 클래스 선택자와 다르게, HTML 요소의 내용을 수정할 수 있습니다.
선택자::가상요소 {
스타일 속성: 값;
}
가상 요소 선택자의 종류로는 ::before, ::after, ::first-letter, ::first-line 등이 있습니다.
::before와 ::after는 요소의 시작 부분과 끝 부분에 콘텐츠를 추가할 때 사용되며, ::first-letter는 요소의 첫 번째 글자에 대해 스타일을 지정할 때 사용됩니다.
::first-line은 요소의 첫 번째 줄에 대해 스타일을 지정할 때 사용됩니다.
가상 요소 선택자를 적절하게 활용하면 효과적인 웹페이지 디자인을 구현할 수 있습니다.
13. 종속 선택자
종속 선택자(Combinator)는 두 개 이상의 선택자를 결합하여 좀 더 복잡한 선택자를 만드는 방법입니다.
종속 선택자는 선택자 간의 관계를 나타내며, 각 선택자 사이에 공백을 사용하여 표기합니다.
div h2 {
color: blue;
}
div p {
color: gray;
}위 코드는 div 요소 내부의 h2 요소는 파랑색으로, p 요소는 회색으로 글자 색을 변경합니다.
14. 선택지의 우선순위
CSS 스타일 선언의 우선순위는 다음과 같습니다.
- !important: 가장 높은 우선순위를 가집니다.
- 인라인 스타일: 요소에 직접 적용된 스타일은 다른 모든 스타일보다 우선합니다.
- ID 선택자: ID는 문서에서 유일하기 때문에, 다른 선택자보다 높은 우선순위를 가집니다.
- 클래스 선택자, 속성 선택자, 가상 클래스 선택자: ID 선택자보다는 우선순위가 낮지만, 태그 선택자보다는 높은 우선순위를 가집니다.
- 태그 선택자: 가장 낮은 우선순위를 가집니다.
만약, 여러 스타일이 같은 우선순위를 가진다면, 마지막에 선언된 스타일이 적용됩니다.
예를 들어,
h1 {
color: red;
}
#title {
color: blue !important;
}
.title {
color: green;
}HTML 코드에서 h1 요소와 div 요소에 title ID와 title 클래스를 각각 지정한 경우,
<h1 id="title" class="title">Hello World!</h1>
<div id="title" class="title">Hello World!</div>h1 요소에는 color: blue !important;가 적용되어 파란색으로,
div 요소에는 color: green;이 적용되어 초록색으로 표시됩니다.
이는 !important가 우선적으로 적용되기 때문입니다.
같은 우선순위인 경우, 가장 마지막으로 나온 스타일 규칙이 적용됩니다.