버튼
Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 53번째.
챌린지
쉬움이번 레슨에서는 제출 버튼을 시각적으로 매력적으로 만들기 위해 스타일을 지정해 보겠습니다. 배경색을 적용하고, 텍스트 색상과 패딩을 조정하며, 모서리를 둥글게 만들고, 폼에 box-shadow를 추가하여 돋보이게 만들 것입니다.
<button> 요소를 스타일링하세요. 아래 단계를 따르세요:
- 전체 공간을 채울 수 있도록 width를 100%로 설정하세요.
- 원하는 background-color를 적용하세요.
- text color를 변경하여 글꼴이 돋보이게 만드세요.
- 간격을 개선하기 위해 padding을 추가하세요.
- 모서리를 둥글게 만드세요.
- 버튼이 배경에서 돋보이도록 box-shadow 속성을 적용하세요.
직접 해보기
<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>
