본문 바로가기

WEB_TECH

APMSETUP을 설치해 봅시다. APMSEUP은 아래의 사이트에 가시면 다운 받을 수 있습니다.근사모http://www.apmsetup.com/ 원래 PHP는 리눅스에서 잘 돌아가게 개발되었는데 APMSETUP을 사용하면 윈도우환경에서도 편하게 PHP를 사용할 수 있습니다.리눅스서버 설정하고 PHP와 my-sql을 설치하여 사용하는 것은 매우 번거롭고 초보자에게 어려운일입니다. 그 대안으로 우리는 웹호스팅을 사용하여 편리하게 사용할 수 있습니다. 그러나 개발환경을 구축하려면 내 컴퓨터에서 이것저것 테스트를 해 볼 수 있어야 하기 때문에 APMSEPUP을 사용해서 아파치, PHP, my-sql을 함께 사용할 수 있는 환경을 만듭니다. [다운로드페이지]http://www.apmsetup.com/download.php여기로 가서 APMSET.. 더보기
새로운 HTML5 Javascript API HTML5 는 자바스크립트 API가 추가되었습니다.어떤것이 있는지 알아볼까요? , control APILocal Storage APIWeb SQL DB APIIndexed DB APIGeolocation APIOffline web apps APIWeb SocketWeb WorkerDrag and Drop APIFile API 이쯤되면 못할것이 없어보이는데요.HTML5는 이제 더이상 웹페이지를 만들기위한 마크업이 아닙니다.웹어플리케이션을 만들기 위한 언어입니다. 더보기
PHP란 무엇인가? PHP(정식 명칭 "PHP: Hypertext Preprocessor")는 범용성을 지닌 널리 사용되는 오픈 소스 스크립트 언어입니다. 특히, 웹 개발 및 HTML에 포함하기에 적합합니다. 예 1-1. 소개용 예제 Perl이나 C와 같은 다른 언어로 쓰여진 스크립트와 다른점을 알아봅시다 HTML을 출력하기 위해서 많은 프로그램 명령어를 쓰는 대신, 무언가를 하기 위해 몇가지 추가 코드가 포함된 HTML 스크립트를 작성하면 됩니다. (여기서는, 약간의 텍스트를 출력합니다)PHP코드는 "PHP 모드"로 들어가고 나올 수 있는 특별한 시작과 끝태그에 포함되어 있습니다. PHP가 클라이언트측 자바스크립트 등과 구별되는 점은 이 코드는 서버에서 실행된다는 점입니다. 위와 같은 스크립트가 서버에서 실행되면, 클라이.. 더보기
<canvas>에 4가지 간단 그리기 예제 1. 선분그리기 Your browser does not support the canvas element. 2. 원 그리기 Your browser does not support the canvas element. 3. 그라디언트 그리기 Your browser does not support the canvas element. 4. 외부 이미지 불러오기 Your browser does not support the canvas element. 이렇게 하는 것과 태그를 사용하는 것과는 엄연히 다릅니다. 더보기
<canvas>란 무엇일까? www.w3schools.com 에 있는 내용을 번역하겠습니다. 엘리먼트는 웹페이지에서 그래픽을 그리기 위해 사용됩니다. Canvas가 무엇일까?HTML5의 엘리먼트는 단지 그래픽들을 위한 컨테이너입니다.당신은 그래픽을 그리기 위해 자바스크립트를 사용해야 합니다. 캔바스는 높이와 넚이 속성이 있는 그리기가 가능한 지역이라고 HTML코드에서 정의됩니다.캔버스는 선분들, 사각형들, 원, 문자(Characters) 그리고 이미지를 추가하는 메서드가 있습니다. 캔바스는 왠만한 메이저급 브라우저에서는 다 지원됩니다. IE8만 빼고.... MS 각성하시오. 1. 캔바스 만들기캔바스는 엘리먼트로 정의합니다.id와 height 속성을 엘리먼트에서 정의합니다. 2. 자바스크립트로 그리기엘리먼트는 그림을 그리는 어떤 속성.. 더보기
HTML5에서 새로 사용된 엘리먼드들 html5에서 도입된 더 좋은 구조를 위한 새 엘리먼트들입니다.를 사용해도 되는데 문서의 포맷을 더 명확히 해주기 위해서 아래의 태그를 사용할 것을 권장합니다. Defines an articleDefines content aside from the page contentIsolates a part of text that might be formatted in a different direction from other text outside itDefines a command button that a user can invokeDefines additional details that the user can view or hideDefines a visible heading for a elementSpeci.. 더보기
간단한 레이아웃 예제 이렇게 DIV태그에 각각의 id값을 정하고 float속성을 사용하여 페이지 레이아웃을 구성할 수 있습니다.테이블로 하는 것과는 다릅니다.이렇게 해야 문서 자체의 의도와 맞고 구조와 디자인을 분리할 수 있습니다. 심플한 레이 아웃 메뉴 HTML5 CSS3 Javascript 내용은 여기에 copy all right reserved by ME. clear:both속성은 float:left 속성을 초기화 시켜주는 것이라고 보면 됩니다. 이 코드를 저장한 후 브라우저에서 보면 이렇게 나옵니다. CSS파일만 따로 떼어낼 수 있습니다. 더보기
자바스크립트 디버깅 오래전부터 alert() 함수를 이용하여 디버깅을 해 왔었는데 월씬 깔끔하게 디버깅 할 수 있습니다.요즘의 최신 브라우저에는 요소검사도구를 제공하는데 F12키를 누르면 실행할 수 있습니다.요즘의 브라우저들은 거의 표준화된 콘솔 출력 API를 제공하고 개발자들은 필요한 API들을 호출하여 디버깅용 메시지를 콘솔에 출력할 수 있습니다. console.log("로그 메시지");console.warn("경고 메시지");console.error("에러 메시지"); 더보기
String객체 String은 문자열 객체 입니다.자바스크립트에서 어찌보면 가장 중요하다고 할 수 있는 객체입니다.자주 사용되는 몇개의 메서드와 속성들은 잘 익혀두어야 합니다. length속성은 String의 문자열의 길이를 표시해 주는 속성입니다. 다음을 실행해 보겠습니다. 이렇게 하면 12가 출력됩니다. 자바스크립트 메서드로 스타일을 사용해 봅시다.이것은 스타일시트처럼 정교하진 않습니다. 다음은 볼드나 소문자 대문자 이탤릭등 기본적인 스타일을 사용하는 예제입니다. 아래와 같은 결과가 나옵니다. indexOf("해당문자열") 는 해당문자열이 나오는 인덱스를 반환해 주는 메서드입니다.아래의 예제를 실행시켜 보면 21이 나옵니다. 버튼클릭 실행 match("해당문자열") 메서드는 문자열에서 해당문자열이 있는지 확인해서 있.. 더보기
javascript 객체기반언어 자바스크립트는 객체 기반언어입니다.자신의 객체를 정의하고, 자신의 변수유형을 만들 수 있습니다.물론 고급 영역에 속하기 때문에 좀 더 공부가 필요합니다.나중에 더 많이 다루도록 하겠습니다. property는 오브젝트에 할당되는 값입니다. 예제 method는 오브젝트를 수행하는 액션입니다. 예제 더보기