반응형
Do it! HTML+CSS+자바스크립트 웹 표준의 정석에 있는 퀴즈입니다.
HTML은 엄청 기초라 그냥 지나갈 수 있을 줄 알았는데, 모르는 부분이 많았다.
특히 챕터5의 입력 양식 작성하기 부분은 HTML을 이렇게 알차게 사용할 수 있구나를 배웠다.
폼을 만드는 것인데,
<form [속성="속성값"]>여러 폼 요소</form>의 기본형태 폼을 여러가지 태그를 사용하여 작성한다.
다양한 input 태그의 type 활용도 의미있었다.
text 부터 password, search, email submit 등등등...
이런걸 다 외우진 않더라도 아 그런게 있었지?
하고 바로 기억하고 써먹는게 중요할 것 같다.
5장의 끝에 퀴즈 2개가 있는데 2번째 퀴즈가 도움됐다.
위 사진과 같은 폼을 만드는 것이다.
<!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>
</form>기본적으로 이만큼만 적혀있는데,
모르면 앞에 찾아보며 하면 금방 작성할 수 있다.
정답 👀
<!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>
<h4>개인정보</h4>
<ul>
<li>
<!-- <input>태그 앞 뒤에 <label>과 </label> 태그로 묶어도 됩니다 -->
<label for="sname"> 이름 </label>
<input type="text" id="sname" autofocus placeholder="공백없이 입력하세요">
</li>
<li>
<label for="snumber"> 연락처 </label>
<input type="text" id="snum">
</li>
</ul>
<h4>지원 분야</h4>
<ul>
<li>
<label><input type="radio" name="field" value="an"> 웹 퍼블리싱</label>
</li>
<li>
<label><input type="radio" name="field" value="pd"> 웹 애플리케이션 개발</label>
</li>
<li>
<label><input type="radio" name="field" value="eng"> 개발 환경 개선</label>
</li>
</ul>
<label>
<h4>지원동기</h4>
<textarea id="motive" cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요."></textarea>
</label>
<div>
<input type="submit" value="접수하기">
<input type="reset" value="다시 쓰기">
<!-- 다음과 같이 작성해도 됩니다.
<button type="submit">접수하기</boutton>
<button type="reset">다시 쓰기</button>
-->
</div>
</form>
</div>
</body>
</html>많이 쓰겠다~ 싶은 유용한 input 태그의 type 속성들, placeholder, autofocus도 보이고
메모를 적을 수 있는 textarea도 알아보았다.
끄읏
반응형