[Chapter 4-연습문제] HTML5 공부 8일차! (2021-07-06)

Chapter 4를 끝마치고 오늘은 연습문제를 푸는 날이다.

 

• QUIZ-1
• QUIZ-2

▷QUIZ-1 (난이도 2/3)

문제 : 예약 페이지의 예약 정보를 만들기

<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="submit" value="예약하기">
			</li>
		</ul>
     </form>

QUIZ-1도 잠시 헷갈렸지만 무난한 문제였다.

 

▷QUIZ-2 (난이도 3/3)

문제 : '프런트엔드 개발자 지원서'용 폼을 만들기

<div id="container">
			<h1>프런트엔드 개발자 지원서 </h1>
			<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
			<hr>
			<form>
				<b>개인정보</b>
				<ul>
					<li>
						<label for="name">이름</label>
						<input id="name" type="text" placeholder="공백없이 입력하세요" >
					</li>
					<li>
						<label for="tel">연락처</label>
						<input id="tel" type="text">
					</li>
				</ul>

				<b>지원 분야</b>
				<ul>
					<li>
						<input name="field" type="radio" >
						<label >웹 퍼블리싱</label>						
					</li>
					<li>
						<input name="field" type="radio">
						<label >웹 애플리케이션 개발</label>						
					</li>
					<li>
						<input name="field" type="radio">
						<label >개발 환경 개선</label>						
					</li>
				</ul>

				<b>지원 동기</b>
				<br><br>
				<textarea name="intro" cols="60" rows="5" placeholder="본사지원동기를 간략히 써 주세요"></textarea>
				<br>
				<input type="submit" value="접수하기">
				<input type="reset" value="다시 쓰기">
			</form>
		</div>

 radio가 중복이 되지 않으려면 name이 같아야 하는데 id로 써서 계속 중복이 돼서 한참을 헤맸다..

이력서나 설문조사 폼을 만들 때는 대부분 <ul>과 <li>를 많이 쓰는 것 같다.

이로서 HTML5 기본적인 개념들은 다 끝난 것 같다. 다음번부터 CSS기초를 공부할 예정이다.

 

맨 위로