인풋
Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 52번째.
챌린지
쉬움이번 레슨에서는 입력 필드의 모양을 개선하여 사용자 친화적으로 만들어 보겠습니다.
<input> 필드에 스타일을 적용하세요. 아래 단계를 따르세요:
- 폼에 잘 맞도록 너비를 100% wide로 설정하세요.
- 내부의 텍스트가 가장자리에 닿지 않도록 padding을 추가하세요.
- 부드러운 색상의 border를 적용하세요.
- 모서리를 둥글게 만드세요.
- 입력 필드들이 너무 가깝게 보이지 않도록 필드 사이에 margin을 추가하세요.
- 너비에 패딩과 테두리가 포함되도록 box-sizing: border-box;를 사용하세요.
직접 해보기
<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>
