본문 바로가기

Study

(220)
[HTML5/CSS3/JQUERY] cross message 각 프레임들끼리 데이터 주고 받기 하기 messageEvent2.html 프레임 1로 보내기 프레임 2로 보내기 1.html 부모 창으로 보내기 frame 2로 보내기 2.html 부모 창으로 보내기 frame 1로 보내기
[HTML5/CSS3/JQUERY] message event message event 메인 html에서 새창을 띄워도 해당 결과값이 출력되게 하기 messageEvent.html messageSub.html
[HTML5/CSS3/JQUERY] 현재 시간을 가져와 이미지 시계 나타내기 현재 시간을 가져와 이미지 시계 나타내기 현재 시간을 받아와서 canvas로 시계,시침,분침,초침 이미지를 가져와 시간이 지날 때마다 침 이미지를 그려준다.
[HTML5/CSS3/JQUERY] drag & drop 예제 왼쪽 select 박스와 오른쪽 select 박스의 option들을 서로 이동 시키기 2012.09.10 -> 현재 fire fox에서만 drag & drop이 가능하다. 옵션1 옵션2 옵션3 옵션2_1 옵션2_2 옵션2_3
[HTML5/CSS3/JQUERY] audio와 video 예제 audio & video HTML5에서는 브라우저의 플러그인 없이도 미디어 재생이 가능하다. 그리고 다음과 같이 object, embed element와는 다른 점이 있다. 재생, 일시정지 등 web browser에 자체 control이 있다. source에 파일을 여러 개 지정할 수 있어서 web browser의 지원 format에 따라 표시할 수 있다. HTML5 Audio 지원안함 HTML5 Video 지원안함 audio는 일시정지와 되감기 빨리감기 버튼을 만들어 구현 video는 video가 보여지는 창에 마우스 이벤트를 줘 재생했다 안했다를 반복하고, 화면 밑에 현재 진행되는 시간을 표시한다. 음악재생 |> 00:00:00
[HTML5/CSS3/JQUERY] canvas 1. 선 그리기, 대각선 그리기, 사각형 그리기, 그림자 주기 2. 선 그리기, 사각형 그리기, 반원 그리기, 문자열 그리기, 이미지 적용하기,작은 정사각형 흩뿌리기 캔바스를 이용해서 도형 그리기 연습 3. canvas에 이미지 전달(고전적인 방법, 태그에서 직접 이벤트 부여/자바스크립트에서 이벤트를 부여하여 호출) 하단 이미지를 클릭하면 canvas에 해당 이미지가 그려진다. 이미지는 아무거나 해도 되어서 따로 첨부는 안했다. 방법1: 고전적인 방법, 태그에서 직접 이벤트 부여 방법2: 자바스크립트에서 이벤트를 부여하여 호출 방법2: 자바스크립트에서 이벤트를 부여하여 호출 방법 3: jQuery에서 이벤트 부여하여 호출(code 변환이 안되서 그냥 복사~)
[HTML5/CSS3/JQUERY] HTML5에서 새로 지원하는 폼태그 경험하기 HTML5에서 새로 지원하는 폼태그 경험하기 Name: E_mail: URL: Number: Range: 0 Tel : 0 name Pay email suggest slider tel
[HTML5/CSS3/JQUERY] 인터넷 브라우저 별 input type range 알아보기 input type의 range 속성은 인터넷 브라우저마다 다르다고 하였다! 그래서 실험!! 실험 브라우저는 익스플로러, 크롬, 파이어폭스, 오페라이다. 각 브라우저 별 range는 그림을 보면 알 수 있겠다. Internet Exploer CHROME FIREFOX OPERA 포상 포인트 입력 자료 이름 포인트 EMail 연락처