Pseudo-elements? Pseudo-classes?

CSS Pseudo-elements와 Pseudo-classes는 웹 디자인에서 특정 상황에 스타일을 적용하는 데 사용되는 강력한 기능입니다. 이들을 활용하면 일반적인 HTML 요소 외에도 스타일을 적용할 수 있습니다. 이번 글에서는 CSS Pseudo-elements와 Pseudo-classes에 대해 자세히 알아보고, 각각의 사용법과 예시를 살펴보겠습니다.

Pseudo-elements (가상 요소)

Pseudo-elements는 HTML 요소의 특정 부분을 선택하여 스타일을 적용하는 데 사용됩니다. 가상 요소는 콘텐츠를 생성하거나 선택한 요소의 특정 부분에 스타일을 적용할 수 있습니다.

1. ::before와 ::after
   ::before와 ::after 가상 요소는 선택한 요소의 내용의 앞과 뒤에 콘텐츠를 추가할 수 있습니다. 이를 활용하여 요소에 장식이나 아이콘을 추가할 수 있습니다.

.element::before {
  content: "Before content";
}

.element::after {
  content: "After content";
}

2. ::first-line와 ::first-letter
   ::first-line은 선택한 요소의 첫 번째 줄에 스타일을 적용하고, ::first-letter는 첫 번째 글자에 스타일을 적용합니다.

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 150%;
}

Pseudo-classes (가상 클래스)

Pseudo-classes는 특정 상태에 있는 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 예를 들어, 사용자의 동작에 따라 요소의 스타일을 변경할 수 있습니다.
1. :hover
:hover 가상 클래스는 요소에 마우스를 올렸을 때의 상태를 선택합니다. 이를 활용하여 링크나 버튼에 호버 효과를 적용할 수 있습니다.

a:hover {
  color: red;
}

2. :nth-child
   :nth-child 가상 클래스는 선택한 요소의 자식 요소 중에서 지정한 위치에 있는 요소를 선택합니다. 이를 활용하여 특정 위치에 있는 요소에 스타일을 적용할 수 있습니다.

ul li:nth-child(odd) {
  background-color: lightgray;
}

마치며

CSS Pseudo-elements와 Pseudo-classes는 웹 디자인에서 요소의 특정 부분이나 상태에 따라 스타일을 적용하는 데 유용한 도구입니다. 이를 활용하여 웹 페이지의 디자인을 더욱 다양하고 효과적으로 구성할 수 있습니다. 유연한 스타일링을 위해 Pseudo-elements와 Pseudo-classes를 적절히 활용해보세요.