[웹 프로그래밍]중간고사 시험 정리

류명운

·

2014. 6. 28. 22:44

반응형

80점 -_-머냐 그.. 손 코딩으로 시험 다나옴.

 윀프로그래밍.hwp


1장 인터넷과 웹 환경의 발전

1.1인터넷의 역사

인터넷이란 용어는 전 세계 컴퓨터들을 하나로 연결한다는 의미의 인터-네트워크라는 단어에서 유래되었다.

인터넷의 탄생 -> 미국 국방성에서 군사적 목적으로 ARPANET 시스템 구축 IP전송프로토콜 사용

(WWW)의 탄생->팀 버너스 리라는 사람이


웹의 개념 제시(하이퍼텍스트개념)

웹브라우저의 보급->1993 마크 안드리센과 에릭 비나가 모자익(Mosaic)이라는 웹 브라우저를 개발

웹브라우저의 대중화->1994 넷스케이프 내비게이터 웹 브라우저가 대중화에 크게 기여함

WWW 컨소시엄(W3C)의 결성->웹에 관련된 다양한 표준안을 제정 및 개발

1.2HTML의 발전

마크업 언어->예전의 활자 시대에 인쇄 교정지에 펜으로 표시하는 수기형태의 주석을 뜻하는마크-에서 유래

대표적인 마크업 언어로는 SGML,HTML,XML. HTML언어는 SGML표준에 정의되었음.

HTML5->차세대 웹문서 표준안 / 모질라,애플,오페라 등 웹브라우저 개발사 들이 주도하여 만들어냄. 후에 W3C

가담하여 HTML5 개발에 참여함

HTML5 언어의 특징(다음 중 HTML5에 대한 특징이 아닌 것은?)

->1. 강화된 요소 및 속성 2. Javascript를 통한 다양한 API 제공

3. CSS3 완전지원 4. 모바일 웹 환경 고려

 

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

자바스크립트를 통한 다양한 API제공

드래그앤 드롭 API

웹브라우저 내에서 아이콘, 텍스트, 이미지, 파일 등 다양한 요소를 드래깅할 때 필요한 동작을 제어하는 API

오프라인 웹 애플리케이션 API

사용자가 인터넷에 접속할 수 없는 경우에도 계속해서 웹 에플리케이션이나 웹 문서들을 사용할 수 있도록 하기 위한 API

웹 스토리지 API

사용자가 입력한 데이터를 클라이언트 쪽의 로컬 스토리지에 저장하는 애플리케이션을 개발할 수 있다.

인덱스드 데이터베이스 API

클라이언트에 데이터베이스를 저장하고 사용하는데 필요한 API

파일 API

웹 애플리케이션에서 클라이언트 내에 있는 로컬 파일에 접근하여 내용을 읽고 쓸 수 있는 기능을 제공한다.

웹 소켓 API

서버와 브라우저 사이에 양방향 통신 채널을 제공해 주는 기술로서, 애플리케이션에서 서버에 접속하여 메시지를 주고받을 수 있게 해준다.

메세징 API

여러 개의 창에서 실행되는 애플리케이션 간에 메시지를 주고받을 수 있는 기능을 제공한다.

위치정보 API

사용자가 조작하고 있는 PC혹은 모바일 단말기에서 현재 위치를 파악할 수 있게 해주는 기능을 제공한다.

 

인터넷() 관련 기술(다음 중 인터넷 관련 기술이 아닌 것은?)

Dynamic HTML, HTML5, CSS, Javascript, DOM, XML, SVG, mobile Web

 

웹 브라우저가 제공하는 기본적인 기능들(다음 중 웹 브라우저가 제공하는 기본적인 기능이 아닌 것은?)

- 웹페이지 열기

- 최근 방문한 URL 목록 제공

- 자주 방문하는 즐겨찾기 주소록 관리

- 웹페이지의 저장 및 인쇄

- 탭을 이용하여 여러 화면 보기

- 소스파일(HTML) 보기

- 보안 및 필터에 관련된 각종 도구

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

 

