![[HTML&CSS] 2. CSS 선택자](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-07T07%3A45%3A20.107Z-a8baeb1d-8d78-4cec-83ed-621829e2066a&w=3840&q=75)
선택자의 종류
- 클래스 선택자
.클래스명 {}: 여러 곳에 사용할 수 있다. - 클래스 선택자가 있다면 우선으로 클래스를 선택 그 후 태그 선택자가 선택된다.
- ID 선택자
#ID명 {}: 한 곳에만 사용 가능하다. (unique)
- 태그 선택자
태그명 {}: 해당 태그 전체의 적용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.red-box {
background-color: red;
}
/* 클래스 선택자 */
.box {
border: 1px solid black;
padding: 10px;
margin: 10px;
border-radius: 10px
}
/* ID 선택자(한 곳에만 사용가능 (DB=unique)) */
#box {
display: block
}
/* 태그 선택자 */
div {
background-color: #69f3f3e1;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<div>Hello World</div>
<div class="box">Hello World</div>
<div class="box">Hello World</div>
<span id="box">Hello World</span>
<span>Hello World</span>
<div class="red-box">빨간박스</div>
</body>
</html>
Share article