가장 기본적인 선택자(Selector)
에 대해 알아보자!
*
- 모든 요소 선택 * {
font-size: 20px;
}
tag
- 해당 태그 이름을 가진 모든 요소 선택 div {
font-size: 20px; /* 태그 이름이 `div`인 요소 선택 */
}
.class
- 해당 클래스 특성을 가진 모든 요소 선택 .box {
font-size: 20px; /* 클래스가 box인 요소 선택 */
}
#id
- 해당 아이디 특성을 가진 모든 요소 선택
해당 id
를 가진 요소는 문서 내 하나만 존재해야 함
#box {
font-size: 20px; /* 아이디가 box인 요소 선택 */
}
,
- 여러 선택자를 같이 사용할 때 ,
로 구분하여 연결
같은 코드를 여러번 작성할 필요가 없어 코드가 간결해짐
h1, h2 {
color: orange;
}