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 |