[css]
div, input, textarea {
box-sizing: border-box;
}
body {
margin: 0;
}
.form-background{
padding: 30px;
background-color: black;
}
.form-white {
padding: 30px;
background-color: white;
/* 크기 제한 */
width: 80%;
max-width: 600px;
/* 가운데 정렬 */
margin: auto;
}
.form-input {
width: 100%;
padding: 5px;
font-size: 10px;
border: 1px solid gray;
border-radius: 5px;
}
.w-50 {
width: 50%;
float: left;
padding: 10px;
}
.w-100 {
width: 100%;
padding: 10px;
/* name이랑 padding 맞추려고 사용 */
}
.form-long {
height: 70px;
/* textarea의 최대 크기 제한 */
max-height: 200px;
max-width: 100%;
}
.yellow-button {
padding: 10px;
background-color: rgb(255, 197, 38);
border: none;
border-radius: 5px;
color: white;
/* 우측 정렬 간단하게 */
display: block;
margin-left: auto;
}
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact Form</title>
<link href="css/form.css" rel="stylesheet">
</head>
<body>
<div class="form-background">
<div class="form-white">
<form>
<div class="w-100">
<h3>Contact us</h3>
<p>Your Email</p>
<input class="form-input" type="email" placeholder="email@naver.com">
</div>
<div class="w-50">
<p>First name</p>
<input class="form-input" type="text">
</div>
<div class="w-50">
<p>Last name</p>
<input class="form-input" type="text">
</div>
<div style="clear: both;"></div>
<div class="w-100">
<p>Message</p>
<textarea class="form-input form-long"></textarea>
</div>
<div>
<input id="sub" type="checkbox">
<label for="sub">Subscribe</label>
<button class="yellow-button">SEND</button>
</div>
</form>
</div>
</div>
</body>
</html>
- 가로로 꽉 차게 하기
- width를 100으로
- float는 쓰면 이상현상 방지를 위해 clear:both해줘야 함.
- <div style="clear: both;"></div>
- 체크박스 할 떄 글씨 쓸 떄 >뒤에 그냥 써도 되지만 대부분 의미없는 <span>이용.
- 근데 <span>보다 <label>이 더 좋음
- <label>태그
- id 사용
- 라벨을 누르면 인풋도 누른 것처럼 동작한다.
- input의 제목 달 떄도 많이 이용
': ) Web > 웹 스터디' 카테고리의 다른 글
| [HTML, CSS] pseudo-class 로 클릭 시 스타일 바꾸기 (0) | 2023.11.19 |
|---|---|
| [HTML, CSS 실습] Table 레이아웃을 이용해 쇼핑 카트 화면 만들기 (2) | 2023.11.19 |
| [HTML, CSS 실습] 블로그 레이아웃 만들기 (0) | 2023.11.16 |
| [HTML, CSS] 레이아웃 만들기 (float, inline-box) (0) | 2023.11.16 |
| VSCode git이랑 연결하기 / git에 올리기 (1) | 2023.11.09 |
