Categories: CSS

CSS 가상 클래스와 가상 요소 알아보기

css

CSS 가상 클래스와 가상 요소란?

CSS 가상 클래스와 가상 요소는 웹 페이지의 스타일링을 더 다양하고 동적으로 만들 수 있는 기능입니다. 마우스 호버, 클릭 등의 상태에 반응하거나, 특정 부분에 스타일을 적용하는 데 사용됩니다.

CSS 가상 클래스와 가상 요소의 속성

가상 클래스 (Pseudo-classes)

가상 클래스는 요소의 특정 상태나 위치를 선택하여 스타일을 적용하는 데 사용됩니다.

:hover: 마우스가 요소 위로 이동했을 때 스타일을 적용합니다.
:active: 마우스 클릭하고 있는 동안의 상태를 나타냅니다.
:focus: 요소가 포커스를 받았을 때의 상태를 나타냅니다.
:first-child: 부모 요소의 첫 번째 자식을 선택합니다.
:last-child: 부모 요소의 마지막 자식을 선택합니다.
:nth-child(n): n번째 자식을 선택합니다.
:nth-last-child(n): 뒤에서부터 n번째 자식을 선택합니다.
:nth-of-type(n): 특정 유형의 요소 중에서 n번째 요소를 선택합니다.
:nth-last-of-type(n): 뒤에서부터 특정 유형의 요소 중에서 n번째 요소를 선택합니다.
:only-child: 부모 요소의 유일한 자식을 선택합니다.
:only-of-type: 부모 요소 내에서 유일한 특정 유형의 요소를 선택합니다.

가상 요소 (Pseudo-elements)

가상 요소는 요소의 특정 부분에 스타일을 적용하는 데 사용됩니다.

::before: 선택한 요소의 내부 앞에 콘텐츠를 생성합니다.
::after: 선택한 요소의 내부 뒤에 콘텐츠를 생성합니다.
::first-line: 선택한 요소의 첫 번째 줄에 스타일을 적용합니다.
::first-letter: 선택한 요소의 첫 번째 글자에 스타일을 적용합니다.

CSS 가상 클래스와 가상 요소의 예제

가상 클래스와 가상 요소의 예제입니다.

:hover

마우스가 요소 위로 이동했을 때 스타일을 적용합니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 기본 스타일 */
    .box {
      width: 200px;
      height: 100px;
      background-color: purple;
      color: white;
      text-align: center;
      line-height: 100px;
    }
    /* :hover 상태에서의 스타일 변경 */
    .box:hover {
      background-color: red;
    }
  </style>
  <title>:hover 예제</title>
</head>
<body>
  <div class="box">
    Hover
  </div>
</body>
</html>

HTML

:hover 예제

Hover

마우스를 박스 위에 올리면 스타일이 변경됩니다.

:active

마우스 클릭하고 있는 동안의 상태를 나타냅니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 기본 스타일 */
    .click-button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: purple;
      color: white;
      border: none;
      cursor: pointer;
    }
    /* :active 상태에서의 스타일 변경 */
    .click-button:active {
      background-color: red;
    }
  </style>
  <title>:active 예제</title>
</head>
<body>
  <button class="click-button">클릭해보세요!</button>
</body>
</html>

HTML

:active 예제

마우스를 클릭하고 있는 동안 스타일이 변경됩니다

:focus

요소가 포커스를 받았을 때의 상태를 나타냅니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 기본 스타일 */
    .focus-input {
      padding: 10px;
      font-size: 16px;
      border: 2px solid black;
    }
    /* :focus 상태에서의 스타일 변경 */
    .focus-input:focus {
      background-color: violet;
    }
  </style>
  <title>:focus 예제</title>
</head>
<body>
  <label for="username">사용자 이름:</label>
  <input type="text" id="username" class="focus-input" placeholder="사용자 이름을 입력하세요">
</body>
</html>

HTML

input 요소가 포커스를 받았을 때 스타일이 변경됩니다.

::before 와 ::after

::before 는 선택한 요소의 내부 앞에 콘텐츠를 생성합니다.
::after 는 선택한 요소의 내부 뒤에 콘텐츠를 생성합니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 기본 스타일 */
    .card {
      position: relative;
      width: 300px;
      height: 200px;
      background-color: #f2f2f2;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    /* ::before로 생성 */
    .card::before {
      content: "\2019"; /* 생성할 콘텐츠 설정 - 유니코드로 표현 */
      font-size: 3em;
      color: purple;
      position: absolute;
      top: 10px;
      left: 10px;
    }
    /* ::after로 생성 */
    .card::after {
      content: "INFO"; /* 생성할 콘텐츠 설정 */
      font-size: 1.5em;
      color: purple;
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
  </style>
  <title>::before, ::after 예제</title>
</head>
<body>
  <div class="card">
    이 카드는 ::before와 ::after를 사용하여 시작 부분에 작은 아이콘, 
    끝 부분에 INFO 텍스트를 만드는 예제입니다.
  </div>
</body>
</html>