대표적인 웹브라우저들->인터넷 익스플로러(웹표준 호환성이 떨어짐. 액티브X를 사용하여 보안성 취약)

모질라 파이어폭스(비영리 단체에서 발표. 모든 개발은 오픈소스 개발자원자를 통해 이루어짐.)

구글 크롬(웹표준 호환성 우수. 전세계 시장 점유율 선두)

애플사파리(매킨토시용 아이폰, 아이패드)

오페라(명맥을 유지하고 있는 웹브라우저)

 

 

(ARPANET)->미국 국방성이 군사정보의 공유를 목적으로 1969년 미국 내 4개 대학의 컴퓨터를 연결하고 고축된 시스템

 

(IP)->세계 최초로 패킷교환방식에 의한 데이터 전송을 위하여 채택한 프로토콜

 

WWW()의개념->(팀 버너스리)가 처음 제안. 정보를 연결하는 (하이퍼링크 개념)

 

WWW컨소시엄(W3C)->웹 관련 다양한 기술 발전에 논의하고 기술 표준안을 개발

 

(웹브라우저)->사용자가 웹 정보를 편리하게 볼 수 있도록 만든 프로그램

 

(모자익)->최초의 웹브라우저1993

 

(넷스케이프 내비게이터)->1994년 개발된 웹브라우저. 웹의 대중화에 크게 기여

 

(마크업 언어)->활자인쇄 인쇄교정지에 펜으로 수기형태에서 유래. 대표적인 마크업 언어로는 (SGML,HTML,XML). HTML언어는 (SGML)표준에 정의되었음.

 

(자바스크립트)->HTML5에서 인터랙티브 웹 페이지를 만들기 위해사용됨. 다양한 API를 갖고 있음

 

(URL)->프로토콜, 호스트 주소, 디렉토리로 구성됨. 웹페이지나 웹페이지에포함된 정보의 위치를 알려주는 주소표기방식

 

(스타일시트)->웹에서 작성된 문서의 외형 스타일을 좀 더 손쉽고 빠르게 지정하는 언어

 

HTML->hyper text markup language (중요)

HTTP->hyper text transfer protocol (중요)

TCP/IP->transmission control protocol/internet protocol (중요)

URL->uniform resource locator (중요)

 

인터넷은 상업적인 목적으로 개발되었다 (X)

 

다음 중 인터넷에 적용된 표준 기술이 아닌 것은? (3)

HTTP HTML CERN URL

 

 

2HTML5 문서 기본

HTML문서-> 태그로 표기하는 요소와 요소의 속성으로 이루어져 있다.

웹 문서의 시작-> <!DOCTYPE> 웹브라우저가 html5 문서규약으로 만들어진 웹 문서를 올바르게 처리하기 위해서는

<!DOCTYPE html>를 웹 문서 처음에 위치해야 한다.

문자 인코딩을 나타내기 위해서 <meta>요소를 사용 -> <meta charset=“UTRF-8”>

주석-> <!-- 주석내용 -->

특수문자-> &nbsp;(공백) &lt;(<) &gt;(>) &quot;(“) &amp;(&)

단락과 줄

<h1>~<h6>

단락제목 1이 제일 큰 단락

<p>

단락과 단락 사이에 공백

<br>

줄 바꿈

<hr>

가로줄 삽입

<pre>

형식유지

<blockquote>

인용(들여쓰기)

다양한 텍스트 표현

strong

텍스트 강조

em

텍스트 구분(외국어.)

small

작은 글씨 표현

mark

하이라이트 효과(형광펜 효과)

sub / sup

첨자 넣기 sub(아래첨자) sup(윗첨자)

목록 나열하기

<ul>

<li></li>

<li></li>

</ul>

ul->순서 없는 목록

li->목록의 항목

<ol>

<li></li>

<li></li>

</ol>

ol->순서 있는 목록

li->목록의 항목

<dl>

<dt>이름</dt>

<dd>설명</dd>

</dl>

dl->정의 목록을 만들기 위해사용

dt->정의할 용어의 제목

dd->정의할 용어의 설명

테이블만들기

