목록All (47)
interactive
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 시대가 오기 전에는 비디오도 윈도 미디어 플레이어 또는 플래시와 같은 플러그인을 사용해서만 볼 수 있었다. 하지만 HTML5 시대가 오면서 웹표준만으로 동영상을 볼 수 있게 되었다. *유튜브는 플래시를 사용해서 동영상을 재생하게 설계되었지만 http://www.youtube.com/html5 에 들어가서 HTML5 기능을 실행하면 플래시 없이 동영상을 볼 수 있다. video 태그의 속성 속성 이름값 설명 srcURL 비디오파일의 경로지정 height 숫자 비디오의 높이를 지정 width 숫자 비디오의 너비를 지정 poster URL 비디오 준비중일 때의 이미지 파일 경로 지정 muted "muted", "", ..
오디오 태그는 웹브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그 이다.HTML5에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다. audio 태그의 속성 속성 이름 값 설명 src URL 음악파일의 경로지정 controls "controls", "" , - 음악 재생 도구를 출력할지 지정 autoplay "autoplay", "", - 음악을 자동 재생할지 지정 loop "loop", "", - 음악을 반복할지 지정 preload "none", "metadata", "auto" 음악을 재생하기 전에 모두 불러올지 지정 none : 사용자가 오디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음 metadata : 사용자가 오디오를 필요로 하지 않을 것..
웹페이지를 디자인하다보면 이미지를 아직 완성하지 못해 넣을 수 없는 경우가 있습니다.이미지 크기는 아는데 아직 이미지가 없을 때 사용할 수 있는 좋은 방법이 있습니다.placehold.it는 원하는 크기의 이미지를 제공해 주는 사이트입니다. http://placehold.it/ placehold.it 을 사용한 이미지
Transformations ( 변형 )CSS3 에서는 기본 2D 변형을 지원 합니다.. translated, rotated, scaled, skewed 를 옵션으로 설정 할 수 있습니다. transform: rotate( -30deg ); // 회전transform: skew( 30deg , -10deg ); // 비스듬히 움직임 * border-radius 브라우저 버전별 확인지원지원 = 지원 지원안됨 = 지원되지 않음 부분지원 = 부분지원 IE FirefoxChrome Safari Opera ios Safari Opera Mini Android Browser Blackberry Browser 2.1 -webkit- 3.2 -webkit- 2.2 -webkit- 7.0 4.0-4.1 -webkit- ..
IR기법(Image Replacement)의미가 포함되어 있는 image를 배경으로 표현하고, 그에 상응하는 내용을 text로 전경에 기입하는 방법으로,시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 "화면 낭독기를 사용하는 시각 장애인, CSS제거 및 인쇄"시에는 문자에 접근하거나 문자를 볼 수 있는 형태로 설계 하는 기법을 말한다. 1. display:block:none 속성으로 숨김처리 IR contents:Image Replacement Technique 2. text-indent 속성으로 글씨 날리는 방법 IR contents:Image Replacement Technique 3. 이미지에 z-index 값을 주어 텍스트 위로 띄우는 법 IR contents:Image Replacem..
CSS를 사용해서 특정 요소를 투명하게 할 땐 주로 두 가지 방법을 사용한다. 첫째가 opacity 속성이고 둘째가 rgba다. 1. opacityopacity는 지정한 요소 전체를 투명하게 하는 속성이다.속성값은 0~1 까지 사용하며, 0에 가까울 수록 투명정도가 더 크다.ex. opacity:0.3 또는 opacity:.3 - 앞에 소수점 0은 생략가능하다. ※ ie8이하 버전에서는 opacity가 지원되지 않아서 filter 사용하여야 한다. filter:alpha(opacity:'30')※ opacity 값을 준 영역안은 모두 투명값을 가진다. 2. rgbargba는 rgb 형식의 색 표현에 투명도를 표현하는 alpha 값을 추가한 것으로, 마지막에 오는 alpha 값에 의해 투명도가 결정된다.속..
background-size 속성은 CSS3에서 추가된 속성으로, CSS3 이전에는 처리할 수 없었던 배경 이미지 크기를 조정할 수 있다.값은 px와 % 같은 단위로 쓸 수 있고, auto, cover, contain과 같은 키워드를 쓸 수도 있다. *background-size의 지원 브라우저internet Explorer : 버전9만 지원firefox, chrome, safari, opera : yes background-size: 가로크기 세로크기; 기본값은 auto이며, 요소 배경으로 이미지를 삽입하면 요소 크기와 상관 없이 이미지 원본 크기대로 처리한다. 1. background-size:x px y px;가로 크기와 세로 크기를 모두 px 단위로 설정하면 설정한 크기대로 설정 된다 2. bac..
HTML5 Canvas 기본형태
1. HTML5 Canvas 소개canvas : 자바스크립트로 처리할 수 있는 즉시모드 비트맵 영역.*즉시모드(immediate mode) : 캔버스가가 화면 위에 픽셀을 그리는 한가지 방법이다.코드로 비트맵 화면을 바로 그린다는 의미에서 즉시모드라고 한다.이미 구현된 객체를 이용하는게 아니라, 코드로 필요한 객체를 생성하고나서 변경 할 수 있다는 의미. 2. HTML5 doctype 태그는 웹 브라우저가 페이지를 표준모드로 랜더링하도록 지정한다. W3C의 HTML5 명세서를보면 HTML5 문서에는 반드시 태그를 표기해야한다. 같은 HTML 문서를 두고 브라우저마다 제멋대로 랜더링하는 문제를 피하기 위해 태그를 쓰는것이다.이 태그는 반드시 HTML 문서의 제일 첫 줄에 있어야 한다. 3. Canvas 요..