폼 컨테이너

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

챌린지

쉬움

이번 레슨에서는 폼을 더 구조화되고 시각적으로 매력적으로 만들어 보겠습니다.

아래 단계를 따르세요:

폼 컨테이너가 돋보이도록 스타일을 적용합니다. login-form 클래스를 가진 요소를 대상으로 하는 CSS 규칙을 작성하세요.
1. 배경색을 설정합니다 (흰색 또는 보기 좋은 색상).
2. 콘텐츠 내부에 공간이 생기도록 padding을 추가합니다.
3. 모서리를 둥글게 만듭니다.
4. 부드러운 플로팅 효과를 주기 위해 box-shadow를 적용합니다.
5. 폼 주위에 border를 추가합니다 (원하는 색상과 두께를 선택하세요).
text-align 속성을 사용하여 폼 내부의 텍스트를 중앙 정렬합니다.

직접 해보기

<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>