포커스 효과

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

:focus 가상 클래스를 사용하면 요소가 포커스를 받았을 때(예: 클릭하거나 키보드의 Tab 키를 사용하여 이동할 때) 요소의 스타일을 지정할 수 있습니다. 현재 상호작용 중인 요소를 강조하기에 아주 좋은 방법입니다! 예를 들어:

<input type="text">

입력 요소가 포커스를 받을 때 스타일을 지정합니다:

input {
  border: 2px solid #ccc;
}

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

사용자가 이 입력 필드를 클릭하거나 탭으로 이동하면, 테두리 색상이 파란색으로 바뀌고 그 주변에 은은한 파란색 그림자가 나타납니다.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

텍스트 입력창이 포커스를 받았을 때 특별한 스타일을 적용하는 CSS 규칙을 만드세요.

포커스되었을 때, 테두리를 오렌지색 "rgb(255, 152, 0)"으로 변경합니다.
포커스되었을 때, 노란색 배경색 "rgb(255, 243, 224)"을 추가합니다.

치트 시트

:focus 의사 클래스는 요소가 포커스를 받았을 때(클릭되거나 탭 키로 이동했을 때) 스타일을 지정합니다:

input {
  border: 2px solid #ccc;
}

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

이것은 입력창에 포커스가 맞춰졌을 때 테두리 색상을 변경하고 그림자를 추가합니다.

직접 해보기

<!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>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.