IT이야기 2018. 5. 21.
Gruntfile의 주요 플러그인들
앞선 포스팅에서 Grunt 소개와 설치방법를 소개했었습니다. 이번에는 Grunt의 주요 플러그인들을 소개하고 간략한 설명을 포스팅 하겠습니다. 플러그인 Grunt.js에서 말하는 플러그인과 Node.js에서 말하는 패키지는 동일한 것입니다. 그래서 Grunt에서 패키지를 설치하는 방법과 Node.js에서 패키지를 설치하는 방법이 동일합니다. 플러그인 찾기 대부분의 Grunt 플러그인들은 Grunt사이트의 Plugin 메뉴에서 확인할 수 있습니다. 먼저 Grunt웹사이트의 플러그인 메뉴로 이동합니다. 원하는 기능의 플러그인을 검색창을 이용하여 검색을 합니다. 검색결과의 플러그인 리스트중에 하나를 선택하여 설치방법을 확인합니다. 찾는 플러그인이 명확하지 않다면 검색결과 중 **다운로드 수가 많은 것** 이나..
IT이야기 2018. 5. 21.
Gruntfile의 구조와 사용법
Gruntjs를 사용한다고 하는것은 gruntfile.js를 다룰 줄 안다고 하는 것과 마찬가지로 gruntfile.js는 중요합니다. 중요하다고 해서 배우기가 어렵다는 말은 아닙니다. 개인의 차이는 있겠지만 보통 1~2일이면 개념을 이해 할 수 있고 1주일 정도면 구글링을 하면서 Gruntjs를 사용할 수 있을 정도로 어렵지 않습니다. 이전 포스팅에서 Gruntjs의 소개와 설치법을 작성했으니 완전 초보자이시면 이전 포스팅을 먼저 보는 것이 도움이 될것 같습니다. gruntfile.js의 구조와 사용법 gruntfile.js의 가장 기본적인 구조는 아래와 같습니다. 1. 프로젝트의 구성, 2. 사용한 플러그인 로딩, 3. 실행 명령어의 3개의 분류로 구성되어 있으며 각각 영역별로 설명을 하도록 하겠습니..
IT이야기 2018. 5. 21.
웹프로그램 개발 시 필요한 샘플 이미지를 무료로 제공해 주는 사이트
웹사이트를 개발하다 보면 이미지 영역을 잡는 경우가 있습니다. 이때 사용할 수 있는 무의미한 더미 이미지를 무료로 제공해 주는 사이트가 있어 포스팅합니다. 더미 이미지를 제공해 주는 사이트도 있고 이미지의 글자정보만 제공해 주는 사이트도 있습니다. 더미 이미지 제공 placeimg.com placeimg는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다. 사용법은 매우 간단합니다. 웹사이트 : placeimg.com 기본사용법은 가로크기와 세로크기 그리고 카테고리를 지정하면 됩니다. 특정 이미지는 지정할 수 없고 카테고리에 따른 랜덤이미지로 보여줍니다. 디폴트 카테고리는 any이고 카테고리 구분없이 모든 이미지에서 랜덤으로 뿌려줍니다. 아래의 카테고리와 필터 지..
IT이야기 2018. 5. 20.
Grunt 소개와 설치방법
Node.js의 탄생으로 인해 javascript진영이 비약적인 발전을 이루고 있으며 그러한 발전에 견인차 역활을 한 Grunt라는 것이 있습니다. 이러한 프레임워크를 javascript Task기반 빌드 Tools이라고 하는데 과연 이것이 무엇인지, 그리고 어떻게 설치하고 사용하는지에 대해 포스팅을 하려고 합니다. Gruntjs란 무엇인가. Grunt 또는 Gruntjs라고 하며 인터넷을 검색하면 Task기반 빌드 툴이라고 나옵니다. 풀어서 설명을 하면… Node.js를 기반으로 하고있는 무수한 패키지들 중에 프로젝트에서 필요한 패키지들을 설치하고 그 패키지들을 미리 설정한 순서와 옵션에 맞게 자동으로 명령어를 실행시켜주는 Tool이라고 보면 됩니다. 마치 Desktop컴퓨터의 `.bat ` 배치파일과..
IT이야기 2018. 5. 19.
스크롤에 따라 배경이미지의 시차가 다르게 움직이는 Parallax_ImageScroll
홈페이지를 보게되면 화면을 스크롤 할 때 배경의 이미지가 스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다. 이것을 Parallax(시차)라는 이름으로 많이 사용되고 있는데.. jQuery의 플러그인으로 구현된 것이 있어 소개합니다. **홈페이지 : ** [https://github.com/pederan/Parallax-ImageScroll](https://github.com/pederan/Parallax-ImageScroll) **DEMO : ** [http://codepen.io/pederan/full/Hheuy](http://codepen.io/pederan/full/Hheuy) **라이선스 : ** MIT Install bower로 설치할 경우 bower inst..
