[CSS3]가상 클래스 선택자: CSS 디자인의 비밀 키

가상 클래스 선택자는 CSS 스타일링을 더욱 다채롭게 만들어주는 도구입니다. 이들은 HTML 요소의 특정 상태를 선택하여 스타일을 적용하며, 사용자 상호작용이나 요소의 구조에 따라 동적으로 스타일을 변경할 수 있게 합니다.

≣ 목차

• 링크 가상 클래스 선택자✅
• 동적 클래스 선택자💃
• 입력 요소 가상 클래스 선택자✍
• 구조적 가상 클래스 선택자👩‍👩‍👧‍👧
• 선택자를 활용한 예시🌈
• 핵심 내용👀

링크 가상 클래스 선택자✅

링크 가상 선택자는 웹 페이지의 링크에 스타일을 적용할 때 사용됩니다. 이 선택자들은 링크의 상태에 따라 다른 스타일을 지정할 수 있게 해 줍니다. 주로 다음과 같은 상태를 다룹니다.

:link

• 방문하지 않은 링크에 적용됩니다.
• 사용자가 해당 링크를 방문하기 전에 적용되는 스타일을 지정할 때 사용됩니다.
• 예를 들어, 사용자가 아직 방문하지 않은 링크의 색상을 변경하거나 효과를 추가하는 데 사용될 수 있습니다.

:visited

• 이미 방문한 링크에 적용됩니다.
• 사용자가 이미 방문한 링크를 식별하기 위해 사용됩니다.
• 예를 들어, 이미 방문한 링크의 색상을 변경하여 사용자에게 어디를 이미 방문했는지 시각적으로 알려줄 수 있습니다.

링크 가상 클래스 선택자 예제

방문하지 않은 링크는 밑줄이 없는 파란색으로, 이미 방문한 링크에는 밑줄이 있는 보라색으로 스타일이 적용됩니다.

/* 방문하지 않은 링크에 대한 스타일 */
a:link {
    color: #0066cc; /* 링크 색상 */
    text-decoration: none; /* 밑줄 제거 */
}

/* 이미 방문한 링크에 대한 스타일 */
a:visited {
    color: #660099; /* 방문한 링크 색상 */
    text-decoration: underline; /* 밑줄 추가 */
}

이러한 가상 선택자를 사용하여 방문하지 않은 링크와 이미 방문한 링크에 대해 서로 다른 스타일을 적용함으로써 사용자 경험을 향상할 수 있습니다. 예를 들어, 사용자가 방문한 링크와 방문하지 않은 링크를 구분하여 사용자가 이미 방문한 링크를 쉽게 찾을 수 있도록 도와줄 수 있습니다.

동적 클래스 선택자💃

동적 가상 클래스 선택자는 사용자의 상호작용에 따라 요소의 상태를 변경하여 스타일을 적용하는 데 사용됩니다. 이를 통해 마우스 호버, 클릭 등의 상황에서 요소의 스타일을 동적으로 변경할 수 있습니다.

:hover

:hover 가상 클래스 선택자는 마우스가 요소 위로 올라갔을 때 적용됩니다. 이를 이용하면 요소에 호버 효과를 추가할 수 있습니다. 주로 링크나 버튼 등의 요소에 사용되며, 마우스를 올리면 스타일이 변경됩니다.

button:hover {
    background-color: #FF5733; /* 호버 시 배경색 변경 */
    color: #ffffff; /* 호버 시 글자색 변경 */
    cursor: pointer; /* 마우스 커서 모양 변경 */
}

:active

:active 가상 클래스 선택자는 요소가 활성화되었을 때(클릭되었을 때) 적용됩니다. 주로 버튼이나 링크 클릭 시에 사용되며, 클릭하는 동안의 스타일을 변경할 수 있습니다.

button:active {
    transform: translateY(2px); /* 클릭 시 요소를 아래로 이동 */
}

이러한 동적 가상 클래스 선택자를 활용하면 사용자와의 인터랙션에 따라 웹 요소의 모습을 동적으로 변화시킬 수 있어 사용자 경험을 향상하는 데 도움이 됩니다.

입력 요소 가상 클래스 선택자✍

입력 요소 가상 클래스 선택자는 HTML의 입력 요소들의 특정 상태에 따라 스타일을 적용하는 데 사용됩니다. 이들 선택자는 입력 요소가 사용자 상호작용에 의해 변할 때 적용되는데, 예를 들어 사용자가 텍스트 필드를 클릭하거나 포커스를 주거나, 체크박스를 선택하거나 해제할 때 등의 상황에 적용됩니다.
입력 요소는 사용자가 텍스트를 입력하는 input 태그와 textarea 태그로 생성됩니다. 상호작용 요소는 입력 요소와 체크박스를 포함하여 모든 상호작용이 가능한 요소를 의미합니다. 체크박스는 input 태그의 type 속성값이 checkbox인 요소를 말합니다.
입력 요소와 관련된 내용을 더 알고 싶다면 아래 포스팅을 참고해 주세요😁

[HTML5]HTML form 완벽 가이드: form 관련 태그, 필수 속성부터 고급 활용까지

입력 요소 가상 클래스 선택자는주로 다음과 같은 상태를 다룹니다.

:focus

• 입력 요소가 포커스를 받았을 때 적용됩니다.
• 사용자가 해당 입력 요소를 클릭하거나 탭 키로 포커스를 주었을 때 적용됩니다.

input:focus {
  border-color: #00ff00;
}

위 코드는 입력 양식(input)에 초점이 맞춰졌을 때, 입력 양식의 테두리 색상을 초록색으로 변경합니다.

