HTML5 강좌 23강 - 위치 정보(Geolocation API), 지도 서비스 요즘 스마트폰이 대중화 되면서, 위치기반 APP이 아주 많이 개발됐죠. HTML5에서도 위치를 찾고, 지도를 만들 수 있습니다. *Geolocation API : 현재의 위치 정보를 검색할 때 사용 GPS가 내장된 스마트폰에서 훨씬 정확한 위치 정보 파악이 가능하여 모바일 브라우저에서 유용한 API 입니다. 위치 정보는 개인 정보 이므로 사용자의 동의가 필요하죠. *현재 위치 현재 위치를 알아내기 위해서 navigator 객체의 getCurrentPosition() 메소드를 사용합니다. -사용법- navigator.geolocation.getCurrentPosition( successCallback, errorCallbac..

HTML5 강좌 22강 - 파일접근, 파일정보 파일을 읽고, 파일에 대한 정보를 읽는 파일접근에 대해 알아보도록 하겠습니다. 1. 파일 접근(1)파일의 데이터에 대한 직접 읽기가 가능(수정/삭제 불가)(2)읽기 가능한 파일-사용자가 드래그 앤 드롭한 파일-input 요소(type=“file”)에서 선택한 파일 2. 파일 정보(1)선택한 파일의 객체를 구함-선택한 파일에 대해 속성/메소드 사용(2)FileList 객체선택한 파일의 객체가 저장되어 있는 객체 -> 배열 형식, 인덱스 사용파일 객체를 가져올 수 있는 경우 -> 드래그 앤 드롭에서 드롭 이벤트가 발생할 경우->input 요소 사용 시 change 이벤트가 발생할 경우 파일의 이름을 읽는 예제 파일을 불러오는 태그를 사용하였고 onchange 이..

HTML5 강좌 21강 - 웹 스토리지 웹 스토리지란? 클라이언트에 간단한 정보를 저장하기 위한 저장 공간입니다. 예를 들면 내가 어떤 사이트에 접속을 했는지, 몇 번째 접속인지.. 이러한 정보들을 기록할 수 있습니다. 쿠키는 저장공간이 4kb를 차지하고 유효기간이 존재하는 반면.. 웹 스토리지는 용량과, 유효기간에 대한 제한이 없습니다. 웹 스토리지의 저장 데이터는 키와 값으로 저장합니다. 데이터 = (키,값) 웹 스토리지는 용도에 따라 로컬 스토리지, 세션 스토리지로 나눌 수 있습니다. 먼저 로컬 스토리지에 대해 알아보도록 하겠습니다. 1. 특징 (1)데이터 저장 시간에 제한이 없어 영구적 보관이 가능 (2)도메인마다 별도의 저장 영역을 생성 -도메인마다 생성된 로컬 스토리지에 서로 접근 불가 -같은..

HTML5 강좌 20강 - HTML5 태그 - 드래그 앤 드롭 이번 강좌에선 드래그 앤 드롭에 대해 알아보겠습니다.아마도 인터넷을 사용하다보면 종종 봤을텐데요..마우스를 이용하여 어떠한 콘텐츠를 끌어다 놓는 것을 의미합니다. *드래그 앤 드롭 처리 과정(1)드래그할 요소에 드래그 속성 지정(2)이벤트 지정 및 컨트롤(3)교환할 데이터에 대한 처리 드래그 앤 드롭 기능을 위해서는 이벤트 컨트롤이 필요한데요.이동 대상이 되는 요소 안에 이벤트에서 처리할 메소드를 속성으로 지정합니다. *드래그 앤 드롭 관련 이벤트(1)dragstart : 드래그 시작시 발생(2)drag : 드래그 중에 발생(3)dragend : 드래그 종료했을 때 발생(4)dragenter : 드래그 요소가 드롭 요소 범위 안에 들어올 때 ..

HTML5 강좌 19강 - HTML5 태그 - 입력양식 form 사용 예제 이번엔 지난 강좌에서 테스트 했던 form 입력양식을 이용하여회원가입 페이지를 하나 만들어 보겠습니다. 예제는 학교에서 동아리에 가입을 신청하는 신청서로 만들어보겠습니다.가입 신청서에 들어가는 일반적인 항목들을 넣어볼까요~ (1)이름(2)학부/학과(3)학년(4)학번(5)대학 입학 년도(6)이메일(7)주소(8)연락처(9)취미(10)SNS 주소(11)가입 동기(2)자기 소개 이정도 항목을 넣어보겠습니다. 테이블 태그와 입력양식 이용하여 form을 만들었습니다.지난 강좌들에서 배웠던 입력양식 타입들을 이용했죠.붉은색 * 표시는 required 타입의 항목들 입니다.그리고 이메일이나 전화번호 같은 항목은 양식을 정해주었습니다. requi..

HTML5 강좌 18강 - HTML5 태그 - 입력양식 form 사용하기 지난 강좌에 이어서 입력양식 form에서 사용하는 여러가지 태그들에 대해 알아보겠습니다.그 전에 지난강좌에서 테스트 했던 range 타입에 대해 추가적으로 기능을 더해볼까 합니다.바의 값을 변경하면 변경된 값을 모니터 할 수 있게 말이죠. *range 지난 강좌에서는 이렇게만 작성했는데요.간단한 코드를 추가해서 변경하는 값을 출력 해보겠습니다.(1)먼저 태그 안에 하나를 추가합니다.oninput="out.value = parseInt(points.valueAsNumber)"'입력이 일어나면 out 이라는 출력대상에 points 라는 객체의 값을 숫자로 출력한다'라는 내용입니다.(2)range 타입 밑에 아래와 같은 출력 태그를 하나..

HTML5 강좌 17강 - HTML5 태그 - 입력양식 form 사용하기 이번 강좌에서는 입력양식 form에서 사용하는 여러가지 태그들에 대해 알아보겠습니다.HTML5 form 에 관련된 태그는 꽤 많은 종류가 있습니다.태그들과 속성에 대해 정리를 하고 예제를 통해 테스트를 해보죠~ *form 입력양식button : 클릭이 가능한 버튼 정의(주로 자바스크립트를 활성화시키기 위해서 사용)checkbox : 체크박스file : 파일 업로드를 위한 파일 입력과 선택 필드 정의hidden : 숨겨진 입력 필드 정의image : 이미지를 전송 버튼으로 정의password : 비밀번호 입력 필드(필드 내의 각 글자는 다른 글자로 대체 표시됨)radio : 라디오 버튼reset : 리셋 버튼(폼의 모든 필드를 초기값..

HTML5 강좌 16강 - HTML5 태그 - 미디어 제어하기 이번 강좌에서는 미디어 파일을 자바스크립트를 통해 제어해 보도록 하겠습니다. 자바스크립트에 대해 생소한 분들이 있을수도 있겠네요.자바스크립트는 웹 문서의 기능적인 부분이나 제어적인 부분을 처리하는 언어 정도로간단히 인지하고 넘어가면 될 듯 합니다.자바스크립트에 대한 강좌는 html5 강좌 이후에 진행하겠습니다. 먼저 기본적인 메소드를 보겠습니다. *play() : 미디어 파일을 재생함*pause() : 미디어 파일을 일시 정지함 위 내용대로 한 버튼에는 미디어 파일을 재생하는 버튼을 연동시키려 하고요한 버튼에는 미디어파일을 일시정지 하는 버튼을 연동시켜 보겠습니다. 먼저 버튼을 만들고 onclick 속성을 이용하여 클릭했을 경우 발생하는 이벤..

HTML5 강좌 15강 - HTML5 태그 - 비디오 이번 강좌에서는 비디오를 재생하는 플레이어를 만들어보겠습니다.비디오 태그는 오디오 태그와 거의 흡사합니다. 지원 불가능한 브라우저에서 표현할 내용 정말 간단하죠?오디오 태그와 마찬가지로 source 요소를 사용하여 좀 더 디테일한 플레이어 설정이 가능합니다. 지원 불가능한 브라우저에서 표현할 내용 비디오 태그에 속성에 대해 알아보겠습니다.오디오 태그 속성과 비슷합니다. (1)src : 재생할 파일 경로 지정(2)autoplay : 페이지 로드 시 사운드를 재생할 지 여부 지정(3)controls : 플레이어 표시(4)loop : 반복할 재생 횟수(5)preload : 페이지가 열릴 때 오디오의 로드 설정-> none : 자동 로드하지 않음, auto ..

HTML5 강좌 14강 - HTML5 태그 - audio 이번 강좌에서는 오디오를 재생하는 플레이어를 만들어보겠습니다.기존 html 에서는 embed 방식을 사용했는데요.html5에서 기본적인 오디오 플레이어는 정말 간단합니다. 오디오 태그에 아이디 속성값과 오디오파일 경로를 입력해주면 됩니다.그리고 마지막에 controls 이라는 속성을 선언해 주면 끝~ *audio 속성(1)src : 재생할 파일 경로 지정(2)autoplay : 페이지 로드 시 사운드를 재생할 지 여부 지정(3)controls : 플레이어 표시(4)loop : 반복할 재생 횟수(5)preload : 페이지가 열릴 때 오디오의 로드 설정-> none : 자동 로드하지 않음, auto : 자동 로드, meta : 오디오의 메타 정보만 ..