HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.

Presentation on theme: "HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기."— Presentation transcript:

1 HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기

2 Html+javaScript 프로젝트 설명 3.1 HTML 을 이용한 회원 정보 입력 양식 만들기

3 Html+javaScript 익혀야 할 기능 3.1 HTML 을 이용한 회원 정보 입력 양식 만들기 ￭ 화면의 배경색 설정하기 : 배경 화면을 원하는 색으로 설정한다. ￭ 특수 문자 입력하기 : 키보드에 없는 특수문자를 입력한다. ￭ FORM 태그 : 입력 양식의 내용과 제어를 넘겨주는 FORM 태그를 사용한다. ￭ 테이블 : 표를 만들고 표 안에 입력 양식을 삽입한다. ￭ 텍스트 입력 상자 : 사용자로부터 텍스트를 입력받을 수 있는 상자를 만든다. ￭ 패스워드 입력 상자 : 사용자로부터 패스워드를 입력받을 수 있는 상자를 만든다. ￭ 콤보 박스 : 선택 목록을 만드는 콤보 박스를 만든다. ￭ 라디오 버튼 : 하나만 선택 가능한 라디오 버튼을 만든다. ￭ 체크 박스 : 복수개의 선택이 가능한 체크 박스를 만든다. ￭ 여러 줄 입력 상자 : 긴 내용의 텍스트를 입력받을 수 있는 상자를 만든다. ￭ SUBMIT 버튼 : 입력을 완료한 후 내용을 서버로 전송시키는 버튼을 만든다. ￭ RESET 버튼 : 입력된 내용을 모두 초기값으로 만드는 버튼을 만든다.

4 Html+javaScript 지시 사항 (1) 3.1 HTML 을 이용한 회원 정보 입력 양식 만들기 ￭ 배경 화면의 색깔을 DDAD00 으로 설정한다. ￭ 제목 폰트의 크기는 6 으로 하며 색깔은 파란색으로 설정한다. ￭ 제목과 입력 양식 테이블 사이에 구분선을 삽입한다. ￭ 입력 양식 테이블은 가로 600 픽셀, 세로 350 픽셀의 크기로 만든다. 표의 테 두리 두께는 1 픽셀로 하며 표의 각 셀과 데이터의 간격은 5 픽셀로 하고, 표 안의 내용은 가운데 정렬한다. ￭ 각 입력란에는 각기 다른 특수 문자를 삽입한다. ￭ 이름 입력란은 최대 10 글자를 입력할 수 있게 한다. ￭ 암호 입력란의 암호는 최대 10 글자이며 사용자가 입력한 내용이 화면에 "*" 나 " ● " 로 표시되게 한다.

5 Html+javaScript ￭ 전화번호 입력란의 전화번호는 크게 지역번호, 국번, 번호로 구분하고 지역 번호는 최대 3 자를 입력 가능하게 하며 초기값으로 "02" 가 나타나게 한다. 국 번과 번호는 최대 4 자를 입력할 수 있게 한다. ￭ 직업 입력란에는 콤보 박스 메뉴 ( 혹은 드롭다운 상자, 풀다운 메뉴 ) 를 이용 하여 " 학생, 교수, 아줌마, 백수 " 중에 하나를 선택하게 한다. 초기값을 " 학생 " 으로 설정되게 한다. ￭ 성별 입력란은 라디오 버튼을 이용하여 " 남자, 여자 " 중 하나를 선택하게 한 다. ￭ 취미 입력란은 체크 박스를 이용하여 복수 개를 선택할 수 있게 한다. ￭ 자기 소개하는 글 입력란은 긴 내용의 텍스트를 입력받을 수 있게 만들고, 초기값으로 " 자기를 소개하는 글을 쓰세요 " 라는 문장이 나타나게 한다. ￭ 맨 밑에 " 등록하기 " 버튼을 만들어 입력이 완료된 후에 다른 페이지로 이동 하게 한다. ￭ " 등록하기 " 버튼 옆에 " 취소하기 " 버튼을 만들어 입력된 내용을 한번에 지 울 수 있게 한다. 지시 사항 (2) 3.1 HTML 을 이용한 회원 정보 입력 양식 만들기

