📝 CSS 개요 및 선택자(SELECTOR)
#230213
💻 CSS에서 link 태그 : 외부 CSS 파일과 연결하는 태그 /
HTML파일 head부분 title전에 적어준다!
<link rel="stylesheet" href="css/selector2.css" type="text/css">✔️ 기본 속성 선택자
태그에 작성된 특정 속성을 선택하는 선택자.
(id, class도 선택 가능은 하지만 보통 #, .을 사용함)
(참고)
1) 선택자는 생략 할 수 있다.
-> 특정 속성을 가진 모든 요소 선택
2) "속성값" 양쪽 쌍따옴표("")는 홑따옴표('')로 변경하거나 생략할 수 있다.
[작성법]
선택자[속성명="속성값"] {
css코드; }
✔️ 자식 선택자(>)
지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자
[작성법]
선택자1 > 선택자2 { css 코드; }
- 선택자1 : 부모 요소 선택(반드시 필요)
- 선택자2 : 자식 요소 선택(반드시 필요)
✔️ 후손(자손) 선택자( (띄어쓰기) )
지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택자.
(자식 : 1단계 아래)
(후손 : n단계 아래 모두)
[작성법]
선택자1 선택자2 { css코드; }
- 선택자1 : 부모(조상)요소 선택자
- 선택자2 : 후손 요소 선택자
✔️ 반응 선택자
사용자의 움직임에 반응하여 스타일이 달라지는 선택자
(클릭 유지, 마우스 오버 등...)
( :active ) -> 요소를 클릭하고 있는 경우
( :hover ) -> 요소에 마우스가 올라가는 경우
(hover: 마우스를 올리고 내릴 때)
✔️ 상태 선택자
입력 양식(input, input 관련 태그)의 상태에 따라 선택되는 선택자.
( :focus ) -> 요소에 초점이 맞춰졌을 때
( :checked ) -> 요소가 체크 되었을 때 (radio, checkbox)
( :enabled / :disabled ) -> 요소가 사용 가능한/불가능한 상태 일 때
✔️ 동위 선택자
동위관계(동일한 위치 == 형제관계)에서
뒤(다음)에 위치한 요소를 선택하는 선택자.
A
B
B
1) A 바로 뒤(다음)에 있는 B요소 하나를 선택 (+)
A선택자 + B선택자 { css코드; }
2) A 뒤에 있는 모든 B요소를 선택 (~ 틸드)
A선택자 ~ B선택자 { css코드; }
