퀴즈 1~2
1. 다음은 예약 페이지의 일부입니다. 04/quiz-1.html에는 '예약 정보'라는 제목만 표시되어 있습니다. 아래 폼 소스의 빈칸을 채우면서 04/quiz-1.html 문서에 폼을 추가하세요.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>예약 접수</title>
<style>
ul {
list-style:none;
}
li {
line-height:50px;
}
label {
width:60px;
float:left;
}
</style>
</head>
<body>
<h1>예약 정보</h1>
</body>
</html><!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>예약 접수</title>
<style>
ul {
list-style:none;
}
li {
line-height:50px;
}
label {
width:60px;
float:left;
}
</style>
</head>
<body>
<h1>예약 정보</h1>
<form>
<ul>
<li>
<label for="r-name">이름</label>
<input type="text" id="r-name">
</li>
<li>
<label for="r-phone">휴대폰</label>
<input type="text" id="r-phone">
</li>
<li>
<label for="r-email">이메일</label>
<input type="text" id="r-email">
</li>
<li>
<input type="button" value="예약하기">
</li>
</ul>
</form>
</body>
</html>
2. 04/quiz-2.html에 '프런트엔드 개발자 지원서'용 폼을 만들려고 한다. 다음 조건을 만족시키도록 <form> 태그와 </form> 태그 사이에 소스를 추가하세요.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>프런트엔드 개발자 지원서</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>
</form>
</div>
</body>
</html><!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>프런트엔드 개발자 지원서</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>
<legend>개인정보</legend>
<ul>
<li>
<label for="r-name">이름</label>
<input type="text" id="r-name" placeholder="공백 없이 입력하세요.">
</li>
<li>
<label for="r-phone">연락처</label>
<input type="tel" id="r-phone">
</li>
</ul>
<legend>지원 분야</legend>
<ul>
<li>
<label><input type="radio" name="webp" value="webp">웹 퍼블리싱</label>
</li>
<li>
<label><input type="radio" name="web-dev" value="web-dev">웹 애플리케이션 개발</label>
</li>
<li>
<label><input type="radio" name="imp-dev" value="imp-dev">개발 환경 개선</label>
</li>
</ul>
<legend>지원동기</legend><br>
<label for="container" >
<p><textarea name="" cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요." ></textarea></p>
<button>접수하기</button>
<button>다시쓰기</button>
</form>
</div>
</body>
</html>