yoora's lab

- 가상 클래스 (Pseudo-class, :)

정의 :

HTML 문서 구조(DOM)에는 명시적으로 존재하지 않지만, 요소의 특정 상태(예: 사용자 상호작용)나 조건(예: 문서 내 위치)을 만족할 때 해당 요소를 선택하는 선택자

역할 :

사용자 동작(예: hover, focus)이나 문서 구조(예: 첫 번째 요소, 마지막 요소)에 따라 스타일을 동적으로 적용. 요소 자체를 변경하지 않고 상태를 기반으로 필터링.

문법 :

단일 콜론(:)사용.예::hover, :nth-child(2n).

적용대상 :

이미 DOM에 존재하는 실제 요소의 상태나 위치를 나타냄. 가상 클래스는 요소를 선택하는데 초점을 맞추며, 새로운 콘텐츠를 생성하지 않음.

- 가상 요소 (Pseudo-element, ::)

정의 :

실제 HTML에 없는 가상의 요소를 생성하거나, 기존 요소의 특정 부분을 선택하여 스타일을 적용하는 선택자.

역할 :

기존 요소의 일부분(예: 첫글자, 첫 줄)이나 앞/뒤에 새로운 콘텐츠(예: 아이콘, 장식)를 추가하여 시각적으로 확장.

문법 :

이중 콜론:: 사용.CSS3부터 권장 표준으로 채택; CSS2 시절에는 단일 콜론으로 호환 가능하나, 이제는::를 사용하는 것이 좋음.

적용대상 :

요소의 일부 콘텐츠나 새로 생성된 가상 콘텐츠.가상 요소는 DOM 트리에 실제 노드로 추가되지 않으며, CSS렌더링 계층에서만 처리됨. 따라서 JavaScript로 직접 접근 불가

1. 브라우저 호환성

• :: 문법은 CSS3(2011년)부터 표준이며, 2025년 기준으로 Chrome, Firefox, Safari, Edge 등 주요 브라우저에서 100% 지원.
• 구형 브라우저(예: IE8이하) 지원 시 :before 같은 단일 콜론 사용.
• 일부 가상 요소(예: ::marker) 는 비교적 최근 부터 지원되므로, 폴백 스타일 고려 필요.

2. 접근성(ARIA)

• ::before, ::after에 넣은 content는 스크린 리더(예: NVDA, VoiceOver)가 무시하거나 선택적으로 읽을 수 있음. 정보는 실제 HTML 요소로 구현 필요.
• ARIA 속성을 가상 요소에 직접 적용 불가; 대신 부모 요소에 적용.

3. 선택자 우선순위

• 가상 클래스와 가상 요소 모두 기본 선택자의 우선순위를 따름. (예: #id:hover는 클래스보다 우선순위가 높음).

4. content 필수 여부

• ::before, ::after는 반드시 content 속성이 있어야 생성됨. (빈 문자열 가능)
• content에 URL(이미지)이나 attr(HTML 속성 값) 사용 가능, 동적 콘텐츠 생성에 유용.

5. 주의: 제한 사항

• 가상 요소는 인라인 요소(예: <span>)에 적용 시 블록처럼 동작할 수 있음.
• 가상 클래스 중 일부(예: ):not()는 복합 선택자로 확장 가능.
• 성능: 과도한 가상 요소 사용은 렌더링 비용증가; 간단한 스타일링에 한정 필요.