포커스 시 이동 효과

Coddy의 넷플릭스 로그인 페이지 클론 | 프론트엔드 프로젝트 코스 레슨 — 19개 중 15번째.

아래에서 볼 수 있듯이, 입력 필드를 클릭한 후 레이블 텍스트가 약간 이동합니다.

이 코드는 :is() 의사 클래스를 사용하여 상태에 따라 폼 컨트롤의 스타일을 지정하는 CSS 스니펫입니다.

.form-control input:is(:focus,:valid): 이 선택자는 포커스 상태(:focus)이거나 유효한 입력(:valid)이 있는 .form-control 클래스의 <input> 요소를 대상으로 합니다. 이 두 조건 중 하나라도 충족되면 배경색은 #444로 설정되고 패딩은 16px 20px 0으로 조정됩니다.
.form-control input:is(:focus, :valid)~label: 이 선택자는 포커스 상태이거나 유효한 입력이 있는 동일한 조건의 이전에 선택된 <input> 요소의 형제인 <label> 요소를 대상으로 합니다. 두 조건 중 하나라도 충족되면 레이블의 글꼴 크기는 0.75 rem으로 설정되고 수직으로 -130%만큼 위로 이동하여 입력 필드 위에 플로팅 레이블 효과를 만듭니다.

챌린지

쉬움

힌트 코드를 정답으로 사용하되, 먼저 직접 시도해 보세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>