키보드와 하루

1. 개념 video - 웹 페이지에서 비디오 재생 html5 전에는 비디오나 오디오 재생시 형식에 맞는 플러그인이 설치되어야 함 하지만 html5에서는 플러그인 없이 비디오를 재생할 수 있도록 video 태그가 생김 속성 설명 width 비디오가 재생될 브라우저의 폭 지정 height 비디오가 재생될 브라우저의 높이 지정 controls 재생,재생시간,중단,음소거 등 여러 제어 버튼이 화면에 출력 autoplay 비디오 로딩시 즉시 재생(브라우저별에 따라 설정 방법이 다름) loop 반복 재생 poster 로드되지 않을 때 표시될 이미지 URL preload 설정에 따라 비디오를 미리 다운로드 할지 여부를 설정 none 미리 다운로드 하지 않음 metadata 기본 정보만 가져옴 auto 미리 다운로드..

1. 개념 iframe - 다른 html을 호출하기 위한 프레임 만들기 iframe은 현재 페이지에 다른 html 페이지를 출력하고자 할 경우에 사용되고 이렇게 만들어진 frame을 인라인 프레임이라고 함 2. 태그 iframe html5 코드 test.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 DOCTYPE html> 1 2 3 4 DOCTYPE html> 5 인라인 프레임에서 Parent로 티스토리 호출 iframe2.html 1 2 3 4 5 6 7 8 9 10 11 DOCTYPE html> 6 인라인 프레임에서 self로 티스토리 호출 결과 화면 코드 설명 1 ...... 여기서는 iframe.html이라고 하는 html 페이지를 호출하고 있습니다. 예를 ..

1. 개념 multiple , datalist - 데이터 목록 나열 multiple : select 태그에서 사용되는 옵션으로입력한 항목만큼 데이터를 나열해 줌 datalist : select 태그 대신에 input text 태그에서 데이터 목록을 나열해 주고 선택한 값을 자동으로 입력해 줌 2. 태그 multiple , datalist html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 32 33 34 35 36 37 DOCTYPE html> 1 테스트1 테스트2 테스트3 테스트4 테스트5 2 테스트1 테스트2 테스트3 테스트4 테스트5 3 결과 화면 코드 설명 1 ...... select에 아..

1. 개념 size,maxlength,minlength - 길이, 최대 글자 수, 최소 글자 수 size : 텍스트 필드 , 비밀번호 필드 , 검색 필드와 같이 한 줄로 입력되는 필드에서 화면에 몇 글자까지 보여지게 할지 지정 maxlength : minlength와는 반대로 최대 몇 글자까지 입력할 수 있는지를 지정 minlength : 최소 몇 글자까지 입력해야 하는지를 지정 2. 태그 size,maxlength,minlength html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 DOCTYPE html> 1 size 속성 : 2 maxlength 속성 : 3 minlength 속성 : 결과 화면 코드 설명 1 size를 10으로 지정한 뒤에 size..

1. 개념 readonly,required - 읽기 전용,필수 값 지정 readonly : input type=text에서 텍스트를 표시하고 수정하지 못하고 오직 읽게만 만들어 줌 required : 폼에서 submit 버튼을 눌렀을 때 필수로 입력하게 지정하여 필수로 입력되어야 할 필드를 설정할 수 있음 2. 태그 readonly,required html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 DOCTYPE html> 1 readonly 속성 : 2 required 속성 : 결과 화면 코드 설명 1 readonly는 입력되어 있는 텍스트를 오로지 읽기만 가능하게 합니다. 읽기만 하려고 하면 구지 input type=text를 사용하지 않고 다른 방법으로 이용할 수 ..

1. 개념 autofocus,placeholder - 커서 위치,힌트 표시 autofocus : input type=text 일 때 페이지를 불러오게 되면 이 속성이 있는 곳에 커서가 위치하게 됨 placeholder : 텍스트를 입력할 때 먼저 힌트 내용을 표시하여 사용자로 하여금 도움을 줄 수 있도록 하는 것 2. 태그 autofocus,placeholder html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 DOCTYPE html> 1 autofocus 속성 : 2 placeholder 속성 : 결과 화면 코드 설명 1 autofocus를 사용하게 되면 페이지가 열리자마자 제일 먼저 입력해야 할 내용이 무엇인지 커서가 위치해 줍니다. 이렇게 해주면 사용자가 이용하는..

1. 개념 input type = image,button,file - 이미지 버튼, 버튼 , 파일 첨부 image 타입 : submit 버튼 대신 전송 이미지를 삽입하여서 사용할 수 있음 button 타입 : 버튼 형태를 만들어서 사용이 가능하고 여기에는 submit이나 reset과 같은 기능은 없음 file 타입 : 파일을 첨부하여 사용 가능 2. 태그 input type = image,button,file html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 DOCTYPE html> 1 image 필드 : 2 button 필드 : 3 file 필드 : 결과 화면 코드 설명 1 image 타입에서 중요한 것은 submit 버튼 대신이라는 것입니다. ..

1. 개념 input type = time,datetime-local,submit,reset - 시간,날짜와시간,전송,재작성 time 타입 : 시간만을 지정하고자 할 경우에 사용 datetime-local 타입 : 날짜와 시간을 함께 지정하고자 할 경우에 사용 속성 설명 min 날짜와 시간의 최소값 지정 max 날짜와 시간의 최대값 지정 value 화면에 표시할 초기값을 지정 submit 타입 : form 태그에 지정한 서버 프로그램 쪽으로 데이터를 전송 reset 타입 : 폼 안에 있는 모든 정보를 지우고 다시 작성할 수 있도록 초기화 시켜줌 2. 태그 input type = time,datetime-local,submit,reset html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13..

1. 개념 input type = color,date,month,week - 색상,날짜,월,주 color 타입 : 색상표에서 사용자가 색상을 선택할 수 있도록 하고 색상 값은 16진수로 표시해야 함 date 타입 : 달력에서 날짜를 선택했을 때 yyyy-mm-dd 형식으로 연도,월,일이 표시됨 month 타입 : 달력에서 날짜를 선택했을 때 yyyy-mm 형식으로 월까지만 표시됨 week 타입 : 1월 첫째 주를 기준으로몇 번째 주인지 연도와 주로표시가 됨 2. 태그 input type = color,date,month,week html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 DOCTYPE html> 1 color 필드 : 2 date..

1. 개념 input type = number,range,radio,checkbox - 숫자,슬라이드 막대,라디오,체크박스 number 타입 : 이 타입으로 설정하면 마우스 커서를 올리면 위아래로 보이는 버튼이 보이고 텍스트나 특수 문자는 입력이 안되고 오직 숫자만 입력됨 range 타입 : 슬라이드 막대를 움직여서 숫자 값을 입력함 속성 설명 min 최소값을 지정(기본 최소값 0) max 최대값을 지정(기본 최대값 100) step 숫자 간격을 지정(기본 값 1) value 초기값 설정 radio 타입 : 여러개의 항목 중에서 하나의 항목을 선택하여 값을 서버에 보내줌 checkbox 타입 : 여러 개의 항목 중에서 한 개 이상의 항목을 선택하여 값을 서버에 보내줌 속성 설명 name 이름을 지정(ra..