interactive

1.뷰포트 Viewport 뷰포트속성 속성명 속성값 속성설명 width device-width, 양수 뷰포트의 너비를 지정합니다. height device-height. 양수 뷰포트의 높이를 지정합니다. inital-scale 양수 뷰포트의 초기 배율을 지정합니다. 기본값은 1입니다. 1보다 작은 값을 사용하여 축소된 페이지를 표시하고, 1보다 큰 값을 사용하여 확대된 페이지를 표시합니다. user-scalable yes, no 뷰포트의 확대/축소 여부를 지정합니다. 기본값은 yes이며 no로 설정하면 사용자가 페이지를 확대 할 수 없습니다. minimum-scale 양수 뷰포트의 최소 축소 비율을 지정합니다. 기본값은 0.25입니다. maximum-scale 양수 뷰포트의 최대 확대 비율을 지정합니다...

CSS3 부터는 여러개의 배경이미지를 적용할 수 있다. (IE8 이하 버전에서는 사용할 수 없다.) ch.pngbg.jpg - 여러개의 배경을 사용할 경우에는 왼쪽에 위차한 이미지가 앞으로 나온다.- background-size, background-position 은 쉼표(,)를 이용해 두배경에 각각 설정 할 수 있다. bg.jpg , ch.png 중첩사용

구조선택자는 CSS3에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다. 1. 일반 구조 선택자 선택자 형태설명 :first-child첫번째에 위치하는 자손을 선택 :last-child마지막에 위치하는 자손을 선택 :nth-child(수열)앞에서 수열 번째에 있는 자손을 선택 ex) nth-child(2n) , nth-child(2n+1) :nth-last-child(수열)뒤에서 수열 번째에 있는 자손을 선택 firstsecondthirdfourthfifthsixthseventh 2. 형태 구조 선택자 선택자 형태설명 :first-of-type자손 중에 첫번째로 등장하는 특정태그 :last-of-type자손 중에 마지막으로 등장하는 특정태그 :nth-of-type(수열)자손 중에 앞에서 수열 번째로..

1. 동위선택자 선택자 형태 설명 선택자A + 선택자B 선택자A 바로 뒤에 위치하는 선택자B 선택 선택자A ~ 선택자B 선택자A뒤에 위치하는 선택자B 선택 header-1header-2header-3header-4 2. 상태선택자 : 입력양식의 상태를 선택할때 사용하는 선택자 선택자 형태설명 :checked 체크상태의 input 태그 선택 :focus초점이 맞추어진 input 태그 선택 :enabled사용가능한 input 태그 선택 :disabled 사용 불가능한 input 태그 선택

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..