[필기] CSS 기초 (5) - 반응웹을 위한 가상 클래스 & 가상 요소

가상 클래스

짐코딩 강의 클릭

 

 

chatGTP

가상 클래스는 CSS에서 요소의 특정 상태나 위치에 스타일을 적용하는 데 사용되는 클래스입니다. 요소의 상태에 따라 스타일을 다르게 적용할 수 있으므로 다양한 시각적 효과를 만드는 데에 유용합니다. 대표적인 가상 클래스들을 아래에 정리해드리겠습니다:

1. `:hover`:
   - 요소가 마우스 포인터 위에 올라갈 때의 상태를 나타냅니다.
   - 주로 링크나 버튼에 사용하여 마우스를 올렸을 때 스타일을 변경하는 데에 사용됩니다.

2. `:active`:
   - 요소가 마우스로 클릭되었을 때의 상태를 나타냅니다.
   - 주로 버튼이나 클릭 가능한 요소에 사용하여 클릭될 때의 시각적 효과를 적용하는 데에 사용됩니다.

3. `:focus`:
   - 요소가 포커스되었을 때의 상태를 나타냅니다.
   - 주로 입력 폼 요소나 링크에 사용하여 포커스되었을 때 스타일을 변경하는 데에 사용됩니다.

4. `:first-child`:
   - 요소의 형제 중 첫 번째 요소일 때의 상태를 나타냅니다.
   - 주로 리스트의 첫 번째 아이템 등에 사용하여 첫 번째 요소에 스타일을 적용하는 데에 사용됩니다.

5. `:last-child`:
   - 요소의 형제 중 마지막 요소일 때의 상태를 나타냅니다.
   - 주로 리스트의 마지막 아이템 등에 사용하여 마지막 요소에 스타일을 적용하는 데에 사용됩니다.

6. `:nth-child()`:
   - 요소의 형제 중 특정 순서의 요소일 때의 상태를 나타냅니다.
   - `:nth-child(n)`는 모든 요소를 선택합니다. `:nth-child(odd)`는 홀수 번째 요소를 선택하고, `:nth-child(even)`는 짝수 번째 요소를 선택합니다.

7. `:nth-of-type()`:
   - 요소의 태그 이름에 따라 특정 순서의 요소일 때의 상태를 나타냅니다.
   - `:nth-of-type(n)`는 모든 요소를 선택합니다. `:nth-of-type(odd)`는 홀수 번째 요소를 선택하고, `:nth-of-type(even)`는 짝수 번째 요소를 선택합니다.

8. `:not()`:
   - 지정된 선택자와 일치하지 않는 요소를 선택합니다.
   - `:not(.classname)`는 `classname` 클래스를 가지고 있지 않은 요소를 선택합니다.

위의 가상 클래스들은 주요한 가상 클래스 중 일부이며, CSS를 활용하여 다양한 상태에 따라 스타일을 다르게 적용할 수 있게 해줍니다. 이를 통해 보다 다양하고 흥미로운 디자인을 구현할 수 있습니다.

---

가상 요소

가상요소 짐코딩 강의

 

 

가상요소는 CSS에서 요소의 특정 부분에 스타일을 적용하는 데 사용되는 요소입니다. 가상 요소는 일반적인 HTML 요소와는 다르게 HTML에 직접 존재하지 않지만 CSS를 사용하여 선택하고 스타일을 적용할 수 있습니다. 대표적인 가상 요소들을 아래에 정리해드리겠습니다:

1. `::before`:
   - `::before` 가상 요소는 선택한 요소의 내용(content)의 앞에 콘텐츠를 생성합니다.
   - 주로 데코레이션 요소나 아이콘을 추가하는 데에 사용됩니다.

2. `::after`:
   - `::after` 가상 요소는 선택한 요소의 내용(content)의 뒤에 콘텐츠를 생성합니다.
   - 주로 데코레이션 요소나 아이콘을 추가하는 데에 사용됩니다.

3. `::first-line`:
   - `::first-line` 가상 요소는 선택한 요소의 첫 번째 줄에 스타일을 적용합니다.
   - 주로 텍스트 스타일링에 사용되며, 폰트, 색상, 간격 등을 조정하는 데에 활용됩니다.

4. `::first-letter`:
   - `::first-letter` 가상 요소는 선택한 요소의 첫 번째 글자에 스타일을 적용합니다.
   - 주로 텍스트의 첫 글자를 강조하거나 특별한 스타일을 적용하는 데에 사용됩니다.

5. `::selection`:
   - `::selection` 가상 요소는 사용자가 텍스트를 선택할 때의 상태를 나타냅니다.
   - 선택된 텍스트에 스타일을 적용하는 데에 사용됩니다.

이외에도 `::before`와 `::after`를 활용하여 요소를 동적으로 생성하고 디자인하는데에 다양하게 응용할 수 있습니다. 가상 요소를 적절히 사용하면 더욱 다양하고 효과적인 디자인을 구현할 수 있습니다.