CodeGym /행동 /Frontend SELF KO /의사 클래스 결합

의사 클래스 결합

Frontend SELF KO

레벨 30 , 레슨 3

사용 가능

8.1 기본 개념

CSS에서 의사 클래스와 의사 요소를 결합하면 요소의 상태, 구조 및 내용에 따라 스타일을 적용할 수 있는 강력하고 유연한 선택자를 만들 수 있어. 덕분에 복잡하고 역동적인 스타일을 생성하게 되고, 사용자 인터페이스랑 웹 페이지랑 상호작용 경험을 향상시켜줘.

결합의 기초

의사 클래스

의사 클래스는 콜론 하나로 표시되고(:), 요소의 상태나 위치에 따라 적용돼. 예를 들면:

:hover — 요소에 마우스를 올렸을 때 적용됨
:first-child — 부모의 첫 번째 자식을 선택함

의사 요소

의사 요소는 두 개의 콜론(::)으로 표시되고, 요소의 일부분을 스타일링하거나 내용을 추가하는 데 사용돼. 예를 들면:

::before — 요소 앞에 내용을 추가함
::first-letter — 요소의 첫 글자를 스타일링함

결합하기

의사 클래스와 의사 요소는 결합해서 상태와 구조에 따라 스타일을 적용할 수 있는 복잡한 선택자를 만들 수 있어.

문법:

    
      선택자:의사클래스::의사요소 {
        속성: 값;
      }

8.2 상호작용을 위한 결합

예제 1: 마우스를 올렸을 때 첫 글자 스타일링하기

이 예제에서는 문단에 마우스를 올리면 첫 글자가 커지고 빨간색으로 변해:

CSS

    
      /* 문단에 마우스를 올릴 때 첫 번째 글자 스타일링 */

      p:hover::first-letter {
        font-size: 2em;
        color: #e74c3c;
      }

HTML

    
      <p>Hover over this paragraph to see the first letter change.</p>

예제 2: 포커스가 있을 때 링크 앞에 내용 추가하기

이 예제에서는 링크에 포커스가 있을 때 링크 앞에 아이콘을 추가하고 파란색으로 변해:

CSS

    
      /* 포커스가 있을 때 링크 앞에 아이콘 추가 */

      a:focus::before {
        content: "🔗 ";
        color: #3498db;
      }

8.3 구조 스타일링을 위한 결합

예제 3: div 안의 첫 번째 문단에 내용 추가하기

이 예제에서는 div 안의 첫 번째 문단의 첫 줄을 굵게 하고 녹색으로 변해:

CSS

    
      /* div 안의 첫 번째 문단의 첫 줄 스타일링 */

      div p:first-child::first-line {
        font-weight: bold;
        color: #2ecc71;
      }

예제 4: 리스트의 마지막 요소 뒤에 장식 요소 추가하기

이 예제에서는 리스트의 마지막 요소 뒤에 장식 요소를 추가하고 빨간색으로 변해:

CSS

    
      /* 리스트의 마지막 요소 뒤에 장식 요소 추가 */

      ul li:last-child::after {
        content: "❦";
        display: inline-block;
        margin-left: 10px;
        color: #e74c3c;
      }

8.4 복잡한 조건을 위한 결합

예제 5: 짝수 리스트 요소에 마우스를 올렸을 때 스타일링하기

이 예제에서는 짝수 리스트 요소에 마우스를 올리면 밝은 회색 배경과 파란색 텍스트가 적용돼:

CSS

    
      /* 짝수 리스트 요소에 마우스를 올렸을 때 스타일링 */

      ul li:nth-child(even):hover {
        background-color: #f0f0f0;
        color: #3498db;
      }

예제 6: 방문한 상태의 활성 링크 스타일링하기

이 예제에서는 방문한 후 활성 상태인 링크를 주황색으로 변하고 밑줄을 추가해:

CSS

    
      /* 방문한 상태의 활성 링크 스타일링 */

      a:visited:active {
        color: #e67e22;
        text-decoration: underline;
      }

8.5 전체 구현 예제

CSS

    
      /* div 안의 첫 번째 문단의 첫 줄 스타일링 */

      div p:first-child::first-line {
        font-weight: bold;
        color: #2ecc71;
      }

      /* 리스트의 마지막 요소 뒤에 장식 요소 추가 */

      ul li:last-child::after {
        content: "❦";
        display: inline-block;
        margin-left: 10px;
        color: #e74c3c;
      }

      /* 짝수 리스트 요소에 마우스를 올렸을 때 스타일링 */

      ul li:nth-child(even):hover {
        background-color: #f0f0f0;
        color: #3498db;
      }

      /* 포커스가 있을 때 링크 앞에 아이콘 추가 */

      a:focus::before {
        content: "🔗 ";
        color: #3498db;
      }

      /* 문단에 마우스를 올릴 때 첫 번째 글자 스타일링 */

      p:hover::first-letter {
        font-size: 2em;
        color: #e74c3c;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>의사 클래스 및 의사 요소 결합 예제</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div>
            <p>이것은 div 안의 첫 번째 문단입니다.</p>
            <p>이것은 div 안의 두 번째 문단입니다.</p>
          </div>
          <ul>
            <li>리스트 요소 1</li>
            <li>리스트 요소 2</li>
            <li>리스트 요소 3</li>
            <li>리스트 요소 4</li>
          </ul>
          <a href="#">포커스가 있을 때 아이콘이 있는 링크</a>
          <p>첫 글자가 변하는 효과를 보려면 이 문단 위로 마우스를 올려보세요.</p>
        </body>
      </html>

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION