[HTML5 웹 프로그래밍 입문 4판 Chapter 04 연습 문제 포함]
04 HTML 입력 양식 태그와 구조화 태그
✨입력 양식 태그✨
입력 양식이란 사용자에게 정보를 입력받는 요소이다.
① 입력 양식 개요
- form 태그로 영역을 생성하고, form 태그 내부에 input 태그를 추가한다. 데이터를 입력하고 <제출(submit)> 버튼을 누르면 지정된 방식으로 지정된 장소에 데이터를 전달한다.
- method 속성: 입력 양식에 입력한 데이터를 전달하는 방식
- action 속성: 입력 양식에 입력한 데이터를 전달하는 장소
<body>
<form>
<input type = "text" name = "search">
<input type = "submit">
</form>
</body>
- 전송 방식으로 GET 방식, POST 방식을 가장 많이 사용한다.
<!-- GET 전송 방식 -->
<body>
<form method = "get">
<input type = "text" name = "search">
<input type = "submit">
</form>
</body>
<!-- POST 전송 방식 -->
<body>
<form method = "post">
<input type = "text" name = "search">
<input type = "submit">
</form>
</body>- GET 방식: 주소에 데이터를 입력해서 전달하며 크기가 한정된다.
- POST 방식: 주소를 변경하지 않고 비밀스럽게 데이터를 전달하며 용량에 제한이 없다.
② 입력 양식 종류
- form
- input
- textarea
- select, optgroup, option
- fieldset, legend
- select 태그: 목록의 항목 중 하나 또는 여러 개를 선택할 때 사용
- option 태그: select 태그 내부에 넣으면 옵션 선택 요소가 생성됨
- 여러 항목 선택하기: select 태그의 multiple 속성으로 여러 항목을 선택
- 선택 옵션 묶기: optgroup 태그를 사용해 선택 옵션을 그룹으로 묶음
✨HTML5 문서 구조화✨
① 공간 분할 태그
공간 분할 태그를 사용하면 자유롭게 웹 페이지 레이아웃을 구성할 수 있다. 쿠팡의 메인 페이지를 살펴보면 대표적인 공간 분할 태그인 div를 500개 이상 사용한 것을 확인할 수 있다.
| 태그 | 설명 |
| div | 블록 형식으로 공간 분할, 각 태그가 한 행을 모두 차지함 |
| span | 인라인 형식으로 공간 분할, 왼쪽에서 오른쪽으로 쌓임 |
② 시맨틱 태그
시맨틱 웹이란 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹이다.
- 시맨틱 태그: 웹 페이지의 태그에 의미를 부여하는 태그
- header: 머리말(페이지 제목, 페이지 소개)
- nav: 하이퍼링크들을 모아 둔 내비게이션
- aside: 본문 흐름에 벗어나는 노트나 팁
- section: 문서의 장이나 절에 해당하는 내용
- article: 본문과 독립적인 콘텐츠 영역
- footer: 꼬리말(저지나 저작권 정보)
✨04장 연습문제✨
[연습문제 01] 다음 문장에 O X 로 답하시오.
(1) “http://www.google.com/search?q=초콜릿” 처럼 주소에 “q=초콜릿” 데이터를 넣은 것은 POST 방식의 요청이다. (X)
(2) label 태그의 for 속성에 “입력 양식 태그의 id 속성”을 넣으면, label 태그를 선택했을 때 입력 양식에 포커스가 갑니다. (O)
(3) select 태그 내부에 opt 태그를 넣어서 선택할 수 있는 요소를 만듭니다. (X)
(4) 현대 웹 페이지의 레이아웃을 구성할 때는 테이블을 사용합니다. (X)
(5) a태그와 i태그 등 텍스트는 블록 형식의 태그입니다. (X)
(6) 모든 검파악합니다. 색 엔진은 웹 페이지에 적용된 스타일을 시각적으로 분석하고 의미를 (X)
(7) 시맨틱 태그는 시맨틱 웹을 구현할 때 사용하는 방법입니다. (O)
[연습문제 02] 다음 중 HTML5 표준에 새롭게 도입된 시맨틱 태그는?
① div 태그
② span 태그
③ article 태그
④ em 태그
[연습문제 03] 다음 중 HTML5 표준에 새롭게 도입된 시맨틱 태그가 아닌 것은?
① head 태그
② nav 태그
③ aside 태그
④ footer 태그
[연습문제 04] 사용자로부터 데이터를 입력받을 때 사용하는 태그는?
① input 태그
② data 태그
③ field 태그
④ collect 태그
[연습문제 05] HTML 입력 양식 중에서 여러 개의 선택지 중 하나를 선택하는 종류는?
① text
② checkbox
③ radio
④ buttom
[연습문제 06] select 태그 내부에서 각 항목을 만드는 데 사용하는 태그는?
① li 태그
② option 태그
③ item 태그
④ opt 태그
[연습문제 07] 다음 중에서 인라인 형식의 태그는?
① h1 태그
② div 태그
③ span 태그
④ p 태그
[연습문제 08] form 태그의 method 속성을 GET과 POST로 입력할 때, 버튼을 클릭해 서버로 데이터를 전송한 후 웹 브라우저의 주소창에 나타나는 URL 변화를 적으시오.
GET 방식은 데이터를 URL의 쿼리 문자열에 포함시켜 서버로 전송하기 때문에 사용자가 입력한 데이터가 URL에 노출되므로 보안에 취약하다. 반면에 POST 방식은 데이터가 URL에 노출되지 않아 민감한 정보를 안전하게 전송할 수 있다.
[연습문제 09] 다음 입력 양식을 만드시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<table>
<tr>
<td><label for="id">아이디</label></td>
<td><input id="id" type="text"></td>
</tr>
<tr>
<td><label for="password">비밀번호</label></td>
<td><input id="password" type="password"></td>
</tr>
</table>
<input type="submit">
</form>
</body>
</html>
[연습문제 10] 다음 입력 양식을 만드시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style4-10.css" />
</head>
<body>
<table>
<tr>
<b>시작 그룹</b>
</tr>
<tr>
<td>
<input id="new_page" type="radio" name="srartgroup" value="n" />
<label for="new_page">새 탭 페이지 열기</label><br />
<input id="stop_location" type="radio" name="srartgroup" value="sl" />
<label for="stop_location">중단한 위치에서 계속하기</label><br />
<input id="specific_page" type="radio" name="srartgroup" value="sp" />
<label for="specific_page">중단한 위치에서 계속하기</label>
</td>
</tr>
</table>
<br />
<table>
<tr>
<b>개인정보 및 보안</b>
</tr>
<tr>
<td>
<input id="synchronization" type="checkbox" name="security" />
<label for="synchronization">동기화 및 서비스</label><br />
<input id="allow_loginn" type="checkbox" name="security" />
<label for="allow_loginn">로그인 허용</label><br />
<input id="preload_page" type="checkbox" name="security" />
<label for="preload_page">페이지 미리 로드</label>
</td>
</tr>
</table>
</body>
</html>
[연습문제 11] 다음 입력 양식을 만드시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>글 작성하기</h1>
<table>
<tr>
<td>작성자</td>
<td><input type="text" name="writer" /></td>
</tr>
<tr>
<td>아이디</td>
<td><input type="text" name="id" /></td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type="text" name="email_id" />@<inputtype
="text"
name="email_add"
/>
</td>
</tr>
<tr>
<td>휴대폰</td>
<td>
<select name="tell1">
<option>010</option>
<option>011</option>
<option>017</option>
</select>
-<input type="text" name="tell2" /> -<input
type="text"
name="tell3"
/>
</td>
</tr>
<tr>
<td>글제목</td>
<td><input type="text" name="title" /></td>
</tr>
<tr>
<td>내용</td>
<td><textarea cols="20" rows="8"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="제출" /></td>
</tr>
</table>
</body>
</html>
'Study > Web' 카테고리의 다른 글
| [HTML5 웹 프로그래밍 입문 4판 Chapter 07] 연습 문제 정답 (0) | 2023.12.23 |
|---|---|
| [HTML5 웹 프로그래밍 입문 4판 Chapter 06] 연습 문제 정답 (0) | 2023.12.22 |
| [HTML5 웹 프로그래밍 입문 4판 Chapter 05 연습 문제 포함] (0) | 2023.10.23 |
| [HTML5 웹 프로그래밍 입문 4판 Chapter 03 연습 문제 포함] (0) | 2023.09.30 |
| [HTML5 웹 프로그래밍 입문 4판 Chapter 02 연습 문제 포함] (0) | 2023.09.19 |
