1. 전체 선택자
: 문서의 모든 요소에 스타일을 적용한다
❗️*{ ... }❗️
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
font-size: 50px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li id="select">CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
2. 태그(타입) 선택자
: 특정한 태그(타입)를 사용한 모든 요소에서 스타일을 적용한다.
❗️태그{ ... }❗️
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
color:red;
text-decoration:underline; /*밑줄*/
} /*태그 선택자*/
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
3. 아이디 선택자
: 특정 부분만 선택해서 문서 안에서 한 번만 적용된다.
❗️#아이디{ ... }❗️
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#select{
font-size: 100px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li id="select">CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
4. 클래스 선택자
: 특정 부분만 선택해서 문서안에 여러 번 적용한다.
: id 선택자를 여러개 사용한 것과 같은 결과지만 클래스 선택자는 id 대신 class, # 대신 .을 사용한다.
❗️.클래스명{ ... }❗️
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.deactive{
text-decoration: line-through;
}
</style>
</head>
<body>
<ul>
<li class="deactive">HTML</li>
<li>CSS</li>
<li class="deactive">JavaScript</li>
</ul>
</body>
</html>
5. 그룹 선택자
❗️A, B{ ... }❗️
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul, ol { /* 같은 속성으로 여러 태그를 지정하고 싶을 때는 , 를 사용한다.*/
background-color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol id="lecture"">
<li>HTML</li>
<li>CSS</li>
<ol>
<li>HTML2</li>
<li>CSS2</li>
</ol>
<li>JavaScript</li>
</ol>
</body>
</html>
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048
'Web > CSS' 카테고리의 다른 글
| [CSS] font-size (0) | 2023.05.06 |
|---|---|
| [CSS] 구조 가상 클래스 (0) | 2023.05.03 |
| [CSS] 속성 선택자 (0) | 2023.05.03 |
| [CSS] 연결 선택자 (0) | 2023.05.03 |
| [CSS] 가상 클래스 선택자 (0) | 2023.05.01 |
