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