CSS선택자를 사용하는 이유
스타일을 적용할 대상을 선택하기 위해서
1. 기본 선택자
1) 전체 선택자 (*)
2) 타입 선택자
- HTML의 태그 사용
3) 아이디(id) 선택자
- # 을 붙여서 사용
4) 클래스(class) 선택자
- 점(.) 을 붙여서 사용
5) 그룹(group) 선택자
- 여러요소에 같은 스타일을 적용할 때 사용
2. 연결 선택자
1) 하위선택자
- 상위 요소에 포함된 모든 하위 요소를 선택
작성형식 => 상위요소 하위요소 2) 자식 선택자 ( > )
- 부모 요소에 포함된 자식 요소만 선택
작성형식 => 부모요소 > 자식요소 3) 인접 형제 선택자 ( + )
- 요소1 이후 맨 먼저 오는 형제 요소 선택
작성형식 => 요소1 + 요소24) 형제 선택자 ( ~ )
- 요소1과 형제인 모든 요소 선택
작성형식 => 요소1 ~ 요소23. 가상 클래스 선택자
선택하고자 하는 HTML 요소의 특별한 상태를 명시할 때 사용
가상클래스 사용 시 콜론(:) 앞뒤에 빈칸이 없어야한다
선택자:가상클래스 이름
선택자.클래스이름:가상클래스이름
선택자#아이디이름:가상클래스이름1) :hover → 마우스를 올렸을 때 스타일 적용
2) :link → 방문하지 않은 링크에 스타일 적용
3) :visited → 방문했던 링크에 스타일 적용
4) :active → 활성화했을 때 스타일 적용
5) :focus → 초점이 맞춰졌을 때 스타일 적용
6) :checked → 선택한 요소에 스타일 적용
7) :enabled → 지정한 요소를 사용할 수 있는 상태일 때 스타일 적용
8) :disabled → 지정한 요소를 사용할 수 없는 상태일 때 스타일 적용
9) :not → 지정한 요소가 아닐 때 선택해서 스타일 적용
4. 구조 가상 클래스 선택자
특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용
1) :first-child → 첫번째 요소 선택
2) :last-child → 마지막 요소 선택
3) :nth-child(n) → n번째 요소 선택
4) :nth-last-child(n) → 끝에서 n번째 요소 선택
5) :only-child → 자식 요소가 하나뿐일 때 자식요소 선택
5. 가상 요소 선택자
HTML 요소에서 원하는 특정 부분만을 선택할 때 사용
선택자::가상요소이름{속성:속성 값;}1) ::first-letter → 줄에서 첫 번째 글자 선택
2) ::first-line → 첫 번째 줄 선택
3) ::before → 특정 요소의 앞에 내용이나 스타일 추가
4) ::after → 특정 요소의 뒤에 내용이나 스타일 추가
6. 속성 선택자
HTML 태그의 특정 속성이나 특정 속성값을 가지고 있는 태그에만 스타일을 적용
[속성이름] → 해당 속성이 있는 요소
[속성이름 = 값] → 지정한 속성값이 있는 요소
[속성이름 =~ 값] → 지정한 속성값이 포함된 요소 (단어별)
[속성이름 |= 값] → 지정한 속성값이 포함된 요소 (하이픈 포함, 단어별)
[속성이름 ^= 값] → 지정한 속성값으로 시작하는 요소
[속성이름 $= 값] → 지정한 속성값으로 끝나는 요소
[속성이름 *= 값] → 지정한 속성값의 일부가 일치하는 요소
[새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅]