<table border=“1”> //테이블만들기 . 테이블테두리“1”

<caption></caption>//표의캡션

<thead>//표의제목행표현

<th></th> //테이블의 제목줄(글씨 진하게 표시)

<td rowspan=“2”></td>//상하 병합

<td colspan=“2”></td> //좌우 병합

</thead>

<tfoot>//표의마지막행표현 (head->foot->body순으로 위치)

<tr> //행만들기

<td></td> //셀만들기

</tr>

</tfoot>

<tbody>//표의본문행표현

<tr> //행만들기

<td></td> //셀만들기

</tr>

</tbody>

</table>

<table>테이블만들기

<caption>표의캡션

<thead>표의제목행

<tfoot>표의마지막행

<tbody>표의본문행

<th>제목줄(글씨진하게표시)

<tr>행만들기

<td>셀삽입

border=“1” 테두리두께 1

rowspan=“2” 상하2칸병합

colspan=“2” 좌우2칸병합

<div>요소

<span>요소

콘텐츠를 그룹화하는데 사용하는 요소.

한 줄의 공간을 준비하여, 블록 단위로 영역을 묶음

인라인 단위로 영역을 묶는다. 입력하는 내용만큼 공간을 준비한다.

블록요소 ->문서 구조 요소, 새로운 행에 작성

줄 바꿈 태그를 사용하지 않아도 스스로 줄바꿈이 됨.

주변에 일정량의 공간을 만든다. 또한 너비를 정해주지 않으면 가로로 가득 찬다.

인라인요소->

텍스트 요소, 기존 글에 이어서 작성된다.

줄 바꿈 태그를 사용하지 않으면 가로로 쭉 나열된다.

주변에는 공간이 생기지 않는다.

요소의 id속성

요소의 class속성

문서에 하나의 요소를 참조하기 위해 사용

여러개의 요소를 참조하기 위해 사용

(class속성와 id속성을 비교하여 간략히 설명하시오.)

문서의 구조화

<header>......</header> //머리말영역

<nav>......</nav> //다른 웹 문서나 문서내의 다른 부분으로 이동할때

<article> //문서의 주요 내용

<section>......</section>//비슷한 그룹을 묶을 때

<section>......</section>//비슷한 그룹을 묶을 때

<section>......</section>//비슷한 그룹을 묶을 때

</article>

<aside> //왼편이나 오른편에

... 나타나는 정보를

</aside> 구분하기 위해

 

 

<footer>......</footer> //문서의 저자 정보, 저작권 정보, 이용조건 등을 나타낼 때

 

 

웹 문서는 웹 문서의 종료를 알려주는 (DOCTYPE) 정보로 시작하며 HTML5 문서를 나타내기 위해서는 (!DOCTYPE html)를 사용해야 한다.

 

(meta) 요소는 문서 제목 외에 문서에서 사용하고 있는 (문자 인코딩) 정보와 같은 다른 정보를 나타내기 위해서 사용한다.

 

웹 문서는 (태그)로 표현되는 (요소{element})로 구성되어 있다.

 

요소의 (속성)요소에 추가 정보를 주기 위해서 사용한다.

 

웹 문서에서 공백문자를 나타내기 위해서 사용하는 특수문자는 (&nbsp;) 이다.

 

목록형식에서 순서 없는 목록 형식은 (<ul>) 순서 있는 목록 형식은 (<ol>), 사전 목록을 위한 (<dl>) 요소가 있다.

 

table제목 줄 부분에는 (<hr>) 요소를 사용하며 행을 병합 할 때에는 (rowspan) 열을 병합 할 때에는 (colspan)을 사용한다.

 

(문서 구조화) 요소 중 (nav) 요소는 다른 웹 문서나 문서내의 다른 곳으로 이동하는 영역을 나타낼 때 사용한다.

 

표에서 을 만들 때는 (<td>)요소를 사용하여 각 셀을 만든다.

 

html5에서는 표현과 관련된 요소의 사용하지 않는 것을 권장하고 있다. (대표적인 표현요소로는 <b>,<i>,<blink>등이 있다.)

