Label 태그

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

챌린지

쉬움

form-control 클래스 내의 label을 대상으로 합니다:

position을 absolute로 설정하고, 왼쪽에서 20픽셀, 위쪽에서 50% 위치로 설정합니다.
transform을 translateY(-50%)으로 설정합니다.
글꼴 크기를 16px로 설정합니다.
pointers-event를 none으로 설정합니다.
color를 #8c8c8c로 설정합니다.
마지막에 transition: all 0.1s ease;를 추가합니다.

직접 해보기

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

넷플릭스 로그인 페이지 클론 | 프론트엔드 프로젝트의 모든 레슨

1소개

4CSS - II

2HTML

제목 및 Wrapper 설정 폼 입력 I

3CSS - I

Label 태그