선택자
: 특정 html 요소를 선택할 때 사용하는 기능이고, 해당 요소를 선택하여 원하는 스타일과 기능을 적용시킬 수 있다.
1) 전체 선택자(*)
: 모든 요소를 선택할 때 사용한다.
<!DOCTYPE html>
<html>
<head>
<title>전체 선택자</title>
<style>
*{
color: hotpink;
}
</style>
</head>
<body>
<p>
전체 선택자 *
</p>
<pre>
모든 요소를 선택할 때 사용한다.
</pre>
</body>
</html>전체 선택자 *을 사용하여 style color를 hopink로 지정했으므로 <p> 태그와 <pre> 태그 모두 핫핑크색으로 출력된다.
2) 태그 선택자(태그명)
: 해당 문서 내에 있는 같은 태그들을 모두 선택할 때 사용한다.
<!DOCTYPE html>
<html>
<head>
<title>태그 선택자</title>
<style>
p{
color: aqua;
}
pre{
color: yellow;
}
</style>
</head>
<body>
<p>
태그 선택자 (태그명)
</p>
<pre>
해당 문서 내의 같은 태그들을 전부 선택할 때 사용한다.
</pre>
</body>
</html>태그 선택자를 사용하여 style color를 지정했다. p 태그는 아쿠아색, pre 태그는 노랑색으로 지정하였으므로 p 태그는 모두 아쿠아색으로 출력되며 pre 태그는 모두 노랑색으로 출력된다.
3) 아이디 선택자(#)
: 해당 문서 내의 특정 html 요소 하나만 선택할 때 사용한다.
단, 해당 요소 id의 속성을 사용하여 고유 아이디값을 부여해야 한다.
<!DOCTYPE html>
<html>
<head>
<title>아이디 선택자</title>
<style>
#id1{
color: green;
}
#id2{
color: purple;
}
</style>
</head>
<body>
<p id="id1">
아이디 선택자 #
</p>
<pre id="id2">
태그에 id를 부여한 후 해당 id만 아이디 선택자로 스타일을 적용한다.
</pre>
</body>
</html>p 태그에 'id1'이라는 id를 부여하고, pre 태그에 'id2'라는 id를 부여했다. 이 고유 id값으로 스타일이나 기능을 지정할 수 있다. 위는 아이디 선택자 #을 사용하여 id1에는 초록색, id2에는 보라색을 지정하였으므로 해당 id의 태그는 지정된 색깔로 출력된다.
4) 클래스 선택자(.클래스명)
: 해당 문서 내의 여러 요소들을 선택할 때 사용한다. 이때, 클래스 속성을 추가해야 한다.
<!DOCTYPE html>
<html>
<head>
<title>클래스 선택자</title>
<style>
.class1{
color: blue;
}
.class2{
color: orange;
}
</style>
</head>
<body>
<p class="class1">
클래스 선택자 .클래스명
</p>
<pre class="class2">
태그에 클래스를 추가해서 해당 클래스를 가진 모든 태그들에 스타일을 적용한다.
</pre>
</body>
</html>p 태그에 'class1'라는 class를 부여하고, pre 태그에 'class2'라는 class를 부여했다. 스타일을 설정할 때는 클래스명 앞에 온점을 붙여 설정하면 된다. 그러면 클래스명이 class1인 태그들은 파랑색, 클래스명이 class2인 태그들은 오렌지색으로 출력된다.