-> 화면 표현은 스타일 시트를 사용하는 것을 권장하고 있다. (중요)

 

(문서 구조화)?

->웹 문서 안에 있는 문장의 의미를 특정의미를 가진 요소를 사용하여 명확하게 나타내는 것

 

다른 글의 내용을 인용할 때 사용하는 요소는? (<blockquote>요소)

 

다음 중 텍스트 표현 요소가 아닌 것은? (3)

<strong>요소 <small>요소 <pre>요소 <mark>요소

 

다음 중 표와 관련 없는 요소는? (3)

<thead>요소 <tbody>요소 <tcaption>요소 <tfoot>요소

 

문서 구조화가 필요한 이유

->최근에는 장애인을 위한 스크린 리더와 같이 사람이 아닌 컴퓨터가 문서를 이해해야 하는 경우가 늘어나고 있다. 그래서 컴퓨터가 이해할 수 있도록 문서를 <header><nav><article><section><aside>등의 요소를 사용하여 구조화 시킨다.

 

3장 링크와 멀티미디어

하이퍼텍스트

하이퍼미디어

텍스트 조각들을 연결하여 원하는 정보를 찾아갈 수 있도록 해줌.

텍스트 뿐 만 아니라 이미지, 그래픽, 오디오, 비디오 등의 멀티미디어 정보가 서로 연결되어 있는 것

 

HTML문서에서 하이퍼링크의 기본적인 개념은 노드와 링크로 표현된다.

노드-> HTML 문서나 멀티미디어 정보를 표현하는 기본단위

링크-> 노드를 연결하여 내비게이션이 가능토록 하는 구성요소(정해진 경로로 이동)

앵커-> 링크의 출발점이나 도착점을 의미 // <a>요소를 사용 ex))<a href=“xx”></a> - 출발지설정

 

문서 간 이동(다른 웹 문서) - href속성

절대 주소

상대 주소

이동하고자 하는 페이지의 http://로 시작하는 url형식

ex))<a href=“http://www.bible.ac.kr” title=”한국성서대학교“>클릭</a>

http://로 시작하지 않을 경우. (현재의 문서와 같은 폴더의 위치 등에 있을 경우)

ex)) <a href=“biblemain.html” title=”한국성서대학교“>클릭</a>

문서 내 특정 위치로 이동(같은 웹 문서) - href속성

<a id=“n”> 문서 내 이동할 목적지</a>

<a href=“#n”>시작 점</a> //클릭 시 id값이 n<a>요소의 위치로 이동

 

<iframe>으로 다른 문서의 내용 표시하기 ->

새로운 페이지를 열지 않고 기존 페이지에서 링크로 연결된 내용을 볼 수 있다.

<iframe>요소의 사용법

다른 페이지를 표현 할 때

문서의 내용 같이 볼 때

<iframe src=“주소” width=“” height=“높이” name=“이름”></iframe> //주소에 적은 페이지를 보여준다. 속성으로 width height등을 설정할 수 있다.

<a href=“주소” target=“intro”></a>

<iframe src=“” name=“intro”></iframe> //src부분은 공백으로 두고 nametarget과 동일한 이름을 적으면 그 이름 값을 target으로 가진 a href에서 가리키는 주소를 보여준다.

 

이미지 사용하기

웹브라우저에서 공통적으로 사용할 수 있는 이미지 파일 종류로는 GIF, JPEG, PNG가 있다.

GIF-> 색상의 개수가 많지 않은 이미지를 다룰 때(클립아트나 드로잉 같은 종류의 이미지)

JPEG-> 색상을 많이 사용하는 이미지에 적합 하다(고화질)

PNG-> 잘 안쓴다나는

<img>요소의 사용법

<img src=“파일이름” width=“크기” height=“크기alt=“오류났을 경우 대체 텍스트”>

HTML5에서 추가된 이미지 요소->

<figure> -> 그림, 사진, 텍스트 등의 콘텐츠를 함께 묶을 때 사용하는 요소

<figcaption> -> <figure>요소의 제목을 표현하는 요소

 

오디오와 비디오 다루기 -<audio> <video>

