웹프로그래밍 - 3.1 가상클래스와 가상 요소

가상클래스와 가상 요소

가상(pseudo): html 문서에 코드로 명시되어 있지 않지만, 사용자 동작에 반응하는 가상 클래스

 

표기	설명
:link	방문하지 않은 링크에 스타일 적용
:visited	방문한 링크에 스타일 적용
:hover	웹 요소에 마우스 커버를 올려놓을 때의 스타일 적용
:active	웹 요소를 활성화했을 때의 스타일 적용
:focus	웹 요소에 초점이 맞추어졌을 때의 스타일 적용

 

 UI 요소 상태에 따른 가상 클래스

표기	설명
:enabled, :disabled	요소를 사용할 수 있을 때와 없을 때의 스타일 지정
:checked	라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정

 

구조 가상 클래스

1. :nth-child(n) : 앞에서부터 n번째 자식 요소에 스타일을 적용함.

2. :nth-last-child(n) : 끝에서부터 n번째인 자식 요소에 스타일을 적용함.

 

그 외 가상 클래스 요약

표기	설명
:target	앵커 목적지에 스타일 적용
:not	특정 요소가 아닐 때 스타일 적용하기
:nth-last-child(n)	부모 요소의 뒤로부터 n번째의 자식 요소에 스타일을 적용한다.
:nth-of-type(n)	같은 유형의 요소 중에서 n 번째 나타나는 요소에 스타일을 적용한다.
:nth-last-of-type(n)	같은 유형의 요소 중에서 끝에서부터 세어 n번째 나타나는 요소에 스타일을 적용
:first-child	첫번째 자식 요소에 스타일을 적용한다.
:last-child	마지막 자식 요소에 스타일을 적용한다.
:first-of-type	형제 중에서 첫번째 요소에 스타일을 적용한다.
:last-of-type	형제 중에서 마지막 요소에 스타일을 적용한다.
:only-child	해당 요소가 유일한 자식 요소일 때 스타일을 적용한다.
:only-of-type	해당 요소가 하나 뿐인 요소에 스타일을 적용한다.

 

 

다음은 시멘틱 태그에 대해 공부해보겠습니다.

2023.04.03 - [수업] - 웹프로그래밍 - 3-3 시멘틱 태그

웹프로그래밍 - 3-3 시멘틱 태그