form 복습

park jinwoo·2022년 3월 28일
0

이미지처럼 코드 짜기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>form 복습하기</title>
    <style>
			#container { 
				width:520px;
				border:1px solid black;
				padding:20px 40px;
				margin:0 auto;
			}
      fieldset { margin-bottom:15px; }
      legend { font-weight:bold; }
			ul {list-style-type: none;}
			li { line-height:30px;}
    </style>
  </head>
  <body>
		<div id="container">
			<h1>프런트엔드 개발자 지원서 </h1>
			<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
			<hr>
			<form>
				<h3>개인 정보</h3>
				<ul>
					<li>
						<label>이름</label>
						<input type="text" placeholder="공백 없이 입력하세요">
					</li>
					<li>
						<label>연락처</label>
						<input type="tel">
					</li>
				</ul>
				<h3>지원 분야</h3>
				<ul>
					<li>
						<label><input type="radio"> 웹 퍼블리싱</label>
					</li>
					<li>
						<label><input type="radio"> 웹 애플리케이션 개발</label>
					</li>
					<li>
						<label><input type="radio"> 개발 환경 개선</label>
					</li>
				</ul>
				<h3>지원 동기</h3>
				<textarea rows="5" cols="60" placeholder="본사 지원 동기를 간략히 써 주세요."></textarea>
				<ul>
					<button	button type="submit">접수하기</button>
					<button	button type="reset">다시 쓰기</button>
				</ul>
			</form>
		</div>
  </body>
</html>

0개의 댓글