## 주요 선택자 유형
1. 요소 선택자 (Element Selector):
HTML 요소의 이름을 사용하여 해당 요소를 선택합니다.
예를 들어, p는 모든 <p> (문단) 요소를 선택합니다.
div는 모든 <div> (디브) 요소를 선택합니다.
2. 클래스 선택자 (Class Selector): ★ ★ ★
CSS 클래스를 사용하여 특정 클래스를 가진 요소를 선택합니다.
예를 들어, .button은 class="button"을 가진 모든 요소를 선택합니다.
3. ID 선택자 (ID Selector): ★ ★ ★
고유한 ID를 사용하여 해당 ID를 가진 요소를 선택합니다.
예를 들어, #header는 id="header"를 가진 요소를 선택합니다.
4. 자식 선택자 (Child Selector):
특정 요소의 자식 요소를 선택합니다.
예를 들어, ul > li는 <ul> 안에 있는 모든 <li> 요소를 선택합니다.
5. 하위 선택자 (Descendant Selector):
특정 요소의 하위 요소를 선택합니다.
예를 들어, .menu a는 .menu 클래스 내부의 모든 <a> 요소를 선택합니다.
6.속성 선택자 (Attribute Selector):
HTML 요소의 속성 값을 기반으로 선택합니다.
예를 들어, [type="text"]는 type 속성이 "text"인 모든 요소를 선택합니다.
7. 의사 클래스 선택자 (Pseudo-class Selector):
특정 상태나 위치에 있는 요소를 선택합니다.
예를 들어, :hover는 마우스가 요소 위에 있는 동안 해당 요소를 선택합니다.
8. 의사 요소 선택자 (Pseudo-element Selector):
요소의 특정 부분을 선택합니다.
예를 들어, ::before는 요소의 내용 앞에 가상의 요소를 생성합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
/* id 선택자 */
#four{
color: pink;
font-size: 50px;
}
#two{
color: blue;
font-size: 30px;
}
/* class 선택자 */
.c1{
font-size: 30px;
color: blueviolet;
}
.c2{
color: aqua;
}
/* 태그 선택자 -> 사용 거의 X */
li{
color: green;
}
/* 전체 선택자 -> 사용 거의 X */
*{
color: cornflowerblue;
font-weight: bold;
}
/* 자손 선택자 */
#u1 li{
font-style: italic;
}
/* 자식 선택자 */
#u1 > li{
font-size: 20px;
}
</style>
</head>
<body>
<h4> id 선택자 : <>안에 id="" </h4>
<h4> class 선택자 : <>안에 class=""</h4>
<ul class="c1"> -> 전체로 지정할 수 도 있고, (!= 자손선택자)
<li>안녕안녕</li>
<li id="two">안녕안녕</li>
<li>안녕안녕</li>
<li id="four">안녕안녕</li>
<li class="c2">안녕안녕</li> -> 전체중에 얘만 따로 설정하면 또 따로 설정도 된당. (★범위가 좁은 선택자가 우선으로 선택된다.)
</ul>
<ul id="u1">
<li>안녕안녕</li>
<li>안녕안녕</li>
<li>안녕안녕</li>
<li>안녕안녕</li>
<li>안녕안녕</li>
</ul>
</body>
</html>
## 결과
id 선택자 : <>안에 id=""
class 선택자 : <>안에 class=""
- -> 전체로 지정할 수 도 있고, (!= 자손선택자)
- 안녕안녕
- 안녕안녕
- 안녕안녕
- 안녕안녕
- 안녕안녕 -> 전체중에 얘만 따로 설정하면 또 따로 설정도 된당. (★범위가 좁은 선택자가 우선으로 선택된다.)
- 안녕안녕
- 안녕안녕
- 안녕안녕
- 안녕안녕
- 안녕안녕
여러 요소에 적용 가능하며 동일한 클래스를 가진 여러 요소를 선택할 수 있습니다.
-> u1은 id로 지정되었으며,
페이지 내에서 하나의 요소만 가질 수 있으며,
해당 요소를 정확하게 식별하는 데 사용됩니다.
-> 이를 요약하면,
class는 여러 요소에 적용 가능한 스타일을 그룹화하고,
id는 페이지 내에서 유일한 요소를 정확하게 식별하기 위해 사용됩니다.
'HTML > DAY 29 _ 23.10.04' 카테고리의 다른 글
| CSS Basic (1) | 2023.10.04 |
|---|---|
| Box Model (0) | 2023.10.04 |
| 알아두면 좋을 Tag들 (0) | 2023.10.04 |
| 중요한 Tag들 (0) | 2023.10.04 |
| a tag (0) | 2023.10.04 |
