웹프로그래밍 (128) 썸네일형 리스트형 CSS3 for IE7, 8 {https://github.com/scottjehl/Respond/} css3-mediaquery 보다 훨씬 빠르고 잘된다. Respond.js A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) Copyright 2011: Scott Jehl, scottjehl.com Licensed under the MIT license. The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particu.. Background-size for IE7,8 https://github.com/louisremi/background-size-polyfill for IE8 that is really simple to use: .selector { background-size: cover; behavior: url(/backgroundsize.min.htc); } CSS3 구조선택자 구조선택자는 CSS3에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다. 1. 일반 구조 선택자 선택자 형태 설명 :first-child 첫번째에 위치하는 자손을 선택 :last-child 마지막에 위치하는 자손을 선택 :nth-child(수열) 앞에서 수열 번째에 있는 자손을 선택 ex) nth-child(2n) , nth-child(2n+1) :nth-last-child(수열) 뒤에서 수열 번째에 있는 자손을 선택 first second third fourth fifth sixth seventh 2. 형태 구조 선택자 선택자 형태 설명 :first-of-type 자손 중에 첫번째로 등장하는 특정태그 :last-of-type 자손 중에 마지막으로 등장하는 특정태그 :nth-of-type(수열) 자.. CSS 동위선택자, 상태선택자 1. 동위선택자 선택자 형태 설명 선택자A + 선택자B 선택자A 바로 뒤에 위치하는 선택자B 선택 선택자A ~ 선택자B 선택자A뒤에 위치하는 선택자B 선택 header-1 header-2 header-3header-4 2. 상태선택자 : 입력양식의 상태를 선택할때 사용하는 선택자 선택자 형태 설명 :checked 체크상태의 input 태그 선택 :focus 초점이 맞추어진 input 태그 선택 :enabled 사용가능한 input 태그 선택 :disabled 사용 불가능한 input 태그 선택 CSS 속성선택자 1. 선택자[속성] , 선택자[속성=값] - 특정한 속성이 있는 태그 선택 img[alt] img 중에 alt 속성을 가진 것만 찾는다. input[type=password] input 중에 type이 password 인 것만 찾는다. div#header 아이디가 header 인 div 선택하는 같은 방법이다. div[id=header] div[id="header"] 2. 선택자[속성~=값] , 선택자[속성|=값] - 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택(띄어쓰기 포함) img[alt~="test"] test 뒤에 띄어쓰기가 있는경우도 찾는다. test 앞에 띄어쓰기가 있는경우도 찾는다. img[alt|="test"] test 뒤에 - 있는 경우 찾는다. 3. 선택자[속성^=값] .. HTML5 비디오태그 <video></video> 비디오 태그는 웹페이지에서 동영상을 볼 수 있게 만들어주는 기능을 수행한다. 원래 HTML5 시대가 오기 전에는 비디오도 윈도 미디어 플레이어 또는 플래시와 같은 플러그인을 사용해서만 볼 수 있었다. 하지만 HTML5 시대가 오면서 웹표준만으로 동영상을 볼 수 있게 되었다. *유튜브는 플래시를 사용해서 동영상을 재생하게 설계되었지만 http://www.youtube.com/html5 에 들어가서 HTML5 기능을 실행하면 플래시 없이 동영상을 볼 수 있다. video 태그의 속성 속성 이름 값 설명 src URL 비디오파일의 경로지정 height 숫자 비디오의 높이를 지정 width 숫자 비디오의 너비를 지정 poster URL 비디오 준비중일 때의 이미지 파일 경로 지정 muted "muted", "".. HTML5 오디오태그 <audio></audio> 오디오 태그는 웹브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그 이다. HTML5에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다. audio 태그의 속성 속성 이름 값 설명 src URL 음악파일의 경로지정 controls "controls", "" , - 음악 재생 도구를 출력할지 지정 autoplay "autoplay", "", - 음악을 자동 재생할지 지정 loop "loop", "", - 음악을 반복할지 지정 preload "none", "metadata", "auto" 음악을 재생하기 전에 모두 불러올지 지정 none : 사용자가 오디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음 metadata : 사용자가 오디오를 필요로 하지 않을 .. Javascript 모바일 체크 var mobilecheck = function() { var check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|63.. 이전 1 ··· 9 10 11 12 13 14 15 16 다음