오디오/비디오 파일 형식 (안중요할듯)

MP3(*.mp3) //오디오형식

Wave(*.wav, *.wave) //오디오형식

MPEG4(*.mp4, *.m4v) //비디오형식

Ogg(*.ogg, *.ogv) //스트리밍방식

WebM(*.webm) //멀티미디어

<audio>요소 사용하기

<audio controls autoplay loop=“2” src=“재생할파일이름”> //controls속성은 미디어 제어기를 표시 한다는 뜻

</audio> //autoplay 파일이 로드되자마자 자동으로 재생

//loop 사운드를 반복 재생시킬 횟수

<audio controls autoplay> //source요소는 브라우저에서 지원을 하지않는 타입

<source src=“x.mp3” type=“audio/mp3”> //일 경우를 방지하려고 여러 형식의 파일을

<source src=“x.ogg” type=“audio/ogg”> //지정해서 맞는 것을 재생시키라 하는 것

</audio>

<audio src=“” preload=“”></audio> //preload 미리 다운하기 속성

<audio src=“” preload=“auto”></audio> //auto(기본값)페이지를 로드하고 바로 오디오파일을 다운

<audio src=“” preload=“metadata”></audio> //metadata 재생시키기 전까지 오디오관련정보 등만 다운

<audio src=“” preload=“none”></audio> //none 재생시키기 전까지 오디오파일 다운하지 않는다.

 

<video>요소 사용하기(audio와 동일)

<video controls autoplay src=“재생할파일이름”> //controls속성은 미디어 제어기를 표시 한다는 뜻

</video> //autoplay 파일이 로드되자마자 자동으로 재생

<video src=“” preload=“”></video> //preload 미리 다운하기 속성

<video src=“” preload=“auto”></video> //auto(기본값)페이지를 로드하고 바로 비디오파일을 다운

<video src=“” preload=“metadata”></video> //metadata재생시키기전까지 비디오관련정보(첫프레임)등만 다운

<video src=“” preload=“none”></video> //none 재생시키기 전까지 비디오파일 다운하지 않는다.

 

 

HTML 문서에서 링크의 출발점이나 도착점을 의미하는 (앵커)는 문서 내원하는 위치를 지정할 때 설정한다.

 

링크로 연결된 문서를 새로운 브라우저 화면으로 이동하지 않고 같은 화면 내에서 보려면 브라우저 페이지 내에 다른 웹 페이지를 삽입하여 주는 (iframe) 요소를 사용한다.

 

<a> 요소에서 (href)속성은 이동하고자 하는 목적지 문서의 주소를 표기하는데 사용되고, (title)속성은 하이퍼링크에 대한 설명을 하고자 할 때 사용된다.

 

<img>요소의 (alt)속성은 웹 페이지 화면에 이미지를 로드시키지 못할 경우 그 위치에 지정한 텍스트가 대신 출력된다.

 

<audio>요소 내에 (source)요소를 이용하여 여러 형식의 오디오 파일을 지정해서 웹브라우저에서 재생 가능한지 확인을 한다.

 

비디오를 미리 로딩하여 초기에 지연되는 것을 방지하도록 하는 (preload)속성은 사용자가 동영상을 실행하기 전에 페이지 로드 될 때 미리 다운로드 한다.

 

<audio>요소에서 파일이 로드되자마자 자동으로 재생시켜주는 속성은 (autoplay)이다.

 

