HTML CSS 자바스크립트 무작정 따라하기

Presentation on theme: "HTML CSS 자바스크립트 무작정 따라하기"— Presentation transcript:

1 HTML CSS 자바스크립트 무작정 따라하기

2 Chapter 05. 표와 폼 다루기

3 HTML CSS 자바스크립트 무작정 따라하기
학습목표 표를 만들 수 있다. 필요한만큼 행과 열을 늘이거나 줄일 수 있다. 표에서 헤더와 푸터, 본문을 나누어 작성할 수 있다. 다양한 형식의 폼을 삽입할 수 있다. CSS를 사용하여 표에 적절한 테두리를 그릴 수 있다. HTML CSS 자바스크립트 무작정 따라하기

4 HTML CSS 자바스크립트 무작정 따라하기
표 만들기 행(column)1 행(column)2 행(column)3 열(row)1 셀(cell) 열(row)2 열(row)3 열(row)4 HTML CSS 자바스크립트 무작정 따라하기

5 HTML CSS 자바스크립트 무작정 따라하기
표를 만드는 태그 1) <table> 태그 : 표의 시작과 끝을 알려주는 태그. 속성 설명 width 표의 전체 너비. 너비값이 지정되지 않으면 셀 안의 내용에 따라 너비가 달라짐 summary 표의 목적이나 요약 내용 입력. 이 내용은 장애인을 위한 음성/점자로 변환됨 2) <caption> 태그 : 표에 제목을 붙이는 태그로, 반드시 <table> 태그 바로 다음에만 사용할 수 있으면 <table> 태그 하나에 <caption> 태그 하나만 사용할 수 있다. 3) <tr>, <td>, <th> 태그 <tr> 태그 - 열(row)을 만드는 태그 <td> 태그 - 행(column)을 만드는 태그 <th> 태그 – 제목 행을 만드는 태그 속성 설명 width / height 행/열/셀의 너비와 높이를 지정한다. rowspan / colspan 지정한 개수만큼 열/행을 합치는 방법으로 여러 개의 셀을 하나의 셀로 만든댜. HTML CSS 자바스크립트 무작정 따라하기

6 HTML CSS 자바스크립트 무작정 따라하기
셀 합치고 나누기 1) 행 합치기 - colspan 속성 여러 칸을 합치기 위해서는 <td> 태그나 <th> 태그 안에서 colspan을 사용한다. 기본형식 <td colspan="합칠 행의 개수">...</td> <th colspan="합칠 행의 개수">...</th> 예 <tr> <th colspan="2“>...</th> <th>....</th> </tr> <td>…</td> HTML CSS 자바스크립트 무작정 따라하기

7 HTML CSS 자바스크립트 무작정 따라하기
셀 합치고 나누기 2) 열 합치기 - rowspan 속성 여러 열을 합치기 위해서는 <td> 태그나 <th> 태그 안에서 rowspan을 사용한다. 기본형식 <td colspan="합칠 열의 개수">...</td> <th colspan="합칠 열의 개수">...</th> 예 <tr> <td rowlspan="2“>...</td> <td>....</td> </tr> <td>…</td> HTML CSS 자바스크립트 무작정 따라하기

8 HTML CSS 자바스크립트 무작정 따라하기
헤더와 푸터, 그리고 본문 (HTML 4.01) 표의 실제 내용 부분만 제어하기 쉽도록 표를 헤더와 푸터, 본문으로 나누어 지정한다. 내용이 긴 표일 경우 헤더와 본문을 구분해 놓으면 화면을 스크롤할 때 본문만 스크롤할 수 있다. <thead> - 표의 헤더 <tfoot> - 표의 푸터 <tbody> - 표의 본문 <thead> 태그와 <tfoot> 태그가 먼저 오고 그 후에 <tbody> 태그가 와야 한다. <table> <thead> … </thead> <tfoot> </tfoot> <tbody> </tbody> </table> 기본형식 HTML CSS 자바스크립트 무작정 따라하기

9 HTML CSS 자바스크립트 무작정 따라하기
폼 삽입 - <form> 폼을 웹 문서에 삽입할 때 <form> 태그를 사용한다. <form> 태그와 </form> 태그 사이에 필요한 폼들을 삽입한다. <form> 태그 안에 또 다른 <form> 태그를 삽입할 수 없다. 기본형식 <form method="속성값" action="처리할 프로그램"> …… </form> <form> 태그에서 사용하는 속성들 속성 설명 속성값 method <form> 태그 안의 폼들을 서버에 넘겨주는 방법 선택 get,post(대부분 post를 사용) name 폼의 이름 action <form> 태그 안의 내용들을 처리해 줄 CGI 프로그램을 지정한다. CGI 프로그램 경로 HTML CSS 자바스크립트 무작정 따라하기

10 다양한 요소 삽입 - <input>
텍스트 필드나 버튼 등 여러 가지 폼 요소를 삽입할 때 사용하는 태그 <input> 태그에서는 type 속성을 사용해서 어떤 종류의 폼 요소가 삽입되는지 알려준다. 기본형식 <form> <input type=“속성 값” 기타 속성> </form> type 속성에서 사용할 수 있는 속성값 속성값 설명 text 한 줄짜리 텍스트 필드 삽입 submit 등록 버튼 삽입 password 비밀번호 필드 삽입 reset 리셋 버튼 삽입 hidden 히든 필드 삽입 button 버튼 삽입 radio 라디오 버튼 삽입 file 파일 검색 버튼 삽입 checkbox 체크박스 삽입 HTML CSS 자바스크립트 무작정 따라하기

