[TIL.21.1.7 ~ 21.1.14] HTML 실습문제

수업은 HTML기본태그들을 직접 사용해 보는위주로 진행되었다. 따라서 태그의 기능을 설명하는 대신 간단한 실습을 통해 특정 상황에 맞는 양식을 작성했던것을 업로드 해보려고 한다.

[21.1.8]

*실습문제 2*

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th rowspan="4"><img src="m1.jpg" alt=""></th><th colspan="2">명당</th>
      </tr>
      <tr>
        <td>출연</td><td>조승우, 지성, 김성균, 문채원</td>
      </tr>
      <tr>
        <td>줄거리</td><td>명당이란 운명을 바꿀 수 있는 땅의 기운이다!</td>
      </tr>
      <tr>
        <td>감독</td><td>박희곤</td>
      </tr>

      <tr>
        <th rowspan="4"><img src="m2.jpg" alt=""></th><th colspan="2">안시성</th>
      </tr>
      <tr>
        <td>출연</td><td>조인성, 남주혁, 박성웅, 배성우</td>
      </tr>
      <tr>
        <td>줄거리</td><td>우리는 물러서는 법을 배우지 못했다!<br>우리는 무릎꿇는 법을 배우지 못했다.</td>
      </tr>
      <tr>
        <td>감독</td><td>김광식</td>
      </tr>

      <tr>
        <th rowspan="4"><img src="m3.jpg" alt=""></th><th colspan="2">협상</th>
      </tr>
      <tr>
        <td>출연</td><td>손예진, 현빈, 김상호, 장영남</td>
      </tr>
      <tr>
        <td>줄거리</td><td>어떠한 상황에서도 냉철함을 잃지 않던 최고의 협상가 '하채윤'은<br> 긴급 투입된현장에서 인질과 인질범 모두 사망하는 사건을 겪고 충격에 휩쌓인다</td>
      </tr>
      <tr>
        <td>감독</td><td>이종석</td>
      </tr>
    </table>

  </body>
</html>

실행 결과

*실습문제 3*

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>설문조사</h1>
    <i>아래 항목을 채워주세요.</i>

    <form method="post">
      <h2>신상정보</h2>
      <table>
        <tr>
          <td>이름</td>
          <td><input type="text" name="" value=""></td>
        </tr>
        <tr>
          <td>휴대전화</td>
          <td><input type="text" name="" value=""></td>
        </tr>
        <tr>
          <td>이메일 주소</td>
          <td><input type="email" name="" value=""></td>
        </tr>
      </table>

      <h2>어떠한 경로로 알게 되었습니까?</h2>

      <input id = "article" type="radio" name="in">기사
      <input id = "ad" type="radio" name="in">광고
      <input id = "etc" type="radio" name="in">기타

      <h2>좋아하는 스포츠는 무엇입니까?</h2>

      <input type="checkbox" name="tennis" value="">테니스
      <input type="checkbox" name="golf" value="">골프
      <input type="checkbox" name="basketball" value="">농구<br><br>
      <input type="checkbox" name="squash" value="">스쿼시
      <input type="checkbox" name="balling" value="">볼링
      <input type="checkbox" name="football" value="">축구<br><br>
      <br>

      연락방법 <select>
        <option value="">email</option>
        <option value="">휴대전화</option>
      </select><br><br>

      <input type="checkbox">개인정보 활용에 동의합니다. <br><br>

      <input type="submit">
    </form>

  </body>
</html>

실행결과

이 날 까지 인터넷과 웹에 대해서 공부하였고 또한 html문서 작성 및 태그 사용하는 법을 배웠다 이 후 부터는 자바스크립트의 함수 묶음JQuery와 CSS를 이용해 정적인 웹을 기능적으로 향상시키고 사용자와 상호작용을 용이하도록 하고 시각적으로 우수한 웹페이지를 만들 수 있도록 해야한다. 다음 포스트에서는 JQuery와 CSS에 대해 배우고 익힌것에 대해 업로드 하도록 하겠다.

'클라우드 아키텍트 양성과정' 카테고리의 다른 글

[TIL.21.1.4 ~ 21.1.6] Linux(CentOS) (0)	2021.02.13
[TIL.21.1.7 ~ 21.1.14] JQuery 연습 (0)	2021.02.08
[TIL.21.1.7 ~ 21.1.14]인터넷과 웹 (0)	2021.02.01
[TIL.20.12.22~28] 관계형 데이터 베이스 설계 (0)	2021.01.28
[TIL.20.12.22~28] Python과 MySQL (0)	2021.01.27