CodeGym /자바 코스 /Frontend SELF KO /폼의 의사 클래스

폼의 의사 클래스

Frontend SELF KO

레벨 29 , 레슨 3

사용 가능

4.1 의사 클래스 :checked

CSS의 폼 의사 클래스는 폼 요소의 상태에 따라 스타일을 설정할 수 있는 기능을 제공합니다. 이 의사 클래스를 사용하면 사용자 인터페이스와 경험을 향상시키는 인터랙티브하고 접근 가능한 폼을 만들 수 있습니다. 이제 :checked, :disabled, :enabled, :invalid 의사 클래스를 자세히 살펴보겠습니다.

:checked 의사 클래스는 "선택된" 상태의 폼 요소에 적용됩니다. 이것은 체크박스(<input type="checkbox">), 라디오 버튼(<input type="radio">), 옵션(<option>)에 해당합니다.

구문:

    
      셀렉터:checked {
        속성: 값;
      }

사용 예제

이 예제에서는 선택된 체크박스, 라디오 버튼 및 옵션이 "선택됨" 상태일 때 적절한 배경색을 받습니다:

CSS

    
      /* 선택된 체크박스 스타일링 */

      input[type="checkbox"]:checked {
        background-color: #3498db;
      }

      /* 선택된 라디오 버튼 스타일링 */

      input[type="radio"]:checked {
        background-color: #2ecc71;
      }

      /* 선택된 옵션 스타일링 */

      option:checked {
        background-color: #e74c3c;
      }

4.2 의사 클래스 :disabled

:disabled 의사 클래스는 비활성화 상태의 폼 요소에 적용됩니다. 이는 일시적으로 접근할 수 없는 요소를 스타일링하는 데 유용합니다.

구문:

    
      셀렉터:disabled {
        속성: 값;
      }

사용 예제

이 예제에서는 비활성화된 입력 필드와 버튼이 적절한 배경색, 테두리 및 텍스트 색상을 받으며, 커서를 "금지됨"으로 변경합니다:

CSS

    
      /* 비활성화된 입력 필드 스타일링 */

      input:disabled {
        background-color: #f0f0f0;
        border-color: #ccc;
        color: #888;
      }

      /* 비활성화된 버튼 스타일링 */

      button:disabled {
        background-color: #d0d0d0;
        color: #777;
        cursor: not-allowed;
      }

4.3 의사 클래스 :enabled

:enabled 의사 클래스는 활성화된 폼 요소에 적용됩니다. 이는 접근 가능한 요소를 스타일링할 수 있게 해줍니다.

구문:

    
      셀렉터:enabled {
        속성: 값;
      }

사용 예제

이 예제에서는 활성화된 입력 필드와 버튼이 적절한 배경색, 테두리 및 텍스트 색상을 받으며 커서를 "포인터"로 변경합니다:

CSS

    
      /* 활성화된 입력 필드 스타일링 */

      input:enabled {
        background-color: #fff;
        border-color: #3498db;
      }

      /* 활성화된 버튼 스타일링 */

      button:enabled {
        background-color: #2ecc71;
        color: white;
        cursor: pointer;
      }

4.4 의사 클래스 :invalid

:invalid 의사 클래스는 유효성 검사를 통과하지 못한 폼 요소에 적용됩니다. 이는 잘못된 데이터를 포함하는 입력 필드를 스타일링할 수 있게 해줍니다.

구문:

    
      셀렉터:invalid {
        속성: 값;
      }

사용 예제

이 예제에서는 잘못된 입력 필드와 텍스트 필드가 유효성 검사를 통과하지 못한 것을 시각적으로 보여주기 위해 적절한 테두리와 배경색을 받습니다:

CSS

    
      /* 잘못된 입력 필드 스타일링 */

      input:invalid {
        border-color: #e74c3c;
        background-color: #f9e0e0;
      }

      /* 잘못된 텍스트 필드 스타일링 */

      textarea:invalid {
        border-color: #e74c3c;
        background-color: #f9e0e0;
      }

4.5 전체 구현 예제

CSS

    
      /* 선택된 체크박스 스타일링 */

      input[type="checkbox"]:checked {
        background-color: #3498db;
      }

      /* 선택된 라디오 버튼 스타일링 */

      input[type="radio"]:checked {
        background-color: #2ecc71;
      }

      /* 비활성화된 입력 필드 스타일링 */

      input:disabled {
        background-color: #f0f0f0;
        border-color: #ccc;
        color: #888;
      }

      /* 비활성화된 버튼 스타일링 */

      button:disabled {
        background-color: #d0d0d0;
        color: #777;
        cursor: not-allowed;
      }

      /* 활성화된 입력 필드 스타일링 */

      input:enabled {
        background-color: #fff;
        border-color: #3498db;
      }

      /* 활성화된 버튼 스타일링 */

      button:enabled {
        background-color: #2ecc71;
        color: white;
        cursor: pointer;
      }

      /* 잘못된 입력 필드 스타일링 */

      input:invalid {
        border-color: #e74c3c;
        background-color: #f9e0e0;
      }

      /* 잘못된 텍스트 필드 스타일링 */

      textarea:invalid {
        border-color: #e74c3c;
        background-color: #f9e0e0;
      }

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>
          <form>
            <label>
              <input type="checkbox" name="option1"> Option 1
            </label>
            <br>
            <label>
              <input type="radio" name="choice" value="1"> Choice 1
            </label>
            <label>
              <input type="radio" name="choice" value="2"> Choice 2
            </label>
            <br>
            <input type="text" placeholder="Enter your name" required>
            <br>
            <input type="email" placeholder="Enter your email" required>
            <br>
            <button type="submit">Submit</button>
            <button type="button" disabled>Disabled Button</button>
          </form>
        </body>
      </html>

이전 이전 레슨

다음 다음 레슨

코멘트

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