[CSS] Selector(1/5) - 기본 선택자

전우석·2024년 2월 28일

CSS

목록 보기
4/12

선택자: CSS를 통해 원하는 스타일을 적용하기 위한 범위를 지정하는 속성

기본 선택자

  • HTML 요소의 이름(태그), 클래스(class), 아이디(id)를 기반으로 스타일을 적용하는 선택자

전체 선택자

* { // 문서 내 모든 요소에 대해
	color: red;
}
  • *기호를 사용해서 모든 요소에 스타일 적용

태그 선택자

p { // 문서 내 모든 p 태그인 요소에 대해
	color: red;
}
  • <p>, <div>, <section>등 해당하는 HTML 태그에 스타일 적용

ID 선택자

#box { // 문서 내 모든 id="box"인 요소에 대해
	color: red;
}
  • 해당하는 ID에 스타일 적용
  • ID는 HTML 문서 내에 하나만 존재할 수 있음

클래스 선택자

.box-class { // 문서 내 모든 class="box-class"인 요소에 대해
	color: red;
}
  • 해당하는 모든 클래스에 스타일 적용
  • 비슷한 스타일을 적용할 요소들에 같은 클래스 설정할 것

0개의 댓글