선택자_복합
복합 선택자
복합선택자 : 기본선택자 4개를 조합해서 사용한다.
일치 선택자 (Basic Combinator)
일치 선택자: 기본 선택자 4개 중 2개를 이용하여 붙여서 사용
ex) tag name.class name or tag name id name (코드펜 예시 보면 이해됨)
- 선택자 2개를 동시에 만족시키는 요소를 선택
- 태그 선택자 같은 경우 기호가 없기 때문에 구분할 수 없음으로 클래스(id)와 태그 선택자를 쓸 경우 브라우저가 인식을 못해서 사용 시 태그 우선 클래스는 후순위로 쓴다
- 붙여쓰기가 일치 선택자 중요한 부분
코드펜 예시
- 같은 이름에 클래스가 있어도 선택자 li 태그 선택자도 만족시키는 요소를 선택해 style 변경이 되었다.
See the Pen 선택자_복합 by 김선미 (@tjsalsun) on CodePen.
자식 선택자(Child Selector)
자식 선택자: 선택자의 자식 요소 선택
ex) tag name > class name
- html에서 부모 자식 관계 생각하자
- 꺽쇠 괄호는 자식 선택자의 중요한 기호이다 ( > )
코드펜 예시
See the Pen 선택자_복합2 by 김선미 (@tjsalsun) on CodePen.
하위(후손) 선택자(Descendant)
하위(후손) 선택자(Descendant Combnator) : 하위 요소 선택
- 띄어쓰기(공백)가 선택자의 기호이다
코드펜 예시
- div 태그 요소 안에 있는. orange라는 클래스 이름 하위요소 선택하면 해당 클래스 요소만 style 바뀜
See the Pen 선택자_복합3 by 김선미 (@tjsalsun) on CodePen.
인접 형제 선택자 (Adjacent Sibling Combnator )
인접 형제 선택자: 선택자 다음 형제 요소 하나를 선택
- 인접 형제 선택자 기호는 + (플러스)
- 다음 형제 중 하나이며 가장 인접한 형제를 선택
코드펜 예시
- orange 클래스에 가장 인접한 형제 그다음 li 요소 하나만 선택해 글자 색상 변경
See the Pen 선택자_복합4 by 김선미 (@tjsalsun) on CodePen.
일반 형제 선택자 (General Sibling Combinatro)
일반 형제 선택자 : 선택자 다음 형제 요소 모두를 선택
- 일반 형제 선택자 기호는 ~ (틸드)
코드펜 예시
-orange 클래스 다음 형제 li 요소들만 선택해 글자 색상 변경
See the Pen 선택자_복합5 by 김선미 (@tjsalsun) on CodePen.
TIL
keypoint
각자 선택자 기호를 기억하자
느낀 점
스타일 줄 때 때에 맞게 사용할 수 있다는 걸 알았다
잘 사용하면 나한테 이롭겠구나
오늘의 학습 만족도
⭐⭐⭐⭐⭐