포커스 효과

Coddy HTML 여정의 CSS 마스터 섹션에 포함된 레슨. 43개 중 9번째.

:focus 의사 클래스는 요소가 포커스를 받을 때 해당 요소의 스타일을 지정할 수 있게 해 줍니다. 예를 들어 요소를 클릭하거나 키보드로 탭하여 이동할 때가 이에 해당합니다. 상호작용 중인 요소를 강조 표시하는 좋은 방법입니다! 예를 들면 다음과 같습니다.

<input type="text">

input이 focus될 때 style 지정:

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

사용자가 이 input 필드를 클릭하거나 탭으로 이동하면 border 색상이 blue로 변경되고 주변에 은은한 blue shadow가 나타납니다.

챌린지

쉬움

text input이 focus를 받았을 때 특수한 스타일을 적용하는 CSS 규칙을 만드세요.

focus 상태일 때 border를 주황색 rgb(255, 152, 0)으로 변경합니다
focus 상태일 때 노란색 background color rgb(255, 243, 224)를 추가합니다

직접 해보기

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>