[FrontEnd] Ch.05 CSS 선택자 다루기

기본 선택자

전체 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

HTML에서 사용 가능한 모든 요소를 한 번에 선택자로 지정하는 방법입니다.

태그 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

HTML 태그명으로 선택자를 지정하는 방법입니다.

아이디 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

태그에 아이디를 지정해 선택자로 사용하는 방법입니다.

아이디명 앞에 # 을 붙이면 됩니다.

클래스 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

태그에 클래스를 지정해 선택자로 사용하는 방법입니다.

클래스명 앞에 . 을 붙이면 됩니다.

기본 속성 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

html 태그에서 사용 가능한 속성과 값을 사용해 선택자를 지정하는 방법입니다.

조합 선택자

그룹 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

여러 선택자를 하나로 그룹지을 때 사용합니다.

선택자는 다르지만 선언부가 같을 때 사용합니다.

자식 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

자식 관계의 선택자를 지정합니다.

하위 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

특정 부모 요소의 모든 하위 요소를 지정합니다.

인접 형제 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

지정한 선택자 바로 다음에 있는 선택자를 지정합니다.

일반 형제 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

지정한 선택자 다음에 오는 모든 지정된 선택자를 지정합니다.

가상 요소 선택자 사용법

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

명시적으로 구성된 선택자는 아니지만 구성된 것 처럼 취급해 선택하는 선택자 지정 방법 입니다.

이중 자주 사용하는 ::before, ::after 만 적용된 예시입니다.

가상 클래스 선택자

요소의 상태를 이용해 선택자를 지정하는 방법입니다.

링크 가상 클래스 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

a 태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법입니다.

종류	설명
:link	한 번도 방문하지 않은 링크일 때 선택합니다.
:visited	한 번이라도 방문한 적이 있는 링크일 때 선택합니다.

동적 가상 클래스 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

사용자의 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법입니다.

종류	설명
:hover	요소에 마우스를 올리면 해당 태그가 선택자로 지정됩니다.
:active	요소를 마우스로 클릭하고 있는 동안 해당 태그가 선택자로 지정됩니다.

입력 요소 가상 클래스 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

입력 요소의 특정 상태를 이용해 선택자로 지정하는 방법입니다.

종류	설명
:focus	입력 요소에 커서가 활성화되면 선택자로 지정합니다.
:checked	체크박스가 표시되어 있으면 선택자로 지정합니다.
:disabled	상호작용 요소가 비활성되면 선택자로 지정합니다.
:enabled	상호작용 요소가 활성되면 선택자로 지정합니다.

 

구조적 가상 클래스 선택자

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

 

HTML 태그의 사용 위치나 다른 태그와의 관계에 따라 요소를 선택하는 방법입니다.

종류	설명
E:first-child	E 요소의 첫 번째 자식 요소를 선택자로 지정합니다.
E:last-child	E 요소의 마지막 자식 요소를 선택자로 지정합니다.
E:nth-child(n)	E 요소가 부모 요소의 자식 요소 중 n번째 순서가 맞으면 선택합니다.
E:nth-last-child(n)	E 요소가 부모 요소의 자식 요소중 마지막에서 n번째 순서가 맞으면 선택합니다.
E:nth-of-type(n)	부모 요소의 자식 요소 중 n 번째로 등장하는 E 요소를 선택합니다.
E:nth-last-of-type(n)	부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 E 요소를 선택합니다.
E:first-of-type	부모 요소의 자식 요소 중 첫 번째로 등장하는 E 요소를 선택합니다.
E:last-of-type	부모 요소의 자식 요소 중 마지막으로 등장하는 E 요소를 선택합니다.