야훔의 저렴한 개발

자, 그러면 패러렉스를 직접 사용해보도록 하겠다. 일단 지난 시간 parallax 프로젝트 폴더에 dist 폴더가 생긴걸 기억할거다. 거기에서 parallax.min.js 파일을 복사해서 사용할거다. 자, 그럼 이제 html에 아래와 같이 parallax.min.js 파일을 적용한다. 이렇게 했다면 index.html 파일을 브라우저를 통해 실행시키면 parallax.min.js 파일을 로딩하는 것을 확인 할 수 있다. 그러면 레이어로 사용할만한 이미지를 두장을 구해놓자. 나는 우주이미지와 로켓 이미지 두장을 구해다가 적용할 거다. 이렇게 했더니 화면은 이렇게 나온다. 막 이것저것 스타일도 추가하고 위치도 바꾸고 로켓 방향도 바꾸고했다. 그것보다 중요한건 레이어로 사용되는 div 태그에 data-dept..

한 때 유행했던 UI 기법 중에 Parallax 라는 기법이 있다. 패러렉스라는 이 기법은 두개 이상의 레이어를 만들어 두고 이 레이어의 움직임에 차이를 둬서 2D의 화면에서 입체감을 느끼도록하는 시각적 착시 기법이다. 음 대표적으로 이해할만한 예가 1993년 빛돌이 에니메이션의 입체영상을 보여주기 위한 기법으로 멀리있는 배경을 천천히 움직이고 가까이 있는 배경을 빠르게 움직이는 현상을 생각하면 되겠다...(이렇게 아재인증을..) 22초에 나오는 영상을 보면 가까이 있는 객체와 뒤에 있는 객체가 서로 다른 속도로 움직이면서 공간감을 느끼게하는 착시현상을 parallax라고 이해하면 되겠다. 원리를 대충 이해했다면 이제 이것을 손쉽게 구현할 수 있게 도와주는 parallax.js를 사용하는 방법에 대해서 ..

앞서서 jQuery UI Datepicker를 화면에 붙이는 작업을 진행했었는데 우리의 문제는 영문으로 표시되고 날짜도 영어권에 맞춰서 표시된다는 점이다.우리는 한글로 날짜가 표시되기를 원한다. 그래서 jQuery UI 에서 해당 내용을 지원하는지 확인하기 위해서 API Document를 확인하기로 했다. 상단 메뉴의 API Documentation 메뉴를 클릭한다. 다음 화면에서 Widgets 메뉴 클릭 그 다음 오른쪽 화면에서 Datepicker Widget 메뉴를 클릭한다. 위의 화면처럼 Datepicker에서 사용할 수 있는 옵션과 함수들의 목록을 확인할 수 있다. Datepicker가 지원하는 단축키도 확인할 수 있고 Utility functions 항목을 보면 Datepicker에 기본 설정값..

jQuery UI는 개발 초심자에게 다양한 위젯을 제공하여 개발을 편리하게 하는 툴로오늘은 Datepicker를 설치하는 법에 대해 알아보도록 하자. 일단 맨 처음 jQuery UI를 검색하자 이런페이지가 보일텐데 영어라고 겁먹지말고 다운로드 메뉴를 클릭하자 일단 우리는 최신 jQuery를 이용할거니깐 1.12.1 버전을 선택하고모든 컨포넌트를 사용하면 용량이 크니까 toggle All 의 체크를 풀어준다. 아래쪽으로 내려가면 Widgets 섹션의 Datepicker에 체크해준다.이렇게 체크해주면 이 모듈을 실행하기 위해서 필요한 나머지 모듈들이 자동으로 선택된다. 확인하고 싶다면 상단의 Core 섹션의 Keycode가 자동으로 선택된 것을 확인할 수 있다. CSS 테마를 선택할 수도 있겠지만 지금은 테..

안녕! 오늘은 jQuery에 대한 이야기를 해보려고 해.jQuery를 버린다는 자극적인 제목을 갖고 할 이야기는 jQuery의 단점을 이야기 하자는게 아니라근래에 들어와 웹 어플리케이션을 개발하는데 있어 jQuery로는 감당하기 힘든 소스의 양을 어떻게감당할 것인가에 대한 대안이 필요해서 시작하는 이야기임을 먼저 못을 박고 시작할게. 이 이야기는 총 3개의 포스트로 연달아 작성될거야.오늘의 이야기는 jQuery에 대한 이야기로 시작할게. 일단 jQuery를 왜 쓰는가에 대한 이야기를 먼저 해야할것 같아. 내 기억이 맞다면 jQuery는 일단 2006년에 뉴욕에서 존 레식이라는 아저씨가 처음 발표한게 시초야. 모두가 경악했지.그 당시 Javascript는 다루기 까다롭고 크로스 브라우징을 구현하기 위해서는..