의사소문자(가상 요소)의 필수 지식

카테고리

디자인

서브카테고리

UX 디자인

대상자

• 웹 개발자 및 디자이너 (CSS 기초 지식 보유자)
• 난이도: 중급 (CSS 선택자 및 스타일링 기법 이해 필요)

핵심 요약

• 의사소문자(::)는 텍스트나 요소의 특정 부분(예: ::placeholder, ::before)을 선택하는 CSS 선택자
• ::placeholder와 같은 의사소문자는 기본 요소 스타일링과 구분되어 적용 가능
• ::before, ::after 등은 내용 삽입을 위한 주요 의사소문자

섹션별 세부 요약

1. 의사소문자 정의 및 예시

• 의사소문자는 HTML 요소의 보조적/비가시적 부분을 선택하는 CSS 선택자
• 예시: input::placeholder → 입력 필드의 placeholder 텍스트만 스타일링 가능
• 기본 요소 스타일링과 구분되어 적용 (예: input의 color는 placeholder에 직접 적용되지 않음)

2. 의사소문자 목록 및 특징

• ::after, ::before → 요소 내부에 내용 삽입 (⭐⭐⭐⭐⭐)
• ::selection → 사용자가 선택한 텍스트 스타일링 (⭐⭐⭐⭐⭐)
• ::file-selector-button → 파일 선택 버튼 스타일링 (⭐⭐⭐⭐)
• ::marker → 목록의 불릿/번호 스타일링 (⭐⭐⭐⭐)

3. 우선순위 및 참고 자료

• 의사소문자 우선순위는 개발자 주관적 평가 (예: ::after ⭐⭐⭐⭐⭐, ::cue ⭐⭐)
• 공식 문서: MDN 의사소문자 참고

결론

• 의사소문자를 사용하여 상세한 UI 커스터마이징 가능 (예: ::selection, ::placeholder)
• MDN 문서에서 전체 목록 확인 후, 필요한 의사소문자만 선택적으로 적용
• ::before, ::after는 내용 삽입에, ::selection은 사용자 선택 텍스트에 집중 활용