CSS Focus-Within 을 활용한 양식 상호 작용성 향상

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 CSS 의 :focus-within 가상 클래스를 탐구합니다. 이 클래스를 사용하면 자식 요소 중 하나라도 포커스를 받으면 부모 요소에 스타일을 적용할 수 있습니다. 이 기능을 사용하여 사용자가 상호 작용할 때 모양이 바뀌는 시각적으로 매력적인 양식을 만들 것입니다. 이 랩을 통해 CSS 를 사용하여 대화형 양식을 생성함으로써 사용자 경험을 향상시키는 방법에 대한 더 나은 이해를 얻게 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

Focus Within (포커스 내부)

index.htmlstyle.css는 이미 VM 에 제공되었습니다.

자식 요소 중 하나라도 포커스를 받으면 양식의 모양을 변경하려면 :focus-within 가상 클래스를 사용하여 부모 요소에 스타일을 적용합니다. 예를 들어, 주어진 HTML 코드에서 입력 필드 중 하나라도 포커스를 받으면 form 요소는 녹색 배경을 갖게 됩니다. 자식 요소에 스타일을 적용하려면 labelinput과 같은 적절한 CSS 선택자를 사용하십시오.

<form>
  <label for="username">Username:</label>
  <input id="username" type="text" />
  <br />
  <label for="password">Password:</label>
  <input id="password" type="text" />
</form>
form {
  border: 2px solid #52b882;
  padding: 8px;
  border-radius: 2px;
}

form:focus-within {
  background: #7cf0bd;
}

label {
  display: inline-block;
  width: 72px;
}

input {
  margin: 4px 12px;
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! Focus Within 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.