웹코딩 검색 결과

해당 글 52건

CSS3 변형 속성 transition-duration

CSS3에서는 변형속성을 사용해 움직임을 구현할 수 있습니다. 생성된 오렌지색 박스위에 마우스를 올리면 크기가 늘어나고 클릭하면 색상이 붉은색으로 변경됩니다. 이제 여기에 변형 속성을 사용해 부드러운 애니메이션을 만들 수 있습니다. 위처럼 변형속성에는 여러가지가 있습니다. 먼저 transition-duraition 속성을 입력합니다. 다음 붉은색 코드를 추가하면 됩니다. .space [ width : 200px; height: 200px; background : orange; transition-duration: 2s; } 코드를 실행하고 마우스를 올리거나 클릭한 상태로 있으면 2초동안 변형 속성이 적용됩니다. CSS3의 변형 속성은 다음 스타일 속성과 함께 적용할 수 있습니다. * 위치 속성 : top..
웹코딩/HTML5 CSS3 2016. 11. 3. 22:33

HTML5 입력양식 태그

HTML5에서는 기존의 input 타입외에 새로운 타입(type)이 추가 되었습니다. 속성 설명 datetime-local 지역 날짜 선택양식을 생성 email 이메일 입력양식 생성 month 월 선택양식 생성 number 숫자 생성양식을 생성 range 범위 생성양식을 생성 search 검색어 입력양식을 생성 tel 전화번호 입력양식을 생성 time 시간 선택양식을 생성 url URL 주소입력양식을 생성 week 주 선택 양식을 생성 아쉬운 점은 아직 인터넷 익스플로러에서는 지원이 되지 않고 있습니다. 크롬(chrome)으로 실행해보세요.
웹코딩/HTML5 CSS3 2016. 11. 3. 01:04

HTML5 video 태그 ie 에서 실행되지 않을때 video.js 플러그인

웹 브라우저마다 표시되는 video 태그의 형태가 일관되지 않으므로 웹 페이지를 디자인할 때 문제가 될 수 있습니다. 또하 인터넷 익스플로러에서는 video 태그가 잘 동작하지 않습니다. 이러한 문제를 해결할 수 있는 간단한 플러그인이 있습니다. 바로 video.js 플러그인입니다. ● video.js 플러그인 (http://videojs.com/) 플러그인을 다루는 것은 웹 클라이언트 개발에서 어려운 부분에 속하지만 video.js 플러그인은 굉장히 간편합니다 To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video 원문 : video.js 데모
웹코딩/HTML5 CSS3 2016. 11. 3. 00:41

변수의 유형 확인 gettype() 함수 | var_dump() 함수

변수의 유형을 알아보려면 gettype() 함수 또는 var_dump() 함수를 사용합니다. PHP에서 변수의 유형은 기본적으로 프로그래머가 설정하는 것이 아니라 해당 변수가 사용되는 문맥에 따라 PHP가 실행될 때 결정하고 유형이 자동으로 변환되기도 합니다. ● 변수의 유형 확인 변수 $a의 유형은 'integer(정수)'이고 변수 $b의 유형은 'string(문자열)'입니다. 단 gettype() 함수의 출력은 앞으로 변경될 가능성이 있습니다. 변수가 특정한 유형인지 판정하려면 is_int() 함수 등을 사용합니다. 디버그용 var_dump() 함수를 사용해도 변수의 유형을 확인할 수 있습니다. ● 변수의 유형을 판정하는 함수 함수명 설명 is_array() 변수가 배열인지 확인합니다. is_bool..
웹코딩/PHP 2016. 10. 27. 19:32

배열에서 라디오 버튼 생성 foreach

배열에서 라디오 버튼을 생성하려면 미리 value 속성의 값을 배열에 등록해야 합니다. 예를 들어 성별을 선택하는 것처럼 라디오 버튼을 몇 번씩 반복해서 기술해야 할 수 있습니다. 이 경우에도 태그에 있는 value 속성의 값을 배열에 넣어 놓고 foreach문 등으로 반복 처리하면 쉽게 라디오 버튼을 생성할 수 있습니다. ● 배열에서 라디오 버튼 생성
웹코딩/PHP 2016. 10. 24. 15:43

꺾은선형 그래프 생성 Google Charts

Google Charts를 사용하여 꺾은선형 그래프를 그립니다. 여기에서는 그래프 생성 Google Charts 에서 작성한 makeChart Parts() 함수로 그래프를 생성합니다. 예제의 데이터는 기온과 습도 때문에 가 스케일이 다르므로 세로 축을 좌우 별도로 설정합니다. 옵션의 'series'를 설정하여 세로 축을 2축화하고, 'vAxes'에서 자세한 내용을 설정합니다. 'series'에서 'targetAxisIndex'의 1은 'vAxes'에서의 인덱스에 해당됩니다. 'vAxes'의 인덱스 0은 기본의 좌측으로, 'series'에서 'targetAxisIndex'를 설정할 필요가 없습니다. 또한 표에 꺾은선형 그래프의 데이터도 표시합니다. ● 꺾은선형 그래프 생성하기
웹코딩/PHP 2016. 10. 24. 03:06

막대형 그래프 생성 Google Charts

Google Charts를 사용하여 막대형 그래프를 그립니다. 여기에서는 그래프 생성 Google Charts 에서 작성한 makeChart Parts() 함수로 그래프를 생성합니다. ● 막대형 그래프 생성하기 ● 막대형 그래프에 'isStacked' 옵션에 true를 설정하면 누적 그래프가 됩니다 $options = array( 'title' => '대도시의 인구（인구 조사）', // 그래프 제목 'titleTextStyle' => array('fontSize' => 16), // 제목 스타일 'hAxis' => array('title' => '단위：명'), // 가로 축 'width' => 560, // 폭 'height' => 400, // 높이 'colors' => array('#396', 'da..
웹코딩/PHP 2016. 10. 24. 02:25