웹프로그래밍 CSS3/CSS 사용법과 선택자
CSS3 선택자
별초롱언니
2025. 3. 11. 12:40
▣ CSS의 기본 선택자
| 종류 | 사용방법 | 설명 |
| 전체 선택자 | * { 속성선언; } | 모든 태그에 스타일을 적용한다 |
| 타입 선택자 | 태그 { 속성선언; } | 지정한 태그에 스타일을 적용한다 |
| 클래스 선택자 | .클래스 이름 { 속성선언; } | 지정한 클래스에 스타일을 적용한다 |
| 아이디 선택자 | #아이디 { 속성선언; } | 지정한 아이디에 스타일을 적용한다 |
| 속성 선택자 | [속성] { 속성선언; } [속성="값"] { 속성선언; } |
지정한 속성 또는 속성값이 있는 태그에 스타일을 적용한다 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전체 선택자 사용하기</title>
<style>
* {
color: red;
background-color: yellow;
font-size: 13px;
}
</style>
</head>
<body>
<h1>Universal Selector</h1>
<h2>모두 같은 색상, 같은 크기</h2>
<h3>전체적으로 동시에 스타일 적용</h3>
<p>모든 데이터에 적용</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>타입 선택자 사용하기</title>
<style>
h1 { background-color: yellow; }
h2 { background-color: green; }
h3 { background-color: pink; }
p { color : red; }
</style>
</head>
<body>
<h1>Type Selector</h1>
<h2>Type Selector</h2>
<h3>Type Selector</h3>
<p>각 요소에 다르게 적용</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>클래스 선택자 사용하기</title>
<style>
.class1 {
color : blue;
background-color: yellow;
}
.class2 {
color: red;
background-color: green;
}
h3.class1 {
color: navy;
background-color: pink;
}
</style>
</head>
<body>
<h1 class="class1">Class1 입니다.</h1>
<p class="class1">Class1 입니다.</p>
<h1 class="class2">Class2 입니다.</h1>
<p class="class2">Class2 입니다.</p>
<h3 class="class1">Element + Class Selector</h3>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아이디 선택자 사용하기</title>
<style>
#id1 {
color: blue;
background-color: pink;
}
#id2 {
color: blue;
background-color: yellow;
}
h2#id1 {
color: red;
background-color: green;
}
</style>
</head>
<body>
<h1 id="id1">ID1 선택자</h1>
<p id="id1">ID1 선택자</p>
<h1 id="id2">ID2 선택자</h1>
<p id="id2">ID2 선택자</p>
<h2 id="id1">Element + ID Selector</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택자 사용하기</title>
<style>
/* h1[text] {
color: red;
background-color: gray;
}
p[text] {
color: blue;
background-color: yellow;
}
h1[text="attr3"] {
color: green;
background-color: pink;
} */
h1[text] {
color: red;
background-color: gray;
}
p[text] {
color: blue;
background-color: yellow;
}
h1[text="attr3"] {
color: green;
background-color: pink;
}
p {
color: pink;
background-color: gray;
}
p[text="attr4"] {
color: yellow;
background-color: blueviolet;
}
</style>
</head>
<body>
<!-- <h1 text="attr1">text 속성 이름 선택자</h1>
<h1 text="attr2">text 속성 이름 선택자</h1>
<p text="attr3">text 속성 이름 선택자</p>
<h1 text="attr3">속성과 속성값 선택자</h1>
<p>속성 선택 없음</p> -->
<h1 text="attr1">text 속성 이름 선택자</h1>
<h1 text="attr2">text 속성 이름 선택자</h1>
<p text="attr3">text 속성 이름 선택자</p>
<h1 text="attr3">속성과 속성값 선택자</h1>
<p>속성 선택 없음</p>
<p text="attr4">text 속성 이름 선택자</p>
</body>
</html>
▣ 속성 선택자의 형식
| 형식 | 설명 | 사용 예 |
| [속성] | 해당 속성이 정의된 모든 태그를 선택한다. | p[text] |
| [속성=값] | 정의된 속성과 속성값이 동일한 태그를 선택한다. | p[text="red"] |
| [속성~=값] | 공백으로 구분된 속성값 목록 중 하나가 주어진 값과 동일한 태그를 선택한다. | p[text~="red blue"] |
| [속성|=값] | 속성값이 해당 값과 동일하거나, 또는 주어진 값으로 시작하고 '-'기호로 이어지는 값을 가진 태그를 선택한다. | p[text|="red-blue"] |
| [속성^=값] | 속성값이 주어진 값으로 시작하는 태그를 선택한다. | p[text^="img"] |
| [속성$=값] | 속성값이 주어진 값으로 끝나는 태그를 선택한다. | p[text$=".png"] |
| [속성*=값] | 속성값이 주어진 값을 부분 문자열로 가지는 태그를 선택한다. | p[text*="ong"] |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택자 사용 형식 살펴보기</title>
<style>
p[text] { color: red; }
p[text="red"] { color: yellow; background-color: purple;}
p[text~="bb"] { color: yellow; background-color: green; }
p[text|="a1"] { color: yellow; background-color: blue; }
p[text^="img"] { color: yellow; background-color: red; }
p[text$=".png"] { color: yellow; background-color: gray; }
p[text*="ong"] { color: yellow; background-color: pink; }
</style>
</head>
<body>
<h1>Text Selector</h1>
<p text="hello">모든 텍스트</p>
<p text="red">텍스트 매칭 속성</p>
<p text="aa bb cc">리스트 매칭 속성</p>
<p text="a1-a2-a3">범위 텍스트 매칭 속성</p>
<p text="img/pic.jpg">텍스트 시작 매칭 속성</p>
<p text="img/pic.png">텍스트 끝 매칭 속성</p>
<p text="Seongyong Hong">텍스트 패턴 매칭 속성</p>
</body>
</html>