728x90
코딩애플로 배우고있는 HTML
이번 시간에는 input 박스를 만들었다
<form>
<input type="text">
<input type="email">
</form>
input type=[text,email,checkbox,button 등]
해오라는 대로 만든 레이아웃.
내가 짜본 코드의 문제점:
클래스가 제각각이다 => 재활용을 하지 못한다
가 가장 큰 문제.
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact us</title>
<link href="css/nomalize.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="headline">
<h4 style="margin: 0;">contact us</h4>
</div>
<div class="input-field">
<div class="input-email">
<h4>Your Email</h4>
<input type="email" placeholder="exam@example.com">
</div>
<div class="input-name">
<div class="first-name">
<h4>First name</h4>
<input type="text">
</div>
<div class="Last-name">
<h4>Last name</h4>
<input type="text">
</div>
</div>
<div style="clear:both;"></div>
<div class="input-message">
<h4>Message</h4>
<input type="text" style="width:80%; height: 130px">
</div>
<div class="send-button-line">
<input type="radio">subscribe
<input type="button" value="SEND" style="float: right; width:30%;height: 40px;background: yellow; border-radius: 5px;">
</div>
</div>
</div>
</body>
</html>아직 미숙해서 클래스명도 뒤죽박죽
css도 여기저기 알아보기 힘들게 흩어져있다.
다음 강의를 듣고 수정한 부분들.
모든 입력창들은 class를 "form-input"으로 통일하여 클래스를 재사용하였다.
Fist name, Last name은 class를 "w-50"으로 통일하였다. (width가 50%라는 뜻) width:100%인 박스들도 w-100으로 통일하였다.
쓸데없는 margin들을 없애고 padding을 준 뒤 box-size: border-box로 설정하여 모든 칸이 깔끔하게 정리되도록 하였다.
subscribe는 checkbox로 변경하고, "subscribe"라는 글자를 label로 처리하였다. checkbox의 id와 label for을 동일하게 설정하였다.
더보기
<div class="container">
<form>
<div class="headline">
<h4 style="margin: 0;">contact us</h4>
</div>
<div class="input-field">
<div class="w-100">
<p>Your Email</p>
<input class="form-input" type="email" placeholder="exam@example.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>
<input class="form-input form-long" type="text">
</div>
<div class="w-100">
<input id="sub" type="checkbox">
<label for="sub">subscribe</label>
<input class="yellowButton" type="button" value="SEND">
</div>
</div>
</form>
</div>728x90
'웹개발 > HTML || CSS' 카테고리의 다른 글
| [HTML] 아이콘 넣기 - font awesome (0) | 2023.01.08 |
|---|---|
| pseudo class로 인터랙티브 버튼 만들기 (0) | 2022.11.13 |
| 표 생성하기 (0) | 2022.11.11 |
| HTML 스타일링 (0) | 2022.09.25 |
| 1차시 (0) | 2022.09.25 |
댓글