[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 5장 연습문제
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 5장 연습문제 2개
Dec 24, 2023
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>
result
Share article