[html5] video 사용하기 [html5] video 사용하기 1. 동영상이 3개 필요합니다. ogv, mp4, webm 2. 인코딩 원본 동영상 파일을 윈도우즈 무비메이커로 원하는 부분만 편집해서 mp4로 저장합니다. 다음인코더로 ogv 파일을 만듭니다. 카카오인코더로 webm 파일을 만듭니다. 3개 파일을 html 상에서 넣습니다. 그러면 아래처럼 보이겠죠 [html5] video 사용하기 programming/html5 2015.09.21
[html5] 강좌 htm5 기본 css 선택자 [html5] 강좌 htm5 기본 css 선택자 * 기본 속성 선택자 * 문자열 속성 선택자 div 태그를 기준으로 한단계 아래 태그를 자손 * 후손 선택자 div 태그를 기준으로 한단계 아래의 모든 태그를 후손 * 자손 선택자 * 동위 선택자 * 반응 선택자 * 상태 선택자 :checked :focus :enabled :disabled * 구조 선택자 :first-child : 첫번째 위치하는 자손을 선택합니다. :last-child : 마지막에 위치하는 자손을 선택합니다. :nth-child(수열) : 앞에서 수열 번째에 있는 자손을 선택합니다. :nth-last-child(수열) : 뒤에서 수열 번째에 있는 자손을 선택합니다. * 형태 구조 선택자 :first-of-type : 형제 관계 중에서 첫.. programming/html5 2014.02.16
[html5] 강좌 html5 태그 [html5] 강좌 html5 태그 * 태그 ul 순서가 없는 목록 ol 순서가 있는 목록 li 목록 요소 dl 정의 목록 dt 정의 용어 dd 정의 설명 tr 테이블 표 내부의 행 th 테이블 행 내부의 제목 셀 td 테이블 행 내부의 일반 셀 border 표의 테두리 두께를 지정 rowspan 셀의 너비 지정 colspan 셀의 높이 지정 caption colgroup thead tbody img * 속성 src alt width height audio * 속성 src : 음악 파일 경로 preload : 음악 재새하기 전에 모두 불러올지 지정 autoplay : 음악 자동 생성할지 지정 loop : 음악 반복할지 지정 controls : 음악 재생 도구를 출력할지 지정 브라우저 동시 지원하기 위한 .. programming/html5 2014.02.16
[html5] 강좌 htm5 시작하기 [html5] 강좌 htm5 시작하기 html5 는 이미 한참 지난 이야기인 것 같다. 하지만 이걸 모르면 다음 것을 하지 못한다는 이유 때문에 다시금 html5를 들여다보게 되었다. html5를 하기 위한 준비 작업은 1. 이클립스 다운로드 2. 자바 설정 3. 각종 브라우저 설치 ( 크롬, 파이어폭스, 사파리 기타 ... ) 4. 이걸로 끝 이제 시작을 해 볼까 ^^ [html5] 강좌 htm5 시작하기 programming/html5 2014.02.16
[mobile web] ie8에서 html5 tag 사용하기 [mobile web] ie8에서 html5 tag 사용하기 IE9에서는 html5에 해당하는 시멘텍 태그인 header, section, footer가 정상적으로 적용되어서 모바일웹페이지를 잘 만들었는데 IE8에서는 제대로 화면이 보이지 않았습니다. css나 js를 로딩하기 전에 미리 문서상에 htm5 시멘텍 태그를 자바스크립트로 만들어주면 IE8에서도 정상적으로 적용됩니다. 적용한 전/후의 모습 [mobile web] ie8에서 html5 tag 사용하기 programming/mobile web 2012.10.25
[html5] localStorage API [html5] localStorage API // 지원 브라우저 체크하기 function testSupport() { if (localStorage) return "Local Storage: Supported"; else return "Local Storage: Unsupported"; } // 저장하기 localStorage.setItem("key1", "value1"); localStorage["key1"] = "value1"; // 가져오기 alert(localStorage.getItem("key1")); alert(localStorage["key1"]); // 저장된 모든 리스트 가져오기 function listAllItems(){ for (i=0; i programming/html5 2012.07.09
[mobile web] 바로가기 아이콘 [mobile web] 바로가기 아이콘 Mobile Size 아이폰 3GS 57x57 아이폰 4/4S 114x114 아이패드 1/2 72x72 안드로이드 스마트폰(800x480 기준) 72x72 [mobile web] 바로가기 아이콘 programming/mobile web 2012.07.01
[html5] ogg, webm 동영상 변환 [html5] ogg, webm 동영상 변환 동영상변환 프로그램 'MiroVideoConverter' 사용합니다. http://www.mirovideoconverter.com/ [html5] ogg, webm 동영상 변환 programming/html5 2012.07.01
[html5] html5 표준 동영상 코덱 [html5] html5 표준 동영상 코덱 구글은 H.264코덱 지원히지 않고 webm 형식인 VP8의 오픈코덱 지원하기로 했습니다. H.264 코덱은 애플이 주소유자입니다. HTML5 표준 동영상은 mp4(H.264), ogg(Theora, Vorbis 코덱), webm(VP8, Vorbis)를 모두 고려해야 한다. 코덱명 로열티 브라우저 ogg(Theora, Vorbis) 무료 파이어폭스, 오페라 webm(VP8, Vorbis) 무료 크롬 mp4(H.264) 있음, 이용자 무료 IE, 사파리, 크롬 [html5] html5 표준 동영상 코덱 programming/html5 2012.07.01
[html5] 자바스크립트에서 스마트폰 단말기 정보 확인 [html5] 자바스크립트에서 스마트폰 단말기 정보 확인 자바스크립트에서 웹브라우저(단말)의 종류를 확인하려면 User Agent 값을 조사하면 된다. 1. iPhone/iPad User Agent Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; ko-kr) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5 Mozilla/5.0 (iPad; U; CPU iPhone OS 4_2_1 like Mac OS X; ko-kr) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safa.. programming/html5 2012.05.22