WeniVooks

가상 클래스와 가상 요소 기초

CSS에서는 기본 선택자 외에도 특별한 상태나 위치를 지정할 수 있는 가상 클래스와 가상 요소라는 강력한 도구를 제공합니다. 이들을 활용하면 HTML 구조를 변경하지 않고도 더욱 세밀하고 동적인 스타일링이 가능해집니다.

1. 가상 클래스 선택자

가상 클래스 선택자(Pseudo-class selectors)는 요소의 특정 상태를 선택할 수 있게 해줍니다. 이들은 콜론(:)을 사용하여 표현됩니다.

1.1 동적 가상 클래스

동적 가상 클래스는 사용자의 동작에 따라 변화하는 상태를 선택합니다.

1.1.1 :link

아직 방문하지 않은 링크를 선택합니다.

1.1.2 :visited

이미 방문한 링크를 선택합니다.

1.1.3 :hover

마우스 포인터가 올라간 요소를 선택합니다.

1.1.4 :active

마우스로 클릭하고 있는 요소를 선택합니다.

1.1.5 :focus

현재 초점을 가진 요소를 선택합니다.

이러한 동적 가상 클래스들을 조합하여 사용하면 사용자 상호작용에 따른 다양한 시각적 피드백을 제공할 수 있습니다. 예를 들어, 링크에 이 모든 상태를 적용할 수 있습니다:

이처럼 동적 가상 클래스는 사용자의 동작에 따라 요소의 스타일을 변경할 수 있습니다.

1.2 구조적 가상 선택자

구조적 가상 선택자는 문서 구조 내에서 요소의 위치에 따라 선택합니다.

1.2.1 :first-child와 :last-child

:first-child는 형제 요소 그룹 중 첫 번째 요소를, :last-child는 마지막 요소를 선택합니다.

1.2.2 :nth-child

부모 요소 내의 모든 자식 요소 중에서 지정된 순서에 있는 요소를 선택합니다. 이 선택자는 요소의 타입과 관계없이 순서만을 고려합니다.

() 선택자는 괄호 안에 다양한 형태의 값을 사용할 수 있어 매우 유연합니다. 다음은 () 괄호 안에 사용할 수 있는 값의 종류입니다.

• 정수값: 특정 순서의 요소를 선택
• 키워드
  • odd: 홀수 번째 요소 선택
  • even: 짝수 번째 요소 선택
• 수식: an+b 형태의 수식 사용 가능 (여기서 n은 0부터 시작하는 정수, a와 b는 정수값)
• 음수값: 요소의 뒷부분이나 특정 범위의 요소들을 선택할 때 유용
  • 예: (-n+3) - 처음 3개 요소 선택

1.2.3 :nth-of-type

부모 요소 내에서 같은 타입의 형제 요소 중 지정된 순서에 있는 요소를 선택합니다. 이 선택자는 요소의 타입을 고려하여 순서를 계산합니다.

1.2.4 :only-of-type

:only-of-type는 동일한 유형의 형제가 없는, 형제 요소 중 유일하게 사용된 태그를 선택합니다.

1.2.5 :not

은 부정 선택자로, 특정 선택자를 제외한 요소를 선택합니다.

1.2.6 :root

는 문서 트리의 루트 요소를 선택합니다. HTML에서는 요소를 가리킵니다. 이는 전역 CSS 변수를 선언할 때 주로 사용됩니다. CSS 변수는 --로 시작하는 이름을 가지며, var() 함수를 사용하여 값을 참조할 수 있습니다. 이를 통해 스타일을 더 쉽게 재사용하고 관리할 수 있습니다.

CSS Variables(CSS 사용자 정의 속성)는 특히 브랜드 디자인 시스템을 구축할 때 매우 유용하며, 일관된 스타일을 유지하고 유지보수를 용이하게 합니다. 브랜드 디자인 시스템을 구축할 때는 주로 색상 시스템, 그리드 시스템, 아이콘 시스템 등의 카테고리로 나누어 변수를 관리할 수 있습니다.

