2022-04-08
CSS 기본 문법
선택자 {속성: 값}
선택자
스타일(CSS)을 적용할 대상(selector)
속성
color 같은 스타일의 종류를 입력
값
blue 같은 스타일의 값을 입력
선택자 {속성: 값; 속성: 값;}
중괄호를 이용해 스타일 범위의 시작과 끝을 지정한다
선택자_기본
* 전체 선택자
모든 요소를 선택
ABC 태그 선택자
태그 이름이 ABC인 요소 선택
.ABC 클래스 선택자
HTML class 속성의 값이 ABC인 요소 선택
#ABC 아이디 선택자
HTML id 속성의 값이 ABC인 요소 선택
선택자_복합
ABCXYZ 일치 선택자
선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
ABC > XYZ 자식 선택자
선택자 ABC의 자식 요소 XYZ 선택
ABC XYZ 하위(후손) 선택자
선택자 ABC의 하위 요소 XYZ 선택, '띄어쓰기'가 선택자의 기호
ABC + XYZ 인접 형제 선택자
선택자 ABC의 다음 형제 요소 XYZ 하나를 선택
ABC ~ XYZ 일반 형제 선택자
선택자 ABC의 다음 형제 요소 XYZ 모두를 선택
선택자_가상 클래스
ABC:hover 가상 클래스 선택자 HOVER
선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택
ABC:active 가상 클래스 선택자 ACTIVE
선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택
ABC:focus 가상 클래스 선택자 FOCUS
선택자 ABC 요소가 포커스가 되면 선택
ABC:first-child 가상 클래스 선택자 FIRST CHILD
선택자 ABC 형제 요소 중 첫째라면 선택
ABC:last-child 가상 클래스 선택자 LAST CHILD
선택자 ABC 형제 요소 중 막내라면 선택
ABC:nth-child(n) 가상 클래스 선택자 NTH CHILD
선택자 ABC 형제 요소 중 (n)째라면 선택
ABC:not(XYZ) 부정 선택자 NOT
선택자 XYZ가 아닌 ABC 요소 선택
선택자_가상 요소
ABC::before 가상요소 선택자 BEFORE
선택자 ABC 요소의 내부 앞에 내용을 삽입
ABC::after 가상요소 선택자 AFTER
선택자 ABC 요소의 내부 뒤에 내용을 삽입
선택자_속성 선택자
[ABC] 속성 선택자
선택자 ABC을 포함한 요소 선택
