• 목록

CSS 가상 클래스 & 가상 요소

1. 링크 및 인터랙션 가상 클래스 (LVHA 순서)

링크 상태는 CSS의 캐스케이딩(우선순위) 특성상 아래의 순서를 반드시 지켜야 스타일이 의도치 않게 덮어씌워지는 것을 방지할 수 있습니다.

1. :link: 아직 방문하지 않은 기본 링크 상태

2. :visited: 사용자가 이미 방문한 링크 상태

3. :hover: 요소 위에 마우스 커서를 올린 상태

4. :focus: 요소가 키보드 탭이나 클릭으로 포커스를 받은 상태

5. :active: 요소를 마우스로 클릭하고 있는(누르고 있는) 순간의 상태

2. 구조적 가상 클래스 (문서 내 위치 순서)

HTML 문서 내에서 요소가 배치된 물리적 순서나 관계를 기준으로 선택합니다.

1. :first-child: 부모의 첫 번째 자식 요소

2. :nth-child(n): 앞에서부터 n번째 자식 요소 (2n은 짝수, 2n-1은 홀수)

3. :nth-last-child(n): 뒤에서부터 n번째 자식 요소

4. :last-child: 부모의 마지막 자식 요소

5. :only-child: 부모 내에서 유일한 자식 요소일 때

6. :not(selector): 특정 선택자를 제외한 나머지 모든 요소

3. 폼(Form) 요소 상태 가상 클래스

사용자가 데이터를 입력할 때 발생하는 논리적 흐름에 따른 상태입니다.

1. :enabled / :disabled: 요소의 사용 가능 또는 비활성화 여부

2. :read-only / :read-write: 읽기 전용 여부

3. :checked: 라디오 버튼이나 체크박스가 선택된 상태

4. :required / :optional: 필수 입력 항목 여부

5. :valid / :invalid: 입력값의 형식(이메일, 숫자 등) 유효성 여부

4. 요약 및 실무 적용 예시

5. 가상 요소 (Pseudo-elements)

HTML 태그를 직접 수정하지 않고 CSS만으로 새로운 디자인 요소를 삽입합니다.

• ::before: 요소의 앞에 가상 컨텐츠 삽입 (예: 메뉴 앞 아이콘)

• ::after: 요소의 뒤에 가상 컨텐츠 삽입 (예: 링크 뒤 화살표, 구분선)

• 주의: 반드시 content: ""; 속성을 써야 화면에 나타납니다.

6. 최상위 선택자 (:root)와 변수/함수

:root는 사이트 전체에 적용될 **'전역 변수'**를 저장하는 창고 역할을 합니다.

• 변수 선언 (공간 만들기): :root 안에 --로 시작하는 이름을 만들고 값을 저장합니다.

  예: --main-color: #ff0000; (메인 색상을 빨강으로 변수화)

• 
  

• var() 함수 (불러오기): 저장된 변수를 가져다 쓸 때는 var()라는 함수를 사용합니다.

  예: color: var(--main-color); (함수를 호출해 변수값을 적용)

• 
  

• calc() 함수 (계산하기): 반응형 레이아웃에서 수치를 계산할 때 사용합니다.

  예: width: calc(100% - 50px); (함수를 이용해 가변적인 너비 계산)

왜 순서가 중요한가요?

만약 :active를 :hover보다 앞에 작성하면, 버튼을 클릭하는 순간에도 마우스는 여전히 버튼 위에(:hover) 있기 때문에 

뒤에 있는 :hover 스타일이 :active 스타일을 덮어버려 클릭 효과가 나타나지 않게 됩니다. 

따라서 더 구체적인 사용자 동작일수록 나중에 선언하는 것이 원칙입니다.

• 목록