HTML5로 작성한 문서에 CSS3를 이용하여서 스타일을 입혀서 꾸미기 위해서는 이 HTML5에 있는 태그들을 지정을 하는 것이 기본일 것이다.
어떤 태그에 어떤 효과를 줄지를 알아야 꾸미든가 말든가를 할 것이기 때문이다.
이렇게 태그를 선택하는 것을 선택자라고 한다.
1. 태그 선택자
HTML태그명을 가지고 선택하는 단순한 방법이다.
다음 예시 소스코드를 입력하여 확인해보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.test {
background-color: red;
}
</style>
</head>
<body>
<div class="test">Test</div>
</body>
</html>
|
cs |
출력하면 다음과 같이 배경색이 적용되어 출력된다.
2. 아이디(ID) 선택자 (#)
태그에 id속성의 값을 통해서 선택하는 방법이다. id 속성은 무조건 고유하여야 한다. 2개 이상의 같은 이름의 id가 존재해서는 안된다. CSS3에서는 큰 문제가 발생하지 않지만 자바스크립트에서 문제가 발생하므로 꼭 지켜야 한다.
CSS3 선택자에서는 #아이디 로 지정한다.
다음 예시 소스코드를 입력하여서 확인해보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#test {
background-color:red;
}
</style>
</head>
<body>
<div id="test">Test</div>
</body>
</html>
|
cs |
다음과 같이 잘 지정되어서 배경색이 적용되어 나온다.
3. 클래스(class) 선택자 (.)
클래스선택자는 태그의 class속성의 값을 통해서 선택하는 방법이다. class속성은 id와 달리 고유할 필요가 없으며 여러개 존재하여도 된다.
CSS3 선택자에서는 ".클래스명"으로 지정한다.
다음 예시 소스코드를 입력하여서 확인해보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.test {
background-color:red;
}
</style>
</head>
<body>
<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>
</body>
</html>
|
cs |
다음과 같이 잘 적용되어 출력된다.
다음과 같이 모두 적용되어서 출력된다.
4. 속성 지정 선택자 ([])
각 태그마다 속성들을 가지고 지정하는 선택자이다. 해당 속성을 가지고 있거나, 혹은 그 속성의 값이 어떤 것인지에 따라서도 선택할 수 있다.
다음 예시코드를 통해서 알아보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
[type] {
background-color: yellow;
}
</style>
</head>
<body>
<form>
<lable for="id">아이디:</lable>
<input type="text" id="id"/>
<lable for="pw"">암호:</lable>
<input type="password" id="pw"/>
</form>
</body>
</html>
|
cs |
다음과 같이 해당 type속성을 보유하고 있는 둘은 노란색으로 색깔이 입혀졌다.
또한, 값에 따라서도 지정할 수 있다.
다음 예제 소스를 입력해보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
[type=password] {
background-color: gray;
}
</style>
</head>
<body>
<form>
<lable for="id">아이디:</lable>
<input type="text" id="id"/>
<lable for="pw"">암호:</lable>
<input type="password" id="pw"/>
</form>
</body>
</html>
|
cs |
다음과 처럼 암호옆의 칸만 회색으로 잘 칠해져있다.
5. 자손 선택자 (>)
자손 선택자는 X>Y 방식인데. X의 바로 밑에 있는 Y선택자를 선택한다.
물론 X와 Y에는 위에 태그, 아이디 등의 여러 선택자들을 이용할 수 있다.
다음 예제를 살펴보자.
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#box>div {
background-color: red;
}
table > tr > td {
background-color: blue;
}
</style>
</head>
<body>
<div id="box">
<div>Test</div>
</div>
<table>
<tr>
<td>안녕</td>
<td>하세요</td>
</tr>
</table>
</body>
</html>
|
다음과 같이 지정을 해보면 조금 예상과 다른 결과가 나오게 된다.
Test의 경우에는 제대로 출력이 되었다.
그런데 테이블 태그 내의 안녕하세요는 뭔가 생각한대로 적용이 되지 않았는데.
다소 주의해야할 사항이다.
table태그를 통해서 표를 작성할 때. 간소한 표의 경우에는 table tr td를 가지고 간소하게 작성을 하게 되는데.
사실 실제로 적용이 될 때. 알아서 thead, tbody 태그를 자동으로 붙여서 작성을 해준다.
그러므로 실제로 작성을 할 시에는 table > tbody > tr > td로 작성을 하거나 다음에 나오는 후손 선택자를 이용하던가 하면된다.
6. 후손 선택자
자손 선택자는 바로 밑에 있는 선택자를 지정하는데. 후손 선택자는 하위에 있는 적합한 것들을 선택한다.
후손 선택자는 공백으로 띄워주기만 하면된ㄷ.
다음 예제를 통해서 알아보자.
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.box .test {
background-color: red;
}
.box >.test2 {
background-color:blue;
}
</style>
</head>
<body>
<div class="box">
<div class="test">TestDiv1</div>
<div>
<div class="test">TestDiv2</div>
</div>
</div>
<div class="box">
<div class="test2">TestDiv3</div>
<div>
<div class="test2">TestDiv4</div>
</div>
</div>
</body>
</html>
|
cs |
다음은 출력된 상태이다.
TestDiv1,2는 후손 선택자로 지정을 하였기에 중간에 div가 하나더 걸쳐 있어도 바로 선택이 된다.
하지만, TestDiv3,4는 자손 선택자로 지정을 하였기에 중간에 div가 하나더 걸쳐있는 TestDiv4는 배경색이 지정이 되지 않았다.
기본적인 선택자에 대해서는 설명이 끝났으며, 다른 다양하고 유용한 선택자들이 있으나, 그들을 모두 다루기에는 글이 너무 길어지는 관계로 줄이도록 하겠습니다.
'프로그래밍 > CSS3' 카테고리의 다른 글
| [CSS3] box-shadow (그림자 효과) (0) | 2017.04.21 |
|---|---|
| [CSS3] transition (스타일로 효과 넣기) (0) | 2017.02.21 |
| [CSS3] 구버전의 IE(8 이하)에서 시맨틱 태그 호환 (0) | 2017.02.02 |
| CSS3 float이 적용된 요소의 부모 높이 문제 (0) | 2017.02.01 |
| [CSS3] 스타일 시트를 적용하는 방법들 (0) | 2016.07.20 |