요런 페이지를 만들어보자.
코딩애플 숙제다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./assets/style.css" />
</head>
<body>
<div class="container">
<div class="marg-left marg-top">
<h2 class="f-black">contact us</h2>
</div>
<form action="" class="f-black wh100">
<div class="marg-top marg-left">
<h4 class="f-margin">Your Email</h4>
<input type="email" placeholder="email@example.com" class="mid-btn btn-email"></input>
</div>
<div class="btn-name marg-top marg-left">
<div class="float-left">
<h4 class="f-margin">First name</h4>
<input type="text" class="mid-btn w55"></input>
</div>
<div class="float-left marg-left">
<h4 class="f-margin">Last name</h4>
<input type="text" class="mid-btn w55"></input>
</div>
</div>
<div style="clear: both;"></div>
<div class="marg-top marg-left">
<h4>Message</h4>
<textarea name="" id="" cols="38" rows="12"></textarea>
</div>
<div class="marg-top marg-left">
<input id="subscribe" type="checkbox" class="float-left">
<label for="subscribe" class="float-left">Subscribe</label>
<button class="mid-btn" style="display: block; margin-left: auto; margin-right: 50px;">SEND</button>
</div>
</form>
</div>
</body>
</html>.container {
width: 400px;
height: 600px;
padding: 1px;
background-color: white;
}
h4{
margin: 0px;
}
.wh100{
width: 100%;
height: 100%;
}
.w55{
width: 55%;
}
.marg-left{
margin-left: 30px;
}
.marg-top{
margin-top: 30px;
}
.f-black{
color: black;
}
.f-margin{
margin-bottom: 10px;
}
.mid-btn{
padding: 10px;
}
.lrg-btn{
padding: 90px;
}
.btn-email{
width: 80%;
}
.btn-name{
width: 100%;
float: left;
}
.float-left{
float: left;
}
재미있는건 label 태그이다.
<input id="subscribe" type="checkbox" class="float-left">
<label for="subscribe" class="float-left">Subscribe</label>
label 태그와 input의 checkbox를 for, id로 묶게되면
label을 눌러도 check가 된다.
See the Pen Coding Apple Html/Css Homework1 by Jirong (@jirongkim) on CodePen.
'프로그래밍 > Web' 카테고리의 다른 글
| [Web] OOCSS, BEM에 관하여 (1) | 2022.05.04 |
|---|---|
| [Web] Javascript 없이 이벤트 효과를 주고 싶다면 pseudo (0) | 2022.05.04 |
| [Web] 내가 쓰는 VS Code Extension (0) | 2022.05.02 |
| [HTML/CSS] position - static/relative/absolute/fixed/z-index (0) | 2022.05.01 |
| [HTML/CSS] 브라우저 호환성 최적화 normalize 방법 (0) | 2022.05.01 |
댓글