게으른 나에게

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "4장: 마무리 문제" 본문

My Study/서적 공부

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "4장: 마무리 문제"

handbefore 2024. 7. 20. 17:37

[4장 웹 문서의 다양한 내용 입력하기] 마무리 문제 01.

 

> 문제풀이

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

> 결과

[4장 웹 문서의 다양한 내용 입력하기] 마무리 문제 02.

 

> 문제풀이

<!DOCTYPE>
<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>

> 결과 (문제를 위해 css파일은 미리 만들어 있음)

 

 

 

 

 

 

출처

 

 

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

 

easyspub.co.kr

 

'My Study > 서적 공부' 카테고리의 다른 글

[코딩 자율학습 HTML + CSS + 자바스크립트] 1. HTML로 웹 구조 설계하기 - "2장 HTML 문서 작성을 위한 기본 내용 살펴보기"  (0) 2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "5장: 마무리 문제"  (3) 2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: 입력양식 작성하기"  (3) 2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: 목록만들기, 표 만들기"  (2) 2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: 웹 문서에 다양한 내용 입력하기"  (0) 2024.07.20
'My Study/서적 공부' Related Articles more