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

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

Dec 24, 2023

Contents

quiz-1.html


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

<head>
  <meta charset="UTF-8">
  <title>연습문제 1</title>
</head>

<body>
  <h1>수습 국원 모집</h1>
  <h2>방송에 관심 있는 새내기 여러분 환영합니다</h2>
  <p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부와 전공은 상관없습니다.<br>
    방송에 관심 있는 여러 학우의 지원 바랍니다.</p>
  <ul>
    <li><strong>모집 기간:</strong> 3월 2일 ~ 3월 11일</li>
    <li><strong>모집 분야:</strong> 아나운서, PD, 엔지니어</li>
    <li><strong>지원 방법:</strong> 양식 작성 후 이메일 접수<br>
      <i>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i></li>
  </ul>
  <h2>혜택</h2>
  <ol type="a">
    <li>수습기자 활동 중 소정의 활동비 지급</li>
    <li>정기자로 진급하면 장학금 지급</li>
  </ol>
  <embed src="images/mic.jpg">
</body>

</html>

result

quiz-2.html


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

<head>
  <meta charset="UTF-8">
  <title>연습문제 2</title>
  <style>
    table,
    td,
    th {
      border: 1px solid #ccc;
    }

    td,
    th {
      padding: 10px 20px;
    }

    td:last-child {
      width: 200px;
    }
  </style>
</head>

<body>
  <h1>수습 국원 지원 양식</h1>
  <table>
    <tr>
      <th rowspan="3">개인정보</th>
      <th>이름</th>
      <td></td>
    </tr>
    <tr>
      <th>학과/학번</th>
      <td></td>
    </tr>
    <tr>
      <th>연락처</th>
      <td></td>
    </tr>
    <tr>
      <th>지원 분야</th>
      <td colspan="2"></td>
    </tr>
  </table>
</body>

</html>

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

quiz-1.html

result

quiz-2.html

result

More articles

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

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