:checked

• 체크 상태인 입력 요소에 적용됩니다. (예: 체크박스, 라디오 버튼)
• 사용자가 해당 입력 요소를 선택했을 때 적용됩니다.

input[type="checkbox"]:checked + label {
  text-decoration: line-through;
}

위 코드는 체크박스(checkbox)가 선택되었을 때, 해당 체크박스와 연결된 라벨(label)의 텍스트에 취소선을 추가합니다.

:disabled

• 비활성화된 입력 요소에 적용됩니다.
• 해당 입력 요소가 비활성화되어 있을 때 적용됩니다.

input:disabled {
  opacity: 0.5;
}

입력 양식이 비활성화되었을 때, 입력 양식의 불투명도(opacity)를 0.5로 설정하는 코드입니다.

:enabled

• 활성화된 입력 요소에 적용됩니다.
• 해당 입력 요소가 활성화되어 있을 때 적용됩니다.

input:enabled {
  background-color: #e0e0e0;
}

입력 양식이 활성화되었을 때, 입력 양식의 배경색을 회색으로 설정하는 CSS 코드입니다.

이러한 가상 클래스 선택자를 사용하여 입력 요소의 다양한 상태에 따라 스타일을 적용함으로써 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다.

구조적 가상 클래스 선택자👩‍

구조적 가상 클래스 선택자는 HTML 문서의 구조를 기반으로 다른 태그와의 관계에 따라 특정 요소를 선택하는 CSS 선택자입니다.

선택자	설명
:first-child	부모 요소의 첫번째 자식 요소를 선택자로 지정
:last-child	부모 요소의 마지막 자식 요소를 선택자로 지정
:nth-child(n)	부모 요소의 n번째 자식 요소를 선택자로 지정
:nth-last-child(n)	뒤에서부터 n번째 자식 요소를 선택자로 지정
:nth-of-type(n)	형제요소 중 n번째 요소를 선택자로 지정
:nth-last-of-type(n)	뒤에서부터 형제요소 중 n번째 요소를 선택자로 지정
:first-of-type(n)	첫번째로 등장하는 요소를 선택자로 지정
:last-of-type(n)	마지막으로 등장하는 요소를 선택자로 지정

nth-child(n)와 nth-of-type(n)의 차이점

nth-child(n)

• nth-child(n)은 부모 요소의 모든 자식 요소 중에서 n번째 요소를 선택합니다.
• HTML 구조에 관계없이 모든 자식 요소 중에서 순서에 따라 선택합니다.
• 예를 들어, ul li:nth-child(2)는 ul 안에 있는 모든 li 중에서 두 번째 li 요소를 선택합니다. 이때 ul의 자식이 아니라 그냥 li의 순서를 따릅니다.

nth-of-type(n)

• nth-of-type(n)은 부모 요소의 특정 유형(type)의 자식 요소 중에서 n번째 요소를 선택합니다.
• 특정 유형(type)의 요소들 중에서 순서에 따라 선택합니다.
• 예를 들어, ul li:nth-of-type(2)는 ul 안에 있는 li 중에서 두 번째 li 요소를 선택합니다. 여기서 중요한 점은 ul 안에서의 li 요소 중에서 순서를 따릅니다.

간단히 말해서, nth-child(n)은 모든 자식 요소 중에서 순서를 따라 선택하는 반면, nth-of-type(n)은 특정 유형(type)의 자식 요소 중에서 순서를 따라 선택합니다.

구조적 가상 클래스 선택자 예제

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Structural Pseudo-class Selectors Example</title>
<style>
/* 첫 번째 자식 요소에 스타일 적용 */
ul li:first-child {
    color: blue;
}

/* 마지막 자식 요소에 스타일 적용 */
ul li:last-child {
    color: red;
}

/* 짝수 번째 자식 요소에 스타일 적용 */
ul li:nth-child(even) {
    background-color: lightgray;
}

/* 홀수 번째 자식 요소에 스타일 적용 */
ul li:nth-child(odd) {
    background-color: lightblue;
}

/* 두 번째 자식 요소부터 다섯 번째 자식 요소까지에 스타일 적용 */
ul li:nth-child(n+2):nth-child(-n+5) {
    font-weight: bold;
}

/* 유일한 자식 요소에 스타일 적용 */
div:only-child {
    border: 1px solid black;
}
</style>
</head>
<body>

<ul>
    <li>첫 번째</li>
    <li>두 번째</li>
    <li>세 번째</li>
    <li>네 번째</li>
    <li>다섯 번째</li>
    <li>여섯 번째</li>
</ul>

<div>
    <p>유일한 자식 요소입니다.</p>
</div>

</body>
</html>

선택자를 활용한 예시🌈

링크 스타일링

/* 링크에 호버 효과 추가 */
a:hover {
    color: #FF5733; /* 호버 시 글자 색상 변경 */
    text-decoration: underline; /* 호버 시 밑줄 추가 */
}

폼 요소 스타일링

/* 입력 요소에 포커스 효과 추가 */
input:focus {
    border: 2px solid #4CAF50; /* 포커스 시 테두리 색상 변경 */
    background-color: #f0f0f0; /* 포커스 시 배경색 변경 */
}

리스트 스타일링

/* 리스트 아이템에 스타일 적용 */
ul li:nth-child(odd) {
    background-color: #f2f2f2; /* 홀수 번째 리스트 아이템 배경색 변경 */
}
ul li:nth-child(even) {
    background-color: #dddddd; /* 짝수 번째 리스트 아이템 배경색 변경 */
}

핵심 내용👀