[CSS 수업] 3강 - CSS 선택자
안녕하세요! 그레이해커 월횽입니다.
이번 시간에는 CSS에서 가장 기본이 되는 선택자(Selector)에 대해 배워보겠습니다. 선택자는 HTML 요소를 선택해서 원하는 스타일을 적용할 수 있도록 도와주는 도구입니다.
728x90
1. 요소 선택자 (Element Selector)
요소 선택자는 HTML 태그명으로 특정 요소 전체에 스타일을 적용할 수 있습니다.
p {
color: blue;
}위 코드는 문서 내 모든 <p> 태그의 글자 색상을 파란색으로 지정합니다.
2. 클래스 선택자 (Class Selector)
클래스 선택자는 HTML 요소에 class 속성을 지정하고, CSS에서는 . 기호로 식별합니다.
.my-class {
font-size: 18px;
}위 코드는 class="my-class"를 가진 모든 요소에 글꼴 크기를 18px로 지정합니다.
3. ID 선택자 (ID Selector)
ID 선택자는 고유한 ID를 가진 요소를 선택할 때 사용하며, # 기호를 사용합니다.
#my-id {
background-color: yellow;
}이 코드는 id="my-id" 속성을 가진 요소의 배경색을 노란색으로 지정합니다.
반응형
📌 선택자 요약
- 요소 선택자: 태그 이름으로 스타일 적용 (
p,h1등) - 클래스 선택자: 여러 요소에 반복 적용 가능 (
.className) - ID 선택자: 한 요소에만 적용 (
#idName)
SMALL