11 다양한 요소 삽입 - <input>
type=text : 텍스트 필드 삽입 텍스트 필드(text field)란 한 줄짜리 텍스트를 입력할 수 있게 삽입하는 요소 속성 설명 name 텍스트 필드의 이름 size 텍스트 필드의 길이. 화면에 몇 글자 정도 크기로 표시할 것인지 지정하는 것 value 처음 화면에 표시되는 텍스트 maxlength 사용자가 텍스트 필드에 입력할 수 있는 최대 문자 개수 2) type=password : 비밀번호 필드 삽입 패스워드 필드는 텍스트 필드와 똑같지만 암호를 입력할 때 입력하는 내용이 그대로 표시되지 않고 *나 ●로 바뀌어 표시된다는 점이 다르다. 속성 설명 name 텍스트 필드의 이름 size 텍스트 필드의 길이. 화면에 몇 글자 정도 크기로 표시할 것인지 지정하는 것 maxlength 사용자가 텍스트 필드에 입력할 수 있는 최대 문자 개수 HTML CSS 자바스크립트 무작정 따라하기

12 다양한 요소 삽입 - <input>
3) type=radio : 라디오 버튼 삽입 여러 항목 중 한 가지만 선택하게 할 경우 사용 여러 가지 중에서 한 가지를 선택하기 위한 것이므로 2개 이상의 버튼이 하나의 그룹으로 묶여 있어야 하며, 같은 그룹으로 묶기 때문에 이름도 같아야 한다. 속성 설명 name 하나의 그룹을 이루는 라디오 버튼의 이름 value 폼을 처리할 프로그램(예, CGI)으로 넘겨줄 라디오 버튼 항목의 값 checked 초기 상태에 기본으로 체크해 놓고 싶은 항목에 넣는 속성 type=checkbox : 체크박스 삽입 여러 항목을 선택할 수 있게 할 때 사용 체크박스는 항상 그룹으로 묶을 필요는 없다. 속성 설명 name 체크박스의 이름 value 폼을 처리할 프로그램(예, CGI)으로 넘겨줄 체크박스 항목의 값입니다. checked 초기 상태에 기본으로 체크해 놓고 싶은 항목에 넣는 속성. 두 개 이상 checked로 지정할 수 있다. HTML CSS 자바스크립트 무작정 따라하기

13 다양한 요소 삽입 - <input>
5) type=“submit”, type=“reset”, type=“button” : 확인, 리셋, 버튼 웹 문서에 삽입된 버튼은 모두 모양은 같지만 type 값에 따라 그 기능이 다름 type의 유형 유형 설명 submit <form> 태그의 action에서 지정한 서버 컴퓨터 내의 프로그램을 실행하는 버튼. reset 입력 양식에 입력했던 내용을 모두 지움. button 웹 문서에 버튼 형태만 만듬. 버튼에서 사용하는 속성 속성 설명 name 다른 폼 요소들과 구분할 수 있는 버튼의 이름 value 버튼에 표시될 내용 HTML CSS 자바스크립트 무작정 따라하기

14 다양한 요소 삽입 - <input>
6) type=hidden : 히든 필드 삽입 히든 필드란 브라우저 창에는 표시되지 않지만 폼 안에는 포함되어 있는 필드를 가리킴 예) 회원 가입 폼에서의 가입 날짜, 폼메일에서 관리자 메일 주소 등 7) type=file : 파일 첨부 버튼 삽입 게시판 등에서 파일을 업로드할 때나 양식 문서에 파일을 첨부할 때 사용 HTML CSS 자바스크립트 무작정 따라하기

15 선택 목록 - <select>, <option>
기본형식 <select 속성="속성값"> <option 속성="속성값"> … </option> …… </select> 1) <select> 태그 선택 목록의 시작과 끝을 표시하는 태그 속성 설명 name 선택 목록의 이름 size 선택 목록의 크기 지정 multiple 여러 개의 항목 선택 2) <option> 태그 선택 목록의 각 항목을 표시하는 태그 속성 설명 value 각 항목을 선택했을 때 서버로 넘겨질 값 selected 초기 선택 항목 HTML CSS 자바스크립트 무작정 따라하기

16 텍스트 영역 - <textarea>
한 줄 이상의 문장을 입력할 때에 사용되는 폼 게시판의 게시물 내용 입력 부분이나 회원 가입시의 사용자 약관 등을 표시할 때 자주 사용 <textarea> 태그의 속성들 유형 설명 name 텍스트 영역 필드의 이름 cols 텍스트 영역 필드의 가로 너비(문자 단위) rows 텍스트 영역 필드의 세로 길이(라인 단위). 지정한 숫자보다 줄의 개수가 많아지면 스크롤바가 생깁니다. HTML CSS 자바스크립트 무작정 따라하기

17 HTML CSS 자바스크립트 무작정 따라하기
셀이 각각 표시되는 테두리 그리기 예 <head> <title>주요 허브 소개 </title> <style type="text/css"> ~ 중략 ~ thead { background: darkgreen; color:white; font-size:12px; } tbody{ color:green; th, td { border:1px solid darkgreen; </style> </head> <body> <table width="700"> ~ (중략) ~ </table> 모든 셀에 테두리가 표시되므로 셀의 테두리가 두 겹이 됨. HTML CSS 자바스크립트 무작정 따라하기

18 HTML CSS 자바스크립트 무작정 따라하기
표 테두리 그리기 예 <head> <title>주요 허브 소개 </title> <style type="text/css"> ~ 중략 ~ th { border-right:1px solid white; padding:10px; } td { border-right:1px solid darkgreen; border-bottom:1px solid darkgreen; </style> </head> <body> <table width="700"> ~ (중략) ~ </table> HTML CSS 자바스크립트 무작정 따라하기