<a (id=“x”)>목적지</a> <a (href=“#x”)>출발지</a>

 

그림, 사진, 다이어그램과 텍스트 등의 콘텐츠를 묶어서 하나의 독립된 단위로 지정하고 싶을 때는 (figure) 요소를 사용한다.

 

오디오와 비디오를 삽입할 때 기본적인 미디어 제어기를 표시하기 위해서는 (controls) 속성값을 삽입해야 한다.

 

웹브라우저에서 모든 오디오 및 비디오 파일 형식을 지원하지 않으므로 여러 가지 파일 형식을 지정하여 맞는게 있을 경우 사용하게 하는 요소는 (source) 이다.

 

 

4장 다양한 입력 폼(연습문제 20, 21번 꼭 풀어볼 것)

 

폼 요소는 사용자로부터 입력받은 정보를 서버에 보낼 때 사용한다.(회원가입 등..)

 

폼 사용방법

<form name=“폼의이름” method=“get또는post” action=“입력받은정보를받을주소”></form>

다양한 입력 폼

<input> //다양한 형식의 사용자 입력을 받을수 있다.

type 의 종류

- text //문자열입력 ex))<input type=“text” name=“변수명” value=“초기값”/>

- password //‘*’로 표시되는 입력필드

- radio //한 개만 선택 가능한 라디오 버튼입력

- checkbox //각 항목별로 여러 개 선택할 수 있음

- submit //전송버튼

- reset //초기화버튼

- file //파일업로드하기 위한 필드

- hidden //숨김필드

input요소의 속성

- maxlength //chleoclfh 입력할 수 있는 문자 개수를 지정

- readonly //읽기 전용 상태로 지정

- disabled //서식 요소를 사용 불가 상태로 지정

 

<textarea> //긴 문장을 입력하는 요소

- cols //한줄에 해당하는 문자수로 열의 개수지정

- rows //행의 개수지정

<select> //선택목록 중에서 하나를 선택하는 요소

- size //보여주는 option의 개수(size=2 option의 개수=4 일 때는 스크롤바가 생김)

- multiple //하나 이상의 항목을 선택할 수 있게 하려면

- option ex)) <select name=“job” size=“2”>

<option>학생</option> <option>회사원</option>

</select>

<button> //버튼 요소

get방식과 post방식

get방식

post방식

GET방식은 url뒤에 이어서 문자열로 서버에 전달을 한다. 간단한 데이터엔 적합하나 url에 정보가 그대로 노출되어 보안상 취약하다.

POST방식은 프로그램의 입출력 방식을 사용하여 전송할 데이터의 제한이 없고 정보를 드러내지 않아 보안에 유리하다.

 

입력 필드의 그룹핑

그룹핑 : <fieldset>요소

그룹의 라벨 : <legend>요소

폼 양식을 그룹핑하는 범위를 지정

fieldset요소로 그룹핑한 부분은 테두리가 생김

fieldset요소가 여러 개일 경우 그룹을 구분하기 위해 각 fieldset요소에 테두리에 제목을 붙임

 

input 요소에 추가된 입력 형식

텍스트 관련

-email //이메일 주소 입력을위한 형식

-url //url 주소 입력을 위한 형식

-tel //전화번호 입력을 위한 형식

-search //검색 창을 입력하기 위한 형식

날짜와시간

-date //날짜를 입력하기 위한 형식

-month //연도와 월을 입력하기 위한 형식

-week //연도와 주를 입력하기 위한 형식

-time //시간을 입력하기 위한 형식

색상 및 숫자

-number //숫자를 입력하기 위한 형식

-range //일정 범위의 수를 입력하기 위한 형식

-color //색상 선택을 위한 입력 형식

유효성 검사란?

->HTML5에는 사용자로부터 받은 입력 값이 형식에 맞게 입력되었는지 검사해주는 기능. 오류가 발생하면 메시지를 표시

<input>요소에서 사용되는 속성

autocomplete ->자동으로 사용자의 입력을 완성시켜줌

placeholder ->사용자가 넣어야 할 입력 값에 대한 설명을 희미하게 미리표시해줌

required ->사용자가 필수적으로 입력을 하도록 검증함

step -> 입력 필드의 숫자나 범위를 조절하는 단계를 지정함

input 요소에 추가된 입력 형식

텍스트 관련

-email //이메일 주소 입력을위한 형식

-url //url 주소 입력을 위한 형식

-tel //전화번호 입력을 위한 형식

-search //검색 창을 입력하기 위한 형식

날짜와시간

-date //날짜를 입력하기 위한 형식

-month //연도와 월을 입력하기 위한 형식

-week //연도와 주를 입력하기 위한 형식

-time //시간을 입력하기 위한 형식

