css 선택자란 (5.28)
https://notion6780.tistory.com/92
html/css) css 선택자 selector
⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히
notion6780.tistory.com
앞서 css선택자의 개념을 짚었다.
여기에 주요 기본선택자의 종류와 사용법을 적어본다.
✨전체선택자 (*)
✨ 태그선택자 (tag)
✨ 클래스선택자 (.class)
✨ 아이디선택자 (#id)
1.전체선택자
모든 요소를 한꺼번에 선택
주로 초기화 작업에 사용된다.
* {
margin: 0;
padding: 0;
}
2.태그선택자
html 태그 이름을 직접 써서 선택
html {
font-size: 18px;
background-color: rgb(0, 0, 30);
}
h1 {
color: white;
}
p {
color: yellow;
}
div {
color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- css
인라인, 내부ss, 외부ss
외부ss 경로는 상대경로로 지정하는 것이 권장된다 -->
<link rel="stylesheet" href="css/style01.css">
</head>
<body>
<h1>안녕하세요</h1>
<p>첫 번째 문단입니다</p>
<div>박스 영역입니다</div>
</body>
</html>
3.클래스선택자
같은 클래스를 가진 여러 요소에 동시에 스타일을 적용
태그선택자보다 원하는 대상을 더 구체적으로 골라낼 수 있다.
.content {
color: yellowgreen;
}
4.아이디선택자
요소에 고유한 id를 지정한 뒤 스타일을 정의한다.
id는 고유해야 한다.
단 하나의 요소만을 선택할 때 사용
#special-box {
color: rgb(0, 0, 30);
background-color: yellow;
border: 2px solid skyblue;
width: 40vw;
}
<body>
<h1 class="title">제목</h1>
<p class="content">내용1</p>
<p class="content">내용2</p>
<div id="special-box">특별한 박스</div>
</body>
'HTML CSS' 카테고리의 다른 글
| html/css) css선택자 - 가상클래스 선택자 (0) | 2025.05.29 |
|---|---|
| html/css) css선택자 - 결합선택자 (0) | 2025.05.29 |
| html/css) css에서 사용하는 주요 단위 (0) | 2025.05.28 |
| html/css) css 선택자 selector (0) | 2025.05.28 |
| html/css) 시멘틱 태그 semantic tag (0) | 2025.05.28 |