반응형
5. CSS 선택자 다루기
기본 선택자
- 전체 선택자 : *{/* CSS 코드 */}
<style>
*{
color:red;
}
</style>
<h1>전체 선택자</h1>
<p>전체 선택자는 모든 요소를 한번에 선택할 수 있습니다</p>
- 태그 선택자 : 태그명{/* CSS 코드 */}
<style>
p{
color:blue;
}
</style>
<h1>태그 선택자</h1>
<p>태그 선택자는 모든 p 태그의 텍스트 색상은 파란색이 됩니다.</p>
- id 선택자 : #id속성값{/* CSS 코드 */}
<style>
#title{
color:green;
}
</style>
<h1 id="title">아이디 선택자</h1>
<p>아이디 선택자는 id 속성값을 이용해 선택자를 지정하는 방법입니다.</p>
- 클래스 선택자 : .class속성값{/*CSS 코드*/}
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
<h1 class="red">클래스 선택자</h1>
<p class="blue">class 속성값으로 선택자를 지정합니다.</p>
<p class="blue">class 속성은 id 속성과 다르게 속성값을 중복해서 사용할 수 있습니다.</p>
- 기본 속성 선택자 : [속성]{/*CSS 코드*/} , [속성=값]{/*CSS 코드*/}
<style>
a[href]{
color: red;
display: block;
}
</style>
<a href="#">기본 a 태그</a>
<a href="#" target="_blank">새 창으로 열리는 a 태그</a><style>
a[target="_blank"]{
color: red;
display: block;
}
</style>
<a href="#dd">기본 a 태그</a>
<a href="#" target="_blank">새 창으로 열리는 a 태그</a>
- 문자열 속성 선택자 :
[속성~=문자열] : 속성값에 문자열이 포함되어 있으면 선택
[속성|=문자열] : 속성값이 문자열과 같거나 문자열-으로 시작하면 선택
[속성^=문자열] : 속성값이 문자열로 시작하면 선택
[속성$=문자열] : 속성값이 문자열로 끝나면 선택
[속성*=문자열] : 속성값이 문자열이 포함되면 선택
자세한 내용은 p.149~
조합 선택자
: 기본 선택자의 보조적 기능
- 그룹 선택자
- 자식 선택자
- 하위 선택자
- 일반 형제 선택자
가상 요소 선택자
예제)
<!DOCTYPE html>
<html lang="en">
<head>
<title>가상 요소 선택자</title>
<style>
p::before{
content:'<before>';
}
p::after{
content:'<after>';
}
</style>
</head>
<body>
<p>Lorem, ipsum dolor.</p>
</body>
</html>
가상 클래스 선택자
- 링크 가상 클래스 선택자
- 동적 가상 클래스 선택자
- 입력 요소 가상 클래스 선택자
- 구조적 가상 클래스 선택자
반응형
'Web > HTML+CSS+JS' 카테고리의 다른 글
| [코딩 자율학습 HTML+CSS+자바스크립트] 4주차 학습 (0) | 2025.01.30 |
|---|---|
| [코딩 자율학습 HTML+CSS+자바스크립트] 3주차 학습 (1) | 2025.01.20 |
| [코딩 자율학습 HTML+CSS+자바스크립트] 2주차-3 학습 (0) | 2025.01.14 |
| [코딩 자율학습 HTML+CSS+자바스크립트] 2주차-2 학습 (2) | 2025.01.14 |
| [코딩 자율학습 HTML+CSS+자바스크립트] 1주차 학습 (0) | 2025.01.06 |