색상 및 숫자

-number //숫자를 입력하기 위한 형식

-range //일정 범위의 수를 입력하기 위한 형식

-color //색상 선택을 위한 입력 형식

유효성 검사란?

->HTML5에는 사용자로부터 받은 입력 값이 형식에 맞게 입력되었는지 검사해주는 기능. 오류가 발생하면 메시지를 표시

<input>요소에서 사용되는 속성

autocomplete ->자동으로 사용자의 입력을 완성시켜줌

placeholder ->사용자가 넣어야 할 입력 값에 대한 설명을 희미하게 미리표시해줌

required ->사용자가 필수적으로 입력을 하도록 검증함

step -> 입력 필드의 숫자나 범위를 조절하는 단계를 지정함

<input>요소 말고도 html5에 새롭게 추가된 요소

<output>요소

->폼의 처리 결과를 나타내줌. (입력된 데이터로부터 자동계산 출력)

<datalist>요소

->입력 양식에 대한 내용을 미리 옵션 리스트로 제공. 검색어 자동완성 기능을 제공.

<keygen>요소

->암호화 키를 생성해줌.

 

사용자와 정보를 교환하기 위한 (form) 요소는 HTML문서 내에 사용자가 입력할 수 있는 양식을 제공한다.

 

한 줄 이상의 텍스트를 입력하기 위한 (textarea)요소는 name, cols, rows의 속성 값을 갖는다.

 

사용자로부터 입력받을 수 있는 기본적인 요소(<input>)요소에서 입력 형식을 지정하는 중요한 속성값(type)이다.

 

사용자로부터 입력 값을 받을 때 여러 항목 중에서 하나만 선택하게 하려면 (<input>)요소의 (radio)로 지정하면 된다.

 

폼 요소에서 사용자가 입력한 값을 서버로 전송하여 프로그램을 실행시키기 위해 URL(uniform resource locator?)주소를 지정하는 속성값은 (action)이다.

 

여러 개로 구성된 목록에서 사용자가 하나 또는 여러개를 선택할 수 있는 (select)요소는 아래로 펼쳐지는 드롭다운 형태로 목록을 생성한다.

 

사용자로부터 입력 받는 폼 양식이 많다면 이를 그룹핑하여 쉽게 구별할 수 있도록 테두리 선을 그려주는 (fieldset)요소를 사용하여 구분하면 된다. 구분한 테두리의 제목을 넣을 때에는 (legend)요소를 사용한다.

 

html5에는 컬러값을 입력받기 위해 컬러 선택기를 제공하는 (color)형식이 추가되었다.

 

사용자가 넣어야 할 입력 값에 대한 설명을 희미하게 미리 표시해 주는 속성값은 (placeholder)이다.

 

서버와 통신을 할 때 보안을 위해 폼 요소로 암호화 키를 생성해주는 요소는 (keygen)이다.

 

(GET)방식은 url뒤에 이어서 문자열로 서버에 전달을 한다. 간단한 데이터엔 적합하나 url에 정보가 그대로 노출되어 보안상 취약하다.

 

(POST)방식은 프로그램의 입출력 방식을 사용하여 전송할 데이터의 제한이 없고 정보를 드러내지 않아 보안에 유리하다.

 

<input>요소에서 (hidden)형식은 사용자의 ip주소나 이미 넘겨받은 데이터를 다시 표현해줄 필요가 없을 때 사용한다.

 

비밀번호나 주민등록번호와 같이 사용자가 입력하는 텍스트 값을 ‘*’로 표시하기 위한 type 형식은 (password)이다.

 

HTML5에 새롭게 추가된 <input> 요소의 type 속성이 아닌 것은?(4)

week tel range checkbox

 

다음 중 <input>요소의 속성에 대한 설명이 틀린 것은?(3)

type : 입력 형식을 지정

maxlengh : 최대로 입력할 수 있는 문자수

disabled : 읽기 전용 상태로 지정 //읽기 전용 상태는 readonly //disabled서식 요소를 사용 불가 상태로 지정

name : 입력 요소의 이름 지정

 

 

반응형