📚선택자
📝선택자란?
선택자(Selector)는 HTML의 요소를 선택하는 부분이다. CSS의 기본 구조에서 보았듯이 선택자는 맨 앞에 위치해있다.
Selector { Property: Value; }이 선택자에는 크게 6가지가 존재한다. 이는 아래와 같다.
- 타입 선택자(type selector)
- 전체 선택자(universal selector)
- 클래스 선택자(class selector)
- 아이디 선택자(id selector)
- 속성 선택자(attribute selector)
- 의사 선택자(pseudo selector)
📝타입 선택자
타입 선택자는 HTML의 요소 이름을 사용한다. <h1>, <p> 등이 여기에 해당되며, 선택자 위치에 요소의 이름을 적어주면 된다.
h1 { color:aqua; }
p { color:blue; }내부 스타일 시트로 작성하면 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1 { color:blue; }
</style>
</head>
<body>
<h1>예시 텍스트</h1>
</body>
</html>👉선택자 그룹
선택자는 콤마(,)를 이용해 여러 개를 나열하여 적용할 수 있다.
h1, h2, h3 { color:blue; }위의 코드에서 선택자는 <h1>, <h2>, <h3>을 요소로 선택한다는 뜻이다.
📝전체 선택자
전체 선택자는 페이지 안에 있는 모든 요소를 선택하는 선택자로, 선택자 위치에 *만 적어주면 된다.
* { color:black; }내부 스타일 시트로 작성하면 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { color:blue; }
</style>
</head>
<body>
<h1>예시 텍스트</h1>
<p> 예시 텍스트</p>
</body>
</html>📝아이디 선택자
아이디 선택자는 id가 지정된 특정 요소를 선택하는 선택자이다.
id 이름 앞에 #을 붙여 #아이디 이름의 형태로 작성해준다.
#target { color:blue; }이 선택자는 다음과 같이 작성된 요소를 지정하게 된다.
<h1 id="target">텍스트</h1>내부 스타일 시트로 작성하면 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#target { color:blue; }
</style>
</head>
<body>
<h1 id="target">예시 텍스트</h1>
<h1>예시 텍스트</h1>
</body>
</html>📝클래스 선택자
클래스 선택자는 클래스가 지정된 특정 요소를 선택하는 선택자이다.
아이디 선택자와는 다르게 # 대신 .을 넣어주면 된다.
.target { color:blue; }이 선택자는 다음과 같이 작성된 요소를 지정하게 된다.
<h1 class="target">텍스트</h1>내부 스타일 시트로 작성하면 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.target { color:blue; }
</style>
</head>
<body>
<h1 class="target">예시 텍스트</h1>
<h1>예시 텍스트</h1>
</body>
</html>📝속성 선택자
html의 요소 중에서 특정한 속성을 가지는 요소를 선택하는 선택자이다.
타입 선택자에서 [ ] 안에 해당 속성을 작성해준다.
h1[title] { color:blue; }내부 스타일 시트로 작성하면 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1[title] { color:blue; }
</style>
</head>
<body>
<h1 title="제목">예시 텍스트</h1>
<h1>예시 텍스트</h1>
</body>
</html>📝의사 선택자
👉의사 클래스(Pseudo-class)
의사 클래스는 선택지에 추가하는 키워드로, 요소의 특정 부분에 스타일을 적용할 때 사용된다. 해당 클래스가 해당 요소에 정의된 것으로 간주하고 사용하며, 대표적으로 앵커 태그에서 사용된다.
Selector:PseudoClass { Property:Value; }의사 선택자는 의사 클래스가 정의된 것처럼 간주하고 해당 클래스를 선택하는 선택자이다. 앵커 태그에서는 이를 이용해 하이퍼링크를 방문하기 전과 방문한 후, 마우스를 가져갔을 때의 스타일을 지정할 수 있다.
a:link { color:blue; }
a:visited { color:green; }
a:hover { color:red;n }