본문 바로가기

Think Factory/프론트엔드 실무

4주차

node.js

node.js 가동 명령어 npm start

ajax

ajax 구문에서 return false의 역할 : 이벤트가 실행되어 페이지가 전환되는 것 차단

- ajax 플러그인


$("form").ajaxForm({

success:function(data){

alert(data);

}

});

[nodeServer\public\ajax02.html]

http://malsup.com/jquery/form/


touchSwipe.js

터치 이벤트는 기기, 브라우저, 벤더를 모두 타기 때문에 완벽한 크로스 체킹이 어렵다 -> 플러그인으로 해결

$("#touchPad").swipe({

swipeStatus:function(event,phase,direction,distance){

var str="phase:"+phase+"<br/>";

str = str + "direction:"+direction+"<br/>";

str = str + "distance:"+distance;

$("#touchPad").html(str);

},

allowPageScroll:"vertical" // "horizontal"

});

[nodeServer\public\plugin_touchSwipe.html]



헤딩 : 방향 (0 남쪽 360 북쪽)

피치 : 기울기

롤링:


[nodeServer\public\sensor.html]


SASS

SASS를 사용하려면 먼저 ruby를 설치해줘야 함 http://rubyinstaller.org/downloads

ruby 설치 후 명령 크롬프트 실행 > 명령어 gem > 명령어 gem install sass > 액세스 허용

서브라임텍스트 실행 > package control > install packages > Sublime REPL

> package control > install packages > SASS build

> package control > install packages > Syntax Highliting for Sass

프로그램 재실행 > Tools - Build System - SASS 체크

- 프로그래밍 언어 기반이므로 연산 가능

- 자신만의 css 패턴을 mixin 시켜서 인크루드 가능

- 역시 프로그래밍 기반이므로 if, for, 등 사용 가능


참고사이트 http://sass-lang.com/



'Think Factory > 프론트엔드 실무' 카테고리의 다른 글

3주차  (0) 2015.05.16
2주차  (0) 2015.05.10
1주차  (0) 2015.05.09