[CSS] CSS 선택자
- 웹 프로그래밍/CSS
- 2020. 12. 3. 14:35
안녕하세요.
오늘부터는 HTML 공부와 함께 CSS도 병행해서 공부하려고 합니다.
CSS란 Cascading Style Sheets의 약자로써, 쉽게 말해서 스타일 시트 언어입니다.
CSS를 사용하는 이유는 HTML의 디자인을 조금 더 간결하고 쉽게 하기 위함인데요.
오늘은 그 첫번째 시간으로써, CSS 선택자에 대해서 알아보고 어떻게 그럼 CSS를 사용하여 HTML 요소를 꾸미는지 예제를 통해서 알아 보도록 하겠습니다.
CSS 선택자는 크게 4가지 경우가 있습니다.
1. HTML 요소 선택자
2. 아이디 선택자
3. 클래스 선택자
4. 그룹 선택자
크게 4가지의 선택자가 있습니다.
그럼 CSS 위의 4가지 선택자의 사용 방법을 예제 코드를 통해서 보여 드리도록 하겠습니다.
예제 코드
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습 - 범범조조</title>
<h1>HTML 선택 요소 선택자</h1>
<style>
h2{
color: green;
text-align: center;
text-decoration: underline;
}
h3 {
color: teal;
text-decoration: underline;
}
</style>
<br />
<h1>아이디 선택자</h1>
<style>
#heading{
color: red;
text-decoration: line-through;
}
</style>
<br />
<h1>클래스 선택자</h1>
<style>
.classTest{
color: lime;
text-decoration-line: overline;
}
</style>
<br />
<h1>그룹 선택자</h1>
<style>
h4, h5{
background-color: blue;
}
</style>
</head>
<body>
<h2>안녕하세요. 범범조조 입니다.</h2>
<h3>오늘부터는 HTML에 이어서 CSS 공부도 시작하려고 합니다.</h3>
<p>
우리 모두 같이 열심히 공부합시다!!!
</p>
<h2>안녕하세요. 범범조조 입니다.</h2>
<h3 id="heading">오늘부터는 HTML에 이어서 CSS 공부도 시작하려고 합니다.</h3>
<p>
우리 모두 같이 열심히 공부합시다!!!
</p>
<h2>안녕하세요. 범범조조 입니다.</h2>
<h3 class="classTest">오늘부터는 HTML에 이어서 CSS 공부도 시작하려고 합니다.</h3>
<p class="classTest">
우리 모두 같이 열심히 공부합시다!!!
</p>
<h4>안녕하세요. 범범조조 입니다.</h4>
<h4>오늘부터는 HTML에 이어서 CSS 공부도 시작하려고 합니다.</h4>
<p>
우리 모두 같이 열심히 공부합시다!!!
</p>
</body>
</html>
|
cs |
실행 결과
위와 같이 각 텍스트 마다 CSS가 입혀진 모습을 확인하실 수 있습니다.
감사합니다.
728x90
'웹 프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] CSS 박스모델(box model) 표현하기 (0) | 2020.12.10 |
|---|---|
| [CSS] CSS 테이블 꾸미기 (0) | 2020.12.07 |
| [CSS] CSS 리스트 만들기 (0) | 2020.12.06 |
| [CSS] CSS 링크 만들기 (0) | 2020.12.05 |
| [CSS] CSS 적용 방법 (0) | 2020.12.04 |