CSS Variables의 주요 장점으로는 우선 유지보수성 향상을 들 수 있습니다. 스타일 값을 한 곳에서 중앙 집중식으로 관리할 수 있어, 전체적인 디자인 일관성을 유지하기 쉽고 값을 변경할 때도 한 곳만 수정하면 됩니다. 두 번째로 JavaScript를 통해 동적으로 값을 변경할 수 있어 실시간 테마 변경이나 다크 모드 구현이 용이합니다. 세 번째로 calc() 함수와 함께 사용하여 동적 계산이 가능하므로 반응형 디자인 구현에 효과적입니다.

1.2.7 :is() and :where()

:is()와 :where()는 여러 개의 선택자를 한꺼번에 지정할 수 있는 간편한 방법을 제공합니다. :is()는 여러 개의 선택자를 지정할 때 사용하며, :where()는 :is()와 유사하지만, 우선순위가 낮습니다.

여러 개의 선택자를 선택하는 것은 기존에도 아래와 같은 방법으로 가능했습니다.

h1,
h2,
h3 {
  color: blue;
}

h1,
h2,
h3 {
  color: blue;
}

다만 만약 h1과 h2와 h3 안에 있는 요소를 선택하고 싶다면 아래와 같이 하나씩 선택자를 지정해야 했습니다.

h1 a,
h2 a,
h3 a {
  color: blue;
}

h1 a,
h2 a,
h3 a {
  color: blue;
}

이러한 경우 :is()를 사용하면 아래와 같이 간단하게 표현할 수 있습니다.

:is(h1, h2, h3) a {
  color: blue;
}

:is(h1, h2, h3) a {
  color: blue;
}

역시 익스플로러를 제외하고 대부분의 브라우저에서 지원하고 있으므로 충분히 실무에서 사용할 수 있습니다.

where()는 :is()와 유사하지만, 우선순위가 낮습니다. 아래 예제를 보며 is()와 where()를 동시에 사용했을 경우 어떻게 처리되는지 확인해 보도록 하겠습니다. 확인이 되었다면 is()를 삭제해 보세요.

1.2.8 :has()

:has()는 2022년에 도입된 의사 클래스입니다. 이 의사 클래스는 특정 요소가 자식 요소를 포함하고 있는지를 검사할 수 있게 해주며, CSS 선택자의 강력한 기능을 제공합니다. 다른 요소 안에 특정 요소가 포함되어 있는지 여부에 따라 스타일을 적용할 수 있어 매우 유용합니다.

예를 들어, 특정 요소가 자식으로 링크를 포함하고 있는 경우에만 스타일을 적용하고 싶을 때 사용할 수 있습니다. 아래 예시에서는 div 요소가 a 요소를 포함하고 있는 경우에만 배경색을 변경합니다.

이러한 구조적 가상 선택자들을 활용하면 HTML 구조를 변경하지 않고도 특정 위치의 요소들에 스타일을 적용할 수 있습니다. 이는 특히 반복적인 구조를 가진 리스트나 그리드 레이아웃에서 유용하게 사용될 수 있습니다.

2. 가상 요소

가상 요소(Pseudo-elements)는 말 그대로 가상의 요소를 만드는 것입니다. 선택한 요소의 특정 부분에 스타일을 적용할 수 있게 해줍니다. 이들은 이중 콜론(::)을 사용하여 표현됩니다.

2.1 ::before와 ::after

::before와 ::after는 선택한 요소의 내용 앞이나 뒤에 새로운 요소를 만들어 새로운 콘텐츠를 추가할 수 있게 해줍니다. 이들은 주로 content 속성과 짝을지어 장식적인 요소를 추가하거나, 기능적인 목적으로 사용됩니다. 빈태그 img br input 에는 적용할 수 없습니다.

2.2 ::placeholder

<input>과 <textarea> 요소의 플레이스홀더 텍스트에 스타일을 적용할 수 있게 해줍니다. 플레이스홀더는 사용자에게 입력 필드에 어떤 정보를 입력해야 하는지 안내하는 역할을 합니다.

입력 필드에 텍스트가 입력되면 플레이스홀더는 사라집니다. 접근성을 고려한다면 플레이스홀더에만 의존하지 말고 적절한 레이블도 함께 사용해야 합니다.