앞선 포스팅에서 Grunt 소개와 설치방법를 소개했었습니다. 이번에는 Grunt의 주요 플러그인들을 소개하고 간략한 설명을 포스팅 하겠습니다. 플러그인 Grunt.js에서 말하는 플러그인과 Node.js에서 말하는 패키지는 동일한 것입니다. 그래서 Grunt에서 패키지를 설치하는 방법과 Node.js에서 패키지를 설치하는 방법이 동일합니다. 플러그인 찾기 대부분의 Grunt 플러그인들은 Grunt사이트의 Plugin 메뉴에서 확인할 수 있습니다. 먼저 Grunt웹사이트의 플러그인 메뉴로 이동합니다. 원하는 기능의 플러그인을 검색창을 이용하여 […]
Gruntjs를 사용한다고 하는것은 gruntfile.js를 다룰 줄 안다고 하는 것과 마찬가지로 gruntfile.js는 중요합니다. 중요하다고 해서 배우기가 어렵다는 말은 아닙니다. 개인의 차이는 있겠지만 보통 1~2일이면 개념을 이해 할 수 있고 1주일 정도면 구글링을 하면서 Gruntjs를 사용할 수 있을 정도로 어렵지 않습니다. 이전 포스팅에서 Gruntjs의 소개와 설치법을 작성했으니 완전 초보자이시면 이전 포스팅을 먼저 보는 것이 도움이 될것 같습니다. […]
웹사이트를 개발하다 보면 이미지 영역을 잡는 경우가 있습니다. 이때 사용할 수 있는 무의미한 더미 이미지를 무료로 제공해 주는 사이트가 있어 포스팅합니다. 더미 이미지를 제공해 주는 사이트도 있고 이미지의 글자정보만 제공해 주는 사이트도 있습니다. 더미 이미지 제공 placeimg.com placeimg는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다. 사용법은 매우 간단합니다. 웹사이트 : placeimg.com 기본사용법은 […]
github에서 만든 무료 Atom 에디터에서 기본적으로 설치해야 할 Packages(플러그인)을 정리해 봤습니다. === Packages used Package Website 설명 O sync-settings https://atom.io/packages/sync-settings Atom에디터의 설정을 저장해서 어디에서든 동일한 환경으로 에디팅을 할 수 있게 해줌 O atom-beautify https://atom.io/packages/atom-beautify HTML, CSS, JavaScript, PHP의 코드 정렬 O color-picker https://atom.io/packages/color-picker 에디터에서 바로 컬러값을 보고 선택할 수 있음 O Remote-FTP https://atom.io/packages/Remote-FTP 서브라임텍스트의 SFTP와 […]
SublimeText나 Atom에디터등 텍스트기반 에디터가 유행을 하자 MS에서도 Visual Studio를 기반으로 한 텍스트에디터를 출시하였고 다른 에디터들과 마찬가지로 무료로 서비스를 제공하고 있습니다. 저는 Notepadd++, SublimeText, Atom, Brackets, VisualStudioCode 에디터등을 두루두루 써보다가 VisualStudioCode에 정착을 했습니다. 원래는 Notepadd++를 요긴하게 잘 사용해 왔으나 플러그인 등이 부족하고 현재의 유행하는 편리한 기능의 에디터와는 다르기 때문에 좀더 편리한 에디터를 찾고자 했습니다. 그래서 여러가지 […]
Node.js의 탄생으로 인해 javascript진영이 비약적인 발전을 이루고 있으며 그러한 발전에 견인차 역활을 한 Grunt라는 것이 있습니다. 이러한 프레임워크를 javascript Task기반 빌드 Tools이라고 하는데 과연 이것이 무엇인지, 그리고 어떻게 설치하고 사용하는지에 대해 포스팅을 하려고 합니다. Gruntjs란 무엇인가. Grunt 또는 Gruntjs라고 하며 인터넷을 검색하면 Task기반 빌드 툴이라고 나옵니다. 풀어서 설명을 하면… Node.js를 기반으로 하고있는 무수한 패키지들 중에 […]
예전에 Table로 레이아웃을 잡을 때는 어렵지 않게 구현되었던 표현인데 근래들어서 웹표준에 맞게 코딩을 하게 되면서 레이아웃을 DVI태그로 구현해야 하게 되므로써 다소 구현이 어려워진 것 중에 하나가 다단을 구성하는 것이 아닐까 합니다. 그 다단을 구현하는 방법이 여러가지가 있을 것 같은데.. 이번에 소개를 해드리는 것은 javascript로 구현하는 방법입니다. 레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 […]
홈페이지를 보게되면 화면을 스크롤 할 때 배경의 이미지가 스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다. 이것을 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 install Parallax-ImageScroll npm으로 설치할 경우 npm […]
별도의 라이브러리를 사용하지 않고 순수하게 CSS3만을 활용하여 버튼의 효과를 줄 수 있습니다. 급하게 퍼블리싱할때 써먹을 수 있게 정리해 놓겠습니다. 미리보기 BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 코드설명 HTML HTML은 기본 버튼을 사용하고 .btn으로 기본속성을 지정하고 .hover로 효과의 형태를 변경하겠습니다. <button class=”btn hover1″> BUTTON 1 </button> <button class=”btn hover2″> BUTTON 2 </button> <button class=”btn […]