의사 클래스 소개

1.1 의사 클래스

CSS의 의사 클래스는 특별한 키워드로, 선택자의 상태나 문서 트리 내 위치를 나타내기 위해 선택자에 추가돼. HTML 코드에 클래스나 아이디를 추가하지 않고도 요소의 상태나 다른 요소와의 관계를 기반으로 스타일링을 할 수 있도록 해줘.

의사 클래스의 기본 개념

1. 요소의 상태 정의하기:
   • 의사 클래스는 요소의 상태, 예를 들어 마우스 오버, 포커스 또는 활성화를 나타낼 수 있어
2. 요소의 위치 정의하기:
   • 의사 클래스는 부모 또는 다른 요소에 대한 요소의 위치, 예를 들어 첫 번째 또는 마지막 요소를 나타낼 수 있어
3. 특별한 경우와 논리적 그룹:
   • 의사 클래스는 첫 번째 요소 타입이나 홀수/짝수 요소와 같은 특별한 경우도 정의할 수 있어

의사 클래스 사용법

의사 클래스는 콜론(:)을 사용하여 선택자에 추가돼. 요소 선택자, 클래스, 아이디 및 다른 선택자와 함께 사용할 수 있어.

문법:

    
      셀렉터:의사클래스 {
        속성: 값;
      }
    
  

사용 예제

1. 의사 클래스를 사용한 요소 선택자

이 예제에서는 모든 첫 번째 단락(<p>)이 그 부모 요소 내에서 굵게 표시될 거야:

    
      p:first-of-type {
        font-weight: bold;
      }
    
  

2. 의사 클래스를 사용한 클래스 선택자

이 예제에서는 클래스 .button이 있는 모든 요소가 마우스 오버 시 배경색이 파란색으로 바뀔 거야:

    
      .button:hover {
        background-color: blue;
      }
    
  

3. 의사 클래스를 사용한 복합 선택자

이 예제에서는 클래스 .container가 있는 요소 내의 모든 짝수 단락(<p>)이 빨간 색으로 표시될 거야:

    
      .container > p:nth-child(2n) {
          color: red;
      }
    
  

1.2 의사 클래스와 그 적용 예제

1. 상태를 정의하는 의사 클래스

요소의 상태를 정의하는 의사 클래스는 사용자와의 상호작용이나 요소의 상태에 따라 스타일링을 변경할 수 있어.

    
      a:link {
        color: blue;
      }

      a:visited {
        color: purple;
      }

      a:hover {
        color: red;
      }

      a:active {
        color: green;
      }
    
  

2. 위치를 정의하는 의사 클래스

요소의 위치를 정의하는 의사 클래스는 DOM 구조 내 위치에 따라 요소에 스타일을 적용할 수 있게 해줘.

    
      li:first-child {
          font-style: italic;
      }

      li:last-child {
          font-style: italic;
      }

      li:nth-child(odd) {
          background-color: #f0f0f0;
      }

      li:nth-child(even) {
          background-color: #ffffff;
      }
    
  

3. 논리적 그룹을 위한 의사 클래스

이 의사 클래스들은 논리적 그룹이나 종류에 따라 요소를 스타일링할 수 있게 해줘.

    
      input:checked {
        background-color: yellow;
      }

      input:disabled {
        background-color: grey;
      }

      input:enabled {
        background-color: white;
      }