바디

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 50번째.

챌린지

쉬움

이 프로젝트에서는 간단한 로그인 양식(Login Form)을 만들고 스타일을 지정해 보겠습니다. 이 프로젝트는 다음을 포함한 주요 CSS 개념을 연습하는 데 도움이 될 것입니다:
✅ 웹페이지에서 요소를 완벽하게 중앙에 배치하기
✅ 입력창(input) 및 버튼과 같은 양식 요소 스타일링하기
✅ 테두리(border), 그림자(shadow), 간격(spacing) 작업하기
✅ 디자인에 창의성을 발휘할 수 있는 여지 남겨두기

프로젝트가 끝나면 아래 이미지와 같이 현대적이고 세련된 스타일의 로그인 양식을 갖게 될 것입니다.

<body> 태그에 스타일을 적용하세요. 아래 단계를 따르세요:

배경색(background-color)을 원하는 밝은 색상으로 설정하세요.
Flexbox를 사용하여 양식을 가로 및 세로 중앙에 배치하세요.
페이지 높이(height)를 100vh로 설정하여 크기가 조정되어도 양식이 중앙에 유지되도록 하세요.

직접 해보기

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>