▼ 가상 수업
문서 구조에 있는 요소의 특정 상태를 선택하는 데 사용됩니다.
* 사용자 행동에 반응하는 가상 수업
:지름길
방문하지 않은 링크에 스타일을 적용합니다. 밑줄 제거 또는 텍스트 링크 색상 변경
:방문
방문한 링크에 스타일 적용
:호버
특정 요소 위로 마우스를 가져가면 스타일 적용
:활동적인
웹 요소가 활성화될 때 스타일 적용
(링크나 이미지 클릭 시)
:집중하다
웹 요소에 포커스가 있을 때 스타일 적용
* 요소 상태에 기반한 가상 클래스
:목표
링크를 사용하여 같은 사이트의 페이지 또는 문서의 다른 사이트로 이동하고 앵커를 사용하여 같은 문서 내 다른 위치로 이동 → 앵커 대상이 되는 부분의 스타일 적용 (a)
:활성화 비활성화
항목이 사용 가능 및 사용 불가능 상태인 경우(예: 이용약관 입력)
:체크
양식의 라디오 상자 또는 확인란에서 활성화된 속성(선택한 요소)으로 요소 스타일 지정
:아니다
특정 요소 없이 스타일을 적용할 때 사용
구조적 가상 수업
웹 문서의 구조를 기반으로 특정 위치의 요소를 찾아 스타일을 적용할 때 사용
여러 항목이 나열되어 있는 경우 항목 수를 세십시오.
: 외동아들
상위 요소 내에 하위 요소가 하나만 있는 경우 하위 요소를 선택하십시오.
A:유일한 유형의
상위 요소에 A 요소가 하나만 있는 경우 이 옵션을 선택하십시오.
:첫 번째 자식
부모 내의 모든 요소 중 첫 번째 자식을 선택합니다.
:막내
부모 내 모든 요소의 마지막 자식 선택
A: 첫 번째 유형
상위 요소에서 A의 첫 번째 요소를 선택합니다.
A: 마지막 유형
상위 요소에서 A의 마지막 요소를 선택합니다.
:n번째 자식
부모 내의 모든 요소 중에서 n번째 자식을 선택합니다(예: h1 또는 p와 무관한 세 번째 자식).
:n-마지막 자식(n)
부모 내 모든 요소의 마지막 n 번째 자식을 선택합니다.
A:nter 유형
상위 요소의 A 요소 중 n번째 요소를 선택합니다(예: p 중 3번째).
A:n-마지막 유형(들)
상위 요소에서 A 요소의 끝에서 n번째 요소를 선택합니다.
가상 아이템
문서의 특정 부분을 스타일링하기 위한 요소를 가상으로 생성 및 추가(가상 클래스는 웹 문서에서 원하는 요소를 선택)
Q. 왜 가상아이템을 만들고 사용해야 하나요?
A. HTML 문서를 변경하지 않고도 스타일을 변경하거나 내용을 추가할 수 있기 때문에 HTML 문서의 구조와 스타일을 분리하는 것이 유용합니다.
::첫 번째 줄
지정된 요소의 첫 번째 행에 스타일 적용
::첫 편지
지정된 요소의 첫 번째 줄의 첫 글자에 스타일을 적용합니다.
:: 전, 후
지정된 요소의 내용 전후에 스타일을 적용합니다.
(예: 텍스트는 HTML 태그 안에 표시되지 않지만 스타일로 표현할 수 있음)