<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="../css/prac.css" rel="stylesheet">
</head>
<body>
<div class="form-background">
<div class="form-white">
<form>
<div class="w-100">
<h1>contact us</h1>
<p>Your Email</p>
<input class="input-form" type="email" placeholder="email@example.com">
</div>
<div class="w-50">
<p>First name</p>
<input class="input-form" type="text">
</div>
<div class="w-50">
<p>Last name</p>
<input class="input-form" type="text">
</div>
<div style="clear: both;"></div>
<div class="w-100">
<p>Message</p>
<textarea class="input-form input-long"></textarea>
</div>
<div>
<input id="sc" type="checkbox">
<label for="sc">Subscirbe</label>
<button class="btn" type="submit">SEND</button>
</div>
</form>
</div>
</div>
</body>
</html>
div, input, textarea {
box-sizing: border-box;
}
h1, p, label, button {
font-family: cursive
}
a {
text-decoration: none;
color: black;
}
.input-form {
padding: 15px;
font-size: 20px;
border: 1px solid gray;
border-radius: 10px;
width: 100%;
}
.form-background {
background-color: lightgray;
padding: 30px;
}
.form-white {
background-color: antiquewhite;
padding: 30px;
width: 80%;
max-width: 700px;
margin: auto;
}
.w-50 {
float: left;
width: 50%;
padding: 10px;
overflow: hidden;
}
.btn {
background-color: powderblue;
width: 120px;
padding: 15px;
border: none;
border-radius: 5px;
}
.w-100 {
width: 100%;
padding: 10px;
}
.input-long {
height: 150px;
}
버튼을 오른쪽으로 정렬 시키려고 하는데 margin-right가 먹질 않습니다. 왜 그런지와 해결방법은 없을까요?
