📚 [Archive] CS & AI 스터디/[STUDY] HTML5 입문 🌐

[HTML5 웹 프로그래밍 입문 3판]-4장 HTML5 입력 양식 태그와 구조화 태그 (4장 연습 문제 및 정답)

히주 2024. 10. 20. 01:17

 

 

 

1. 입력 양식 태그

1) 입력 양식

  - 사용자에게 정보를 입력받는 요소

 

 

2)  입력 양식 개요

  - <form> 태그 : 영역 생성

 

 

3) 데이터 전달 방식

  - <form>태그는 method속성의 방식으로 action 속성 장소에 데이터 전달

 

  ▪ GET 방식 – 주소에 데이터를 입력해서 전달

  ▪ POST 방식 – 주소 변경 없이 비밀스럽게 데이터 전달

 

 

4) 입력 양식 종류

 

 

 

2. HTML5 문서 구조화

1) 공간 분할 태그

 - css로 원하는 레이아웃을 구성하기 위해 공간 분할

 - <div> 태그 (블록 형식으로 공간 분할), <span> 태그 (인라인 형식으로 공간 분할)

 

 

2) 시맨틱 태그

 - 시맨틱 웹

    > 특정 태그에 의미를 부여한 웹

    > 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹

 

 - 시맨틱 태그를 사용한 시맨틱 웹 구현

 

 

 

 

 

연습문제

1번

(1) (        )은 사용자에게 정보를 입력받는 요소입니다.

(2) form 태그는 (          )속성의 방식으로 (           )속성 장소에 데이터를 전달합니다.

(3) (         ) 방식은 주소에 데이터를 입력해서 전달합니다.

(4) (        ) 방식은 GET 방식과 달리 비밀스럽게 데이터를 전달합니다.

(5) input 태그에 (         )속성을 지정해서 다양한 종류의 기본 입력 양식을 생성합니다.

(6) 라디오 버튼의 (       )속성을 사용하면 여러 대상 중 하나만 선택하는 형태를 구현할 수 있습니다.

(7) (            ) 태그는 목록으로 보여 주는 항목 중 하나 또는 여러 개를 선택할 때 사용하는 입력 양식 요소입니다.

(8) div 태그는 공간을 (       )형식으로 분할합니다.

(9) span 태그는 공간을 (       )형식으로 분할합니다.

(10) (          )은 컴퓨터 프로그램이 코드를 읽고 의미를 인식할  수 있는 지능형 웹을 의미합니다.

 

2번

(1) "https://www.google.com/search?q=초콜릿"처럼 주소에 "q=초콜릿" 데이터를 넣은 것은 POST 방식의 요청입니다.

(2)  label 태그의 for 속성에 "입력 양식 태그의 id 속성"을 넣으면, label 태그를 선택했을 때 입력 양식에 포커스가 갑니다. 

(3) select 태그 내부에 opt 태그를 넣어서 선택할 수 있는 요소를 만듭니다.

(4) 현대 웹 페이지의 레이아웃을 구성할 때는 테이블을 사용합니다.

(5) a 태그와 i 태그 등 텍스트는 블록 형식의 태그입니다. 

(6) 모든 검색 엔진은 웹 페이지에 적용된 스타일을 시각적으로 분석하고 의미를 파악합니다. 

(7) 시맨틱 태그는 시맨틱 웹을 구현할 때 사용하는 방법입니다.

 

3번

다음  중 HTML5 표준에 추가된 시맨틱 태그가 아닌 것은?

1. head 태그 2. nav 태그 3. aside 태그 4. footer 태그

 

4번

select 태그 내부에서 각 항목을 만드는 데 사용하는 태그는 ? 

1. li 태그 2. option 태그 3. item 태그 4. opt 태그

 

5번

다음 중에서 인라인 형식의 태그는 ?

1. h1 태그 2. div 태그 3. span 태그 4. p 태그

 

6번

form 태그의 method 속성을 GET과 POST로 입력할 때, 버튼을 클릭해 서버로 데이터를 전송한 후 웹 브라우저의 주소 창에 나타나는 URL의 변화를 적으시오. 

 

7번

다음 입력 양식을 만드시오.

 

8번

다음 입력 양식을 만드시오.

 

9번

다음 입력 양식을 만드시오

 

 

정답

1번

입력방식, method, action, GET, POST, type, post, select, 블록, 인라인,시맨틱 웹

 

2번

x, o, x, x, x, x, o

 

3번

1

 

4번

2

 

5번

3

 

6번

GET 방식을 사용하면 URL 마지막 부분에 데이터가 추가된다.

POST 방식을 사용하면 URL 마지막 부분에 변화가 없다.

 

7번

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <form>
                <table>
                    <tr>
                        <th>아이디</th>
                        <td><input id="id" type="text"></td>
                    </tr>
                    <tr>
                        <th>비밀번호</th>
                        <td><input id="password" type="password"></td>
                    </tr>
                    <tr>
                        <th></th>
                        <td><input type="submit" value="제출"></td>                    
                    </tr>
                </table>
               
        </form>
    </body>
</html>


 

8번

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <form>
            <b>시작 그룹</b><br>
            <input type="radio" name="시작 그룹" checked>새 탭 페이지 열기<br>
            <input type="radio" name="시작 그룹">중단한 위치에서 계속하기<br>
            <input type="radio" name="시작 그룹">특정 페이지 또는 페이지 모음 열기<br>
            <br>
            <b>개인정보 및 보안</b><br>
            <input type="checkbox" name="개인정보 및 보안" checked>동기화 및 서비스<br>
            <input type="checkbox" name="개인정보 및 보안" checked>로그인 허용<br>
            <input type="checkbox" name="개인정보 및 보안">페이지 미리 로드<br>
        </form>
    </body>
</html>

 

9번

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <form>
            <h1>글 작성하기</h1>
            <table>
                <tr>
                    <th>작성자</th>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <th>아이디</th>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <th>이메일</th>
                    <th><input type="text">@<input type="text"></th>
                </tr>
                <tr>
                    <th>휴대폰</th>
                    <td>
                        <select><option>010</option></select>-<input type="text">-<input type="text">
                    </td>
                </tr>
                <tr>
                    <th>글제목</th>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <th>내용</th>
                    <td><textarea cols="30" rows="10"></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="제출"</td>
                </tr>
            </table>
        </form>    
    </body>
</html>

'📚 [Archive] CS & AI 스터디 > [STUDY] HTML5 입문 🌐' 카테고리의 다른 글

[HTML5 웹 프로그래밍 입문 3판]-1장 웹 개요와 실습 환경 구축 (1장 연습 문제 및 정답)  (5) 2024.10.20
[HTML5 웹 프로그래밍 입문 3판]-3장 HTML5 기본 태그 정리 (3장 연습 문제 및 정답)  (2) 2024.10.19
[HTML5 웹 프로그래밍 입문 3판]-2장 웹 페이지 기본 구조와 작성 방법 정리 (2장 연습 문제 및 정답)  (3) 2024.10.19

'📚 [Archive] CS & AI 스터디/[STUDY] HTML5 입문 🌐'의 다른글

  • 현재글[HTML5 웹 프로그래밍 입문 3판]-4장 HTML5 입력 양식 태그와 구조화 태그 (4장 연습 문제 및 정답)

관련글

티스토리툴바