앞선 포스팅에서 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단 이상의 다단을 구성할때 […]
웹디자인을 하다보면 input이나 textarea등의 Form요소에 포커싱이 될때 원치않는 파란색 테두리가 쳐지는 것을 볼 수 있습니다. 이런 현상은 크롬브라우저에서 발생을 하는데 원인과 해결방법을 포스팅하려고 합니다. 원인 IE에서는 이런현상이 없는데 크롬브라우저에는 발생하는 현상입니다. 오류라기 보다는 접근성에 대한 정책으로 보면 될것 같습니다. input이나 textarea에 포커싱이 될 경우 포커싱이 되었다는 것을 표시하기 위해 outline 요소가 작동하는 것입니다. 해결방법 outline은 […]
이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 ‘…’으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. <div class=”txt_line”>통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div> .txt_line […]
홈페이지를 보게되면 화면을 스크롤 할 때 배경의 이미지가 스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다. 이것을 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 […]