6 Html+javaScript 3.2 학습 내용 [ 단계 1] 문서 제목과 배경색 지정하기 간단한 회원 정보 입력 양식

7 Html+javaScript 3.2 학습 내용 [ 단계 2] 제목 부분과 구분선 만들기 간단한 회원 정보 입력 양식

8 Html+javaScript 3.2 학습 내용 [ 단계 3] 입력 테이블 만들기......

9 Html+javaScript 3.2 학습 내용 [ 단계 4] 여러 종류의 입력 상자 만들기 ♣ 이름 ∇ 암호 ☎ 전화번호 - -

10 Html+javaScript 3.2 학습 내용 [ 단계 5] 콤보 박스 만들기 ㉠ 직업 학생 교수 아줌마 백수

11 Html+javaScript 3.2 학습 내용 [ 단계 6] 라디오 버튼 만들기 ⓐ 성별 남자 여자

12 Html+javaScript 3.2 학습 내용 [ 단계 7] 체크 박스 만들기 ⓑ 취미 바둑 게임 낚시 독서

13 Html+javaScript 3.2 학습 내용 [ 단계 8] 여러 줄을 입력하는 입력 상자 만들기 자기 소개하는 글 자기를 소개하는 글을 쓰세요

14 Html+javaScript 3.2 학습 내용 [ 단계 9] SUBMIT, RESET 버튼 만들기

15 Html+javaScript 3.2 학습 내용 [ 단계 10] 모든 단계를 정리하여 완성된 화면

16 Html+javaScript 3.3 집중탐구 (1) 태그 ￭ 태그의 형식 표제목 또는...

17 Html+javaScript 3.3 집중탐구 ￭ TABLE 의 속성 속성설명 WIDTH 표의 너비를 설정하며 % 나 픽셀수를 사용함. HEIGHT 표의 높이를 설정하며 % 나 픽셀수를 사용함. BORDER 표의 테두리 값을 설정함. 0 으로 설정하면 테두리가 보이지 않게 됨. ALIGN 정렬 방식을 설정함. 속성 값 left 는 표를 왼쪽으로 정렬, center 는 가운데로, right 는 오른쪽으로 정렬함. CELLSPACIN G 표에서 각 셀 간의 간격을 설정함. CELLPADDIN G 표에서 셀과 안의 내용간의 간격을 설정함.

18 Html+javaScript 3.3 집중탐구 ￭,, 태그의 속성 값 속성설명 WIDTH 셀의 너비를 설정하며 퍼센트 값이나 픽셀의 값을 사용함. HEIGHT 셀의 높이를 설정하며 퍼센트 값이나 픽셀의 값을 사용함. ALIGN 수평에서 정렬 방식을 설정함. 속성 값 left 는 왼쪽으로, center 는 가운데로, right 는 오른쪽으로 정렬함. VALIGN 수직에서 정렬 방식을 설정함. 속성 값 top 은 위로, middles 은 가운데로, bottom 은 아래로 정렬함. ROWSPA N 하나 이상의 행에 존재하는 셀을 만듦. 세로 방향으로 셀을 합칠 때 사용함. COLSPAN 하나 이상의 열에 존재하는 셀을 만듦. 가로 방향으로 셀을 합칠 때 사용함. BGCOLO R 셀의 배경색을 결정할 때 사용함.

19 Html+javaScript 3.3 집중탐구 (2) 태그 활용 1 화면처럼 Html 소 스를 만들어 본다.

20 Html+javaScript 3.3 집중탐구 (3) 태그 활용 2

