css를 작성하다보면, 양이 늘어날 수록 internal style sheet로 작성하기 힘들어진다.
그럴 때 id나 class를 부여하는 등의 방법으로 태그들을 분류한 후, css에서 스타일을 입힌다.
이 때, 부여한 특정 id, class, 혹은 특정 태그 종류들에게 스타일을 부여하는 방법이 css selectors(선택자)이다.
기본 css 선택자에는 4가지 종류가 있다.
태그 종류 | 설명 | 문법 |
Universal Selector 전체 선택자 |
전체 선택 | *{...} |
Type Selector 타입 선택자 |
태그 종류로 선택 | 태그이름{...} ex) h1{...}, p{...} |
Class Selector 클래스 선택자 |
부여한 클래스로 선택 | .클래스이름{...} ex) .imagebox{...} |
ID Selector ID 선택자 |
부여한 아이디로 선택 | #아이디이름{...} ex) #profile-photo{...} |
기본 선택자 이외에도, 복합 선택자가 존재한다.
1. Group combinator
selector, selector{...}
2개 이상 적용 가능
h1, h2{
color: firebrick
}
2. Child combinator (자식 선택자)
selector(parent) > selector(child){...}
직계 자손 태그에만 적용이 가능함.
.outerbox > p{
background-color:cyan
}
3. Descendant combinator (후손 선택자)
selector(ancestor) selector(descendant) {...}
ancestor selector의 하위 요소 descendant selector를 선택
.list li{
color:blue
}
4. Chaining selector
selector1selector2 {...}
selector1과 selector2의 요소를 전부 만족시키는 태그를 선택
태그 명을 포함시킬 시, 맨 처음에 태그가 오도록 해야 함
h1#title-text.big.heading{
color:white
}
'html.css' 카테고리의 다른 글
[html/css] css positioning (0) | 2023.09.25 |
---|---|
[html/css] css cascading 순서 (0) | 2023.09.25 |