가상 클래스와 가상 요소

CSS

Mia_ 2022. 10. 27. 17:02

a. 가상 클래스

1. 사용자의 동작에 반응하는 가상 클레스

· :link : 웹 문서의 링크 중 사용자가 아직 방문 하지 않은 링크에 스타일 적용

· :visited : 웹 문서의 링크에서 한 번 이상 방문한 링크에 스타일 적용

· :hover : 웹 요소 위에 마우스 포인터를 올려 놓을 때 스타일 적용

· :active : 웹 요소의 링크나 이미지 등을 활성화 했을 때, 즉 클릭했을 때 스타일 지정

· :focus : 웹 요소에 초첨을 맞추엇을 때(텍스트 필드에 마우스 포인터를 올려놓거나, 커서 이동을 했을 때 등.) 스타일 적용

2. 요소 상태에 따른 가상 클래스

· :target :

· :not : [ ] 괄호 안에 있는 요소를 제외한 이라는 의미. 해당 요소를 제외하여 선택

· :checked : 폼의 라디오 박스, 체크 박스에서 선택된 항복 선택

· :enabled : 해당 요소가 사용할 수 있는 상태일 때 스타일 지정

· :disabled : 해당 요소가 사용할 수 없는 상태일 때 스타일 지정

3. 구조 가상 클래스

: 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용 할 때 사용

1) 특정 위치의 자식 요소 선택

- 지정할 요소가 몇번째 인지 따져서 스타일 적용도 가능

종류	설명
:only-child	부모 안에 자식 요소가 하나 뿐일 때 자식 요소 선택
A:only-type-of	부모 안에 A 요소가 하나 뿐 일때 선택
:first-child	부모 안에 있는 모든 요소 중 첫번째 자식 요소를 선택
:last-child	부모 안에 있는 모든 자식 요소 중 마지막 자식 요소를 선택
A:first-of-type	부모 안에 있는 A 요소 중 첫 번째 요소를 선택함
A:last-of-type	부모 안에 있는 A 요소 중 마지막 요소를 선택함
:nth-child(n)	부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택
:nth-last-child(n)	부모 안에 있는 모든 요소들 중에서 끝에서 n번째 요소를 선택
A:nth-of-type(n)	부모 안에 있는 A 요소 중에서 n번째 요소를 선택
A:nth-last-of-type(n)	부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택

2) 수식을 이용해 위치 지정하기

- 1,3,5 번째 처럼 위치가 계속 바뀐다면 반복된 규칙을 찾아서 an+b처럼 수식을 사용할 수 있음

- 이 때 n값은 0부터 시작

- 또는 홀수 번째에 스타일을 줄 땐 :nth-child(odd), 짝수 번째에 스타일을 줄 땐 :nth-child(even)도 사용

/*div 요소에서 세 번째 자식인 p 요소에 스타일 적용*/
div p:nth-child(3)

/*div 요소에서 홀수 번째로 나타내는 자식인 p 요소에 스타일 적용*/
div p:nth-child(odd), div p:nth-child(2n+1)

b. 가상 요소

: 가상 요소는 문서 안의 특정 부분에 스타일을 지저하기 위해 가상으로 요소를 만들어 추가

- 가상 요소를 만들어 사용하는 이유는? 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 함

1. ::first-line 요소와 ::first-letter 요소

- 지정한 요소의 첫 번째 줄이나 첫 번째 글자에 스타일 적용

2. ::before 요소와 ::after 요소

- 지정한 요소의 앞 혹은 뒤에 스타일 적용