21 Html+javaScript 3.3 집중탐구 (4) FORM 태그 ￭ 속성 속성설명 ACTIO N 사용자가 SUBMIT 버튼을 눌렀을 때 내용과 제어를 전달할 파일의 위치정보를 지정하는 속성. METH OD 내용을 전달할 때 사용되는 방식을 지정함. 속성 값은 변수명으로 넘겨주는 방식인 POST 와 내용을 URL 의 뒤에 포함해서 넘겨주는 방식인 GET 가 있음. ENCTY PE 보내지는 데이터의 형식을 지정하여 주는 속성. 많은 경우에 생략됨.

22 Html+javaScript 3.3 집중탐구 (5) 태그 속성설명 TYPE 입력 양식의 타입을 지정하는 속성. NAME 입력 값에 대한 이름을 결정하는 속성. CGI 등의 프로그램으로 전달시 변수명이 되며 이름은 다르게 설정해야함. VALUE 입력 양식의 기본값을 지정하는 속성. SIZE 입력 양식의 크기를 지정하는 속성. MAXLENGT H 입력 양식에 입력할 수 있는 문자의 최대 값을 나타내는 속성. CHECKED TYPE 속성 값이 checkbox 나 radio 일 때 초기값으로 선택해 놓을 상자나 버튼을 지정해놓음.

23 Html+javaScript 3.3 집중탐구 ￭ TYPE 속성 값 속성 값설명 text 한 줄의 텍스트 입력란을 만듦. SIZE 속성 값은 입력하는 문자의 수를 나타냄. password text 와 유사하지만 사용자가 입력한 내용이 "*" 나 " ● " 로 나타남. SIZE 속성 값은 입력하는 문자의 수를 나타냄. checkbox 같은 그룹 내의 항목 중 여러 개의 항목을 선택할 수 박스를 만듦. 각 항목을 한 번 클릭하면 선택되고, 다시 한번 클릭하면 선택이 해제됨. 같은 그룹 내의 NAME 속성 값은 같게 설정해야함. VALUE 속성 값은 다른 프로그램으로 전송되는 변수 값이므로 다르게 설정해야함. radio 같은 그룹 내의 항목 중 하나의 항목만을 선택할 수 있는 버튼을 만듦. 같은 그룹 내의 NAME 속성 값은 같게 설정해야함. VALUE 속성 값은 다른 프로그램으로 전송되는 변수 값이므로 다르게 설정해야함. submit 사용자가 입력한 내용을 서버나 다른 프로그램으로 전송하기 위한 버튼을 만듦. VALUE 속성 값은 버튼 위에 표시되는 텍스트 내용을 나타냄. reset 입력 양식에 입력한 내용을 전부 지우기 위한 버튼을 만듦. VALUE 속성 값은 버튼 위에 표시되는 텍스트 내용을 나타냄. image submit 이나 reset 버튼을 대신할 이미지를 적용시킴. hidden 양식을 사용자가 볼 수 없지만 특정한 데이터를 저장하고 활용하는 프로그램에서 사용하기 위해 만듦.

24 Html+javaScript 3.3 집중탐구 (6) 텍스트 입력 양식 활용 첫번째 입력란 : 두번째 입력란 : 세번째 입력란 :

25 Html+javaScript 3.3 집중탐구 (7) 체크 박스 양식 활용 내가 좋아하는 음식 짜장면 울면 짬뽕 볶음밥 탕수육

26 Html+javaScript 3.3 집중탐구 (8) 라디오 버튼 양식 활용 내가 제일 좋아하는 음식은 ? 짜장면 짬뽕 울면 탕수육

27 Html+javaScript 3.3 집중탐구 (9) SUBMIT 버튼 양식 활용 SUBMIT 버튼 연습 사용자 이름 : 암 호 :

28 Html+javaScript 3.3 집중탐구 (10) RESET 버튼 양식 활용 RESET 버튼 연습 사용자 이름 : 암 호 :

29 Html+javaScript 3.3 집중탐구 (11) 태그 항목 1 항목 2...

30 Html+javaScript 3.3 집중탐구 (12) 태그 초기에 출력할 문자열