웹프로그래밍 HTML/입력양식과 공간 분할 태그

TEST

별초롱언니 2025. 3. 10. 13:59
1.다음의 요구사항을 만족하는 태그를 알맞게 제시하시오.
 - 요구사항 5가지는 첨부된 압축파일의 img폴더에 exam1.png로 제시되어있습니다.
  요구사항 1 : 2<sup>3</sup><br>
  요구사항 2 : <mark>안녕하세요</mark><br>
  요구사항 3 : 줄바꿈<br>
  요구사항 4 : C<sub>8</sub>H<sup>10</sup><br>
  요구사항 5 : <del>no<mark>th</mark>ing</del>

2.다음의 html 코드에서 a태그를 클릭하면 해당 지점으로 스크롤 이동하도록 제작하시오.

<html>
   <head></head>
   <body>
      <!-- 문항1 -->
      <a>포인트 4으로 이동하기</a>

      <!-- br 10개 –>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <p id="point1">포인트 1</p>
      
      <!-- br 10개 –>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <p id="point2">포인트 2</p>
      
      <!-- br 10개 –>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <p id="point3">포인트 3</p>
      
      <!-- br 10개 –>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <p id="point4">포인트 4</p>

      <!-- 문항2 -->
      <a>탑으로 이동</a>
   </body>
</html>
<!-- 문항1 -->
<a href="#point4">포인트 4으로 이동하기</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="point1">포인트 1</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="point2">포인트 2</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="point1">포인트 3</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="point4">포인트 4</p>

<!-- 문항2 -->
<a href="#top">탑으로 이동</a>

3.첨부되어있는 프로젝터 exam3 폴더에 img 폴더와 index.html이 들어있습니다. 
index.html의 <img>코드에서 test.jpg를 사용하기 위한 코드를 완성하시오.
** 절대 경로가 아닌 상대경로 작성 필요
<img src="../img/test.jpg">

 

4. 첨부되어있는 table그림 exam4.png를 확인하고 같은 구조의 테이블 코드를 작성하시오.
첨부되어있는 압축파일의 img폴더에 exam4.png로 첨부되었습니다
<table border="1">
  <tr>
    <td>월</td>
    <td>화</td>
    <td>수</td>
    <td>목</td>
    <td>금</td>
    <td>토</td>
    <td>일</td>
  </tr>

  <tr>
    <td colspan="2">쌀밥</td>
    <td colspan="3">잡곡밥</td>
    <td>스파게티</td>
    <td>짜장면</td>
  </tr>

  <tr>
    <td rowspan="2">불고기</td>
    <td>떡갈비</td>
    <td>돈까스</td>
    <td>오징어볶음</td>
    <td rowspan="3">제육볶음</td>
    <td rowspan="2">피클</td>
    <td rowspan="2">단무지</td>
  </tr>

  <tr>
    <td colspan="3">단무지</td>
  </tr>

  <tr>
    <td colspan="4">특식 : 라면</td>
    <td colspan="2">특식 : 냉면</td>
  </tr>
</table>

 

5. 요구사항을 만족하는  코드로 작성하시오.
 - 폼의 이름(회원가입양식) 과 테두리를 표현하시오.
 - 아이디를 입력받는 요소를 만들고 공백을 허용하지 않아야합니다
 - 아이디를 입력받는 요소는 “원하는 아이디를 입력하세요"라는 가이드 문자를 제공합니다
 - 패스워드는 입력이 비밀로 입력되어야 합니다.
 - 이메일을 입력하되 양식에 맞지 않으면 반려되어야합니다(경고문구)
 - 성별을 입력받는 버튼은 둘중 하나만 선택되어야하며 로딩시 남자가 선택되어있어야 합니다.
 - 생년월일을 입력받을시 2020년 1월 1일을 포함하여 이후는 선택되어서는 안됩니다.
 - 나이를 입력할시 선택할수 있는 값은 1~100까지로 제한합니다.
  <form>
    <fieldset>
      <legend>회원가입양식</legend>
      <p>아이디 : <input type="text" required placeholder="원하는 아이디를 입력하세요"></p>
      <p>패스워드 : <input type="password" ></p>
      <p>이메일 : <input type="email"></p>
      <p>여자<input type="radio" name="gender"> 남자<input type="radio" name="gender" checked></p>
      <p>생년월일 : <input type="date" max="2019-12-31"></p>
      <p>나이 : <input type="number" min="1" max="100"></p>
    </fieldset>
  </form>

'웹프로그래밍 HTML > 입력양식과 공간 분할 태그' 카테고리의 다른 글

HTML 웹페이지 만들어보기  (0) 2025.03.10
공간 분할 태그  (0) 2025.03.06
입력 양식 태그  (0) 2025.03.06
HTML5와 입력 양식 요소  (0) 2025.03.05