선택자 : 스타일을 적용하고자 하는 HTML 요소를 선택하는 역할
단순 선택자
•
타입 선택자 : 해당 태그를 가지는 모든 요소에 스타일을 적용
p { color: red;}
•
아이디 선택자 : Id로 스타일을 적용, 해당 Id 하나에 적용(Id는 단 하나), HTML 문서 내에서 동일한 아이디는 존재할 수 없음, 다른 요소와 구분되는 점을 만들어줌
#main{ color:red: }
•
클래스 선택자 : 클래스 이름으로 스타일을 적용, 같은 클래스 이름이면 모두 적용
클래스 - 비슷한 특징을 갖는 요소를 지정하여 묶을 수 있음, 여러 번 사용이 가능
.main{ color:red: }
•
전체 선택자 : 모든 요소에 스타일을 적용, 모든 요소에 적용하기 때문에 속도 저하 가능성 있음
* { color: red; }
•
속성 선택자 : 특정 속성을 소유하는 모든 요소에 스타일을 적용
선택자[속성명="속성값"] { color: red; }
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>수노입니다.</title>
<style>
p {color: red;}
h2 {color: blue;}
#snow { background-color: yellow;}
.contents {font-size: 24px;}
</style>
</head>
<body>
<h1>수노입니다.</h1>
<p>이것은 첫번째 단락입니다.</p>
<h2 id="snow">작은 수노입니다.</h2>
<p class="contents">이것은 두번째 단락입니다.</p>
<h2>작작은 수노입니다.</h2>
<p class="contents">이것은 세번째 단락입니다.</p>
</body>
</html>
HTML
복사
복합 선택자
•
자식 선택자 : 선택자A의 모든 자식 중 선택자B와 일치하는 요소 선택
선택자A > 선택자B { color: red; }
•
후손 선택자 : 선택자A의 모든 후손 중 선택자B와 일치하는 요소 선택
선택자A 선택자B { color: blue; }
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>지수입니다.</title>
<style>
article p {color: blue;}
</style>
</head>
<body>
<article>
<div>자식1
<p>후손1</p>
</div>
<div>자식2
<p>후손2</p>
</div>
<p>자식3</p>
</article>
</body>
</html>
HTML
복사
pseudo 클래스
: 요소의 특별한 상태를 지정할 때 씀
•
선택자:pseudo-class {
속성: 속성값;
}
•
:link : 방문하지 않은 링크일 경우
•
:visited : 방문한 링크일 경우
•
:hover : 요소에 마우스가 올라와 있을 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>지수입니다.</title>
<style>
a:link {color: yellow}
a:visited {color: green;}
a:hover {background-color: blue;}
</style>
</head>
<body>
<a href="https://www.google.co.kr/">구글</a>
</body>
</html>
HTML
복사