[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 5장 연습문제

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 5장 연습문제 2개

Dec 24, 2023

Contents

quiz-1.html


<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>연습문제 1</title>
	<style>
		ul {
			list-style: none;
		}

		li {
			line-height: 50px;
		}

		label {
			width: 60px;
			float: left;
		}
	</style>
</head>

<body>
	<fieldset>
		<h1>예약 정보</h1>
		<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="email" id="r-email">
			</li>
			<li>
				<input type="submit" value="예약하기">
			</li>
		</ul>
	</fieldset>

</body>

</html>

result

quiz-2.html


<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>연습문제 2</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>
			<label><b>개인 정보</b></label>
			<ul>
				<li>
					<label for="name">이름</label>
					<input type="text" id="name" placeholder="공백 없이 입력하세요">
				</li>
				<li>
					<label for="tel">연락처</label>
					<input type="text" id="tel">
				</li>
			</ul>
			<label><b>지원 분야</b></label>
			<ul>
				<li>
					<input type="radio" name="web_p">
					<label for="web_p">웹 퍼블리싱</label>
				</li>
				<li>
					<input type="radio" name="web_a">
					<label for="web_a">웹 어플리케이션 개발</label>
				</li>
				<li>
					<input type="radio" name="dev">
					<label for="dev">개발 환경 개선</label>
				</li>
			</ul>
			<label for="memo"><b>지원 동기</b></label><br><br>
			<textarea id="memo" cols="70" rows="4" placeholder="본사 지원 동기를 간략히 써 주세요"></textarea>
			<input type="submit" value="접수하기">
			<input type="reset" value="다시 쓰기">
		</form>
	</div>
</body>

</html>

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 5장 연습문제

quiz-1.html

result

quiz-2.html

result

More articles

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 7장 연습문제

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 6장 연습문제

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 4장 연습문제