1. 전체 선택자 : 문서내에 있는 모든 요소를 대상으로 스타일 적용할 때 사용(초기화 작업시 많이 쓰임)
2. 태그 선택자 : 특정종류의 모든 태그에 스타일 적용
3. 아이디 선택자 : 문서내의 아이디 속성값으로 접근, 아이디명은 문서내 중복되지 않아야하며,
하나의 태그를 선택할 때 사용
4. 클래스 선택자 : 문서내의 클래스 속성값으로 접근, 여러 태그를 한꺼번에 선택할 때 용이함 .클래스명으로 지정
5. 속성 선택자 : 특정 속성을 가진 태그를 선택 가능 '선택자[속성=값]'으로 지정
6. 자식선택자 : 특정 태그 바로 아래 선택
7. 자손선택자 : 특정 태그의 자식, 손자 등 모든 후손 태그들을 포함
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* *{color: blue;} 전체 선택자*/
p {color: red;} /* 태그 선택자*/
#abc {color: blue;} /* 태그선택자 : 한가지 선택자에 대해서만 적용하도록 작성 (문서내에 id의 값은 유일해야함)*/
.p2 {color: yellow;} /* 클래스선택자 : 한꺼번에 여러개의 선택자에 대해서 적용 */
input[type = "text"] {background-color: yellow;} /*속성 선택자 */
input[type = "password"] {background-color: blue;} /*속성 선택자 */
#first > div {color: red;} /* 자식 선택자 */
#first a { color: blue;} /*자손 선택자*/
</style>
</head>
<body>
<h1>제목</h1>
<p >본문</p>
<p id="abc">본문</p>
<p class = "p2">본문</p>
<input type="text"><br>
<input type="password">
<div id="first">
<a>a태그</a>
<div>p태그 밑에 DIV = 자식선택자</div>
<span>
<div>P태그 밑에 DIV2 = 자식x 자손O</div>
<div><a href="">자손이고 a태그라서 적용/</a>자손이지만 div태그라서 미적용</div>
<div><a href="">자손이고 a태그라서 적용/</a></div>
<div>여기3</div>
</span>
</div>
</body>
</html>
|
cs |
<결과>
'HTML + CSS' 카테고리의 다른 글
| [HTML] - 시맨틱하게 HTML 짠다는 의미란 무엇인가? (0) | 2022.04.08 |
|---|---|
| [CSS] - 구글폰트 사용하기 (0) | 2020.10.23 |
| [CSS] - CSS 스타일 적용 우선순위 (0) | 2020.10.23 |