선택자(selector)는 어떤게 있을까??
CSS선택자에 대해 알아보자.
선택자(Selector)
선택자란 CSS로 UI의 어느 부분을 디자인 할지, 즉 표현할 대상이 되는 부분을 말합니다.
CSS로 속서을 부여하는 형식은 다음과 같습니다.
✍️Css 예문
1
h1 { color:red; background : yellow;}
이 예문을 보면 h1에 컬러를 빨강색 으로 지정하는 의미를 담고 있습니다. {} 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ; 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다.
여러가지 선택자가 있는데 그 중 10가지 정도 알아보도록 하겠습니다.
1. Type 선택자
Type 선택자란 Html 문서의 태그 이름을 선택자로 사용할 수 있습니다.
✍️Css 예문
1
p {color : blue;}
해당 예제에서 p 태그 안의 글자들을 파란색으로 표시하도록 속성을 부여하고 있습니다.
2. Id 선택자
Id 선택자란 각기 다른 이름을 지정하여 따로 속성을 부여 할 수 있습니다. Html 요소에 Id로 이름을 붙일 때에는 유일한 이름 을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는 안됩니다. CSS에서는 ID 선택자 앞에 ‘#’ 을 붙여야 합니다. id명이나 class명은 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다.
✍️Css 예문
1
2
3
4
5
p { color : red;}
#ctxt { color: blue;}
-------------------------
<p id= "ctxt"> 건강에 좋은 차 </p>
해당 예문을 보면 p요소는 처음 지정된 빨강색 글자 스타일로 나타난 것을 확인 할 수있으며 “ctxt”로 아이디가 지정된 요소들만 파란색 으로 표시하도록 속성을 부여하고 있습니다.
3. class 선택자
같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. HTML 요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다 즉 여러 개의 요소에 같은 class명을 부여 할수 있습니다.
✍️Css 예문
1
2
3
4
5
6
7
------------------------
.btxt { color : red;}
.ctxt { color : blue;}
-------------------------
<p class= "btxt"> 건강에 좋은 차 </p>
<p class= "ctxt"> 건강에 좋은 차 </p>
해당 예문을 보면 btxt는 빨강 ctxt는 파랑 이 표시하도록 속성을 부여하고 있습니다.
4. 전체 선택자
전체선택자는 페이지의 모든 요소를 가리키는 선택자로서 *로 표시합니다.
✍️Css 예문
1
2
3
4
* {
color : blue;
}
전체 컬러에 파랑색이 부여된것을 확인 할수있습니다. 그러나 불필요하게 전체 선택자를 사용하는 것은 속도를 저하시키는 원인이 되므로, 반드시 필요한 경우가 아닌 경우 선택자를 정확하게 명시하는 것을 권장합니다.
5. 하위 선택자
하위 선택자는 요소 내부에 있는 모든 해당 요소를 가리키며, 선택자 사를 공백으로 분리합니다.
✍️Css 예문
1
.abox '공백' p { color : blue;}
6. 자식 선택자
자식 선택자는 요소 내부에 있는 해당 요소를 가리키지만, 하위 요소의 하위요소는 가리키지 않으며 선택자 사이클 > 으로 분리합니다.
✍️Css 예문
1
2
3
4
5
6
7
.abox > p { color : blue;}
----------------------
<p>7월의 여행지</p>
...
<p>8월의 여행지</p>
.abox > p 라고 했기 떄문에 하위 요소는 제외 되고 7월의 여행지, 8월의 여행지만 파랑색으로 표시된것을 확인 할 수 있습니다.
7. 인접 선택자
인접 선택자는 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자로, 선택자 사이클 +로 분리합니다.
✍️Css 예문
1
h1 + p { color : blue;}
전체 P 요소 중 h1 요소의 바로 다음에 나오는 P 태그들의 문자만을 파란색으로 표시하도록 속성을 부여하고 있습니다.
8. 형제 선택자
형제 선택자는 현재 요소와 같은 계층에있는 요소만을 선택할 수 있으며 ~ 로 구분합니다.
✍️Css 예문
1
2
3
4
5
6
7
8
9
10
11
h3 ~ p {color : blue; }
----------------------
<p> 1 </p>
<p> 2 </p>
<ul>
<li><p>3</p>
<li><p>4</p>
</ul>
<p>5</p>
h3와 같은 계증에 있는 p 태그들만 파란색으로 나타나도록 속성을 부여하고 있습니다. 반면 하위 게층에 있는 P태그들에는 속성이 부여되지 않습니다.
9. 그룹 선택자
그룹 선택자는 여러 선택자들을 ‘,’로 구분하여 함께 묶어 속성을 부여하는 것입니다.
✍️Css 예문
1
2
3
4
5
6
7
h1, p { border:5px solid lightblue;}
------------------------------------
<h1> 웹 표준 퍼블리싱 </h1>
<p>웹 디자인의 한분야로... </p>
h1과 P요소에 테두리 속성을 한번에 부여하고 있습니다.
10. 속성 선택자
HTML 요소의 속성 유무 또는 속성값을 중괄호 [] 안에 넣어 선택자로 사용할 수 있습니다.
| 속성명 | 설명 |
|---|---|
| h1[class] | class명을 가진 요소 |
| img[alt] | alt 속성을 가진 요소 |
| p[class=”abc”] | class명이 abc인 p 요소 |
| p[class~=”abc”] | class명이 abc이거나 여러개 class중 하나가 abc인 p 요소 |
| p[classI~=”abc”] | class명이 abc이거나 abc-로 시작하는 p 요소 |
| p[class^=”abc”] | class명이 철자 abc로 시작하는 p 요소 |
| p[class$=”abc”] | class명이 철자 abc로 끝나는 p 요소 |
| p[class*=”abc”] | class명이 철자 abc가 포함되어 있는 p요소 |
| a[href^=”abc”] | href속성값이 abc로 시작하는 a요소 |
11. 가상클래스 선택자
가상클래스 선택자란 링크가 걸린 문자에 스타일을 부여하는 것입니다.
| 속성 값 | 설명 |
|---|---|
| a:link | 링크가 걸린 문자에 속성을 부여하는 선택자 |
| a:visited | 링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자 |
| a:hover | 링크가 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자 |
| a:active | 링크 걸린 글자가 활성화되었을 경우의 속성을 부여하는 선택자 |
| a:focus | 링크 걸린 글자에 포커스가 생길 경우에 속성을 부여하는 선택자 |
12. 가상요소 선택자
가상요소 선택자는 요소에 id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자입니다.
| 속성값 | 설명 |
|---|---|
| :first-letter | 요소의 첫 글자 |
| :first-line | 요소의 첫 줄 |
| :first-child | 같은 요소 중 첫 번째 요소 |
| :last-child | 같은 요소 중 마지막 요소 |
| :nth-child(n) | 같은 요소 중 n번쨰 요소 |
| :before | 요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상요소) |
| :after | 요소 안 맨 뒤에 배치될 요소 (마크업에는 없는 가상요소) |
13. 종속 선택자
종속 선택자는 type 선택자와 id 선택자, class 선택자가 결합된 형태 입니다.
1
<p id= "data">선택자의 다양한 표현 </p>
14. 선택자의 우선순위
선택자마다 우선순위를 값으로 매겨본다면 다음과 같습니다.
| 선택자 | 우선순위 |
|---|---|
| 전체 선택자(*) | 0 |
| type 선택자 (p, h1, ul, …) | 1 |
| 가상 선택자 (:first-child, …) | 10 |
| class 선택자 (.abc, …) | 10 |
| id 선택자 (#abc, …) | 100 |
선택자의 우선순위로 인해 많은 난관에 부딪히기도 하고, 반대로 잘 이용하면 어려운 문제의 해법이 되기도 하니 반드시 숙지해야 합니다.