🖋️ 가상 클래스와 가상 요소로 구현하는 기능들

• 가상 클래스

  
  

  • :hover

    • 기능 : 요소에 마우스 올라갔을 때 Style 변경
    • 사용 이유 : 시각적으로 표현하여 UI의 인터랙티브성을 강화

      .button:hover {
         background-color: #007bff;
         color: white;
      }

      
      

  • :focus

    • 기능 : 요소가 포커스 됐을 때 Style 변경
    • 사용 이유 : 사용자가 키보드 또는 다른 입력 장치로 요소를 선택했을 때 이를 강조하여 접근성을 향상

      .input:focus {
         background-color: #007bff;
         box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
      }

      
      

  • :checked

    • 기능 : 체크박스나 라디오 버튼이 체크됐을 때 Style 변경
    • 사용 이유 : 사용자가 선택한 옵션을 시각적으로 강조

      .checkbox:checked + label {
         font-weight: bold;
      }

• 가상 요소

  
  

  • ::before 와 ::after

    • 기능 : 요소의 내용 전후에 콘텐츠를 삽입
    • 사용 이유

       1. 추가적인 HTML 마크업 없이 장식적 요소나 아이콘을 추가 가능
        2. 마크업을 간결하게 유지하고, 재사용성을 높이는 데 유용

      .link::before {
         content: '🔗'; /* content 는 비어도 필수로 작성 */
         margin-right: 8px;
      }

      
      

  • ::placeholder

    • 기능 : 입력 필드의 플레이스홀더 텍스트 스타일을 변경
    • 사용 이유 : 사용자에게 입력 기대값을 명확하게 전달하며, UI의 시각적 일관성을 유지

      .input::placeholder {
         color: #007bff;
         font-style: italic;
      }

      
      

  • ::first-letter , ::first-line

    • 기능 : 문단의 첫 글자나 첫 줄에 특별한 스타일을 적용
    • 사용 이유 : 콘텐츠의 가독성을 향상시키고, 텍스트에 시각적 관심을 끌기 위해 사용

      .article::first-letter {
         float: left;
         font-size: 200%;
         font-weight: bold;
      }

      
      

가상 요소 사용 예시

• 리스트 항목 앞에 커스텀 불릿 추가하기

  • 리스트 항목(li) 앞에 CSS만을 사용하여 커스텀 불릿(아이콘, 이미지, 텍스트 등)을 추가
  • 사용 이유

      1. 디자인에 맞는 커스텀 불릿을 쉽게 추가 가능
       2. 추가적인 HTML 마크업 없이 순수 CSS만으로 구현 가능

  • EX ) JSX 와 CSS CODE

     const CustomBulletList = () => {
      return (
         <ul className="custom-bullet-list">
           <li>리스트 항목 1</li>
           <li>리스트 항목 2</li>
           <li>리스트 항목 3</li>
         </ul>
        );
      };

    .custom-bullet-list li::before {
       content: '•'; /* 커스텀 불릿 텍스트 */
       color: red; /* 불릿 색상 */
       font-weight: bold; /* 불릿 스타일 */
       display: inline-block; /* 불릿을 인라인 블록 요소로 표시 */
       width: 1em; /* 불릿과 텍스트 간의 공간 */
       margin-left: -1em; /* 불릿 위치 조정 */
     }

• 입력 필드 포커스 시 테두리 아래에 애니메이션 효과 추가하기

  • 입력 필드에 포커스 됐을 때, 테두리 아래에 애니메이션 효과를 추가하여 사용자의 주의

  • 사용 이유

      1. 사용자 인터랙션에 시각적 피드백을 제공하여 UX를 향상
       2. 가상 요소를 사용하면, 추가적인 DOM 요소 없이도 이러한 효과를 구현

  • EX ) JSX 와 CSS CODE

     const AnimatedInput = () => {
        return <input type="text" className="animated-input" />;
      };

    .animated-input {
        position: relative;
        border-bottom: 2px solid #ccc; /* 기본 테두리 스타일 */
     }
     .animated-input:focus::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 2px;
        background-color: blue; /* 애니메이션 테두리 색상 */
        animation: animateBorder 0.5s forwards; /* 애니메이션 정의 */
      }
    
      @keyframes animateBorder {
        from { width: 0; }
        to { width: 100%; }
      }

• 링크 호버 시 밑줄 애니메이션 추가하기

  • 링크에 마우스를 올렸을 때 밑줄이 나타나는 애니메이션을 추가

  • 사용 이유

    • 링크에 대한 인터랙션을 더욱 명확하게 하고, 웹 페이지에 동적인 요소를 추가

  • EX ) JSX 와 CSS CODE

     const AnimatedLink = () => {
         return <a href="#" className="animated-link">링크</a>;
      };

    .animated-link {
       position: relative;
       text-decoration: none; /* 기본 밑줄 제거 */
     }
    
     .animated-link::after {
         content: '';
         position: absolute;
         left: 0;
         bottom: 0;
         width: 0;
         height: 2px;
         background-color: blue; /* 밑줄 색상 */
         transition: width 0.3s ease; /* 애니메이션 효과 */
     }
    
     .animated-link:hover::after {
          width: 100%; /* 호버 시 밑줄 길이 */
     }