본문

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 50번째.

챌린지

쉬움

이 프로젝트에서는 간단한 로그인 양식을 만들고 스타일을 적용합니다. 이 프로젝트를 통해 다음과 같은 주요 CSS 개념을 연습할 수 있습니다.
✅ 웹페이지에서 요소를 완벽하게 가운데에 배치하기
✅ 입력란과 버튼 같은 양식 요소 스타일 지정하기
✅ 테두리, 그림자, 간격 다루기
✅ 디자인에 창의성을 발휘할 여지 두기

프로젝트를 마치면 아래 이미지처럼 현대적이고 세련된 모양의 로그인 양식을 완성하게 됩니다.

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

배경색을 원하는 밝은 색조로 설정하세요.
Flexbox를 사용해 양식의 가로 및 세로 위치를 모두 가운데로 맞추세요.
페이지의 높이를 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>