Gulp 사용법 #2 (gulp-concat)

Syntax Gulp 이전 포스팅에서는 gulp 의 설치방법 및 간단한 task 에 대해 알아보았습니다. 이제 본격적으로 gulp 사용방법에 대해 알아봅니다. 만약 gulp 설치가 되어 있지 않다면 Gulp #1 설치를 참고하시기 바랍니다. Determining Folder Structure(폴더 구조 생성하기) gulp 의 workflow(작업흐름) 방식을 이해하기 위해서 전체적인 맥락을 짚어보며 진행하도록 하겠습니다. gulp 설치를 완료한 후 package.json 과 gulpfile.js가 준비되었다면 사용자 프로젝트에 디렉터리 구조를 구성할 필요가 있습니다. 먼저, src (source) 폴더와 dist (distribution) 폴더를 먼저 만들어두로록 합니다. scr 폴더는 어떠한 처리도 하..
Web Tech/Gulp 9년 전

Gulp #1(걸프 설치 및 개요)

자동화 빌드 시스템 : Start Gulp 현재 생산성을 높이고 개발자들의 수고를 덜어줄 수 있는 유용한 도구로는 Grunt, Gulp, Brunch, Bower 등이 있습니다.이러한 도구는 예를 들어 사용자들이 반복적으로 수행하게 되는 일인, javaScript 와 CSS를 온라인 툴이나 기타 툴을 사용하여 파일의 용량을 줄이기 위해 압축, 병합을 시도한 후 수정작업이 발생할 경우 또 다시 일련의 반복작업을 하게 되는 것이 다반사인데 이러한 반복적인 할 일들을 자동으로 대신 처리해주는 것이 자동화 빌드 시스템입니다. 이 글에서는 다른 자동화 빌드 시스템보다 쉬운 문법을 제공하고 있는 gulp 에 대해 알아보도록 합니다.gulp 는 Grunt 보다 후발주자임에도 쉬운 문법으로 인해 접근성이 뛰어나 꾸준한..
Web Tech/Gulp 9년 전

이미지를 이용한 버튼 타입 모음

확장성 버튼형 이미지 웹 기술이 발전함에 따라 CSS3를 이용하여 둥근모서리 타입의 디자인 버튼을 만들기가 보다 수월해졌습니다. 하지만 아직 우리나라에서는 하위 호환성을 이유로 크로스브라우징 작업을 할 수 밖에 없는 상황이 종종 있습니다. 요즘은 많이 사용하고 있진 않지만 텍스트 길이에 상관없이 확장성있게 둥근 모서리나 그라디언트 타입의 이미지 버튼을 만들어 보도록 하겠습니다. a, button, input with Image html anchor 타입 텍스트 텍스트를 포함한 오른쪽 화살표 텍스트를 포함한 a 타입 버튼 button 타입 텍스트 오른쪽 화살표 텍스트를 포함한 텍스트를 포함한 button 타입 input 타입 오른쪽 화살표 왼쪽 초록 화살표 오른쪽 초록 화살표 달력 아이콘 css * { m..
StyleSheet/CSS 9년 전

웹소켓이란?

WebSocket 이 글에서는 브라우저 기반 애플리케이션에 효율적인 양방향 통신을 구현하기 위한 기술인 웹소켓에 대한 개념을 짚어 보도록 합니다. 오랫동안 큰 진전이 없었던 통신 관련 기술이지만 웹소켓의 등장으로 더욱 빠르고 간단한 웹 애플리케이션 개발이 가능해졌습니다. 웹소켓이란? 웹소켓(WebSochet)은 서버와 클라이언트 간의 효율적인 양방향 통신을 실현하기 위한 구조입니다. 최근에는 Gmail 처럼 데이터의 실시간 특성을 중시한 웹 애플리케이션이 많이 등장하여 많은 주목을 받고 있습니다. 자바스크립트의 처리 성능이 크게 개선된 현재, 웹 애플리케이션의 성능면에서 병목 현상이 나타나는 것은 네트워크 통신 부분으로 웹소켓은 실시간 웹을 구현하기 위한 핵심 기술로 기대받고 있습니다. 웹소켓은 매우 단..
Dev Environment/개발 기타 자료 9년 전

패키지(package), 접근 제한자, Getter와 Setter

패키지란 ＠ 클래스를 기능별로 묶어서 그룹 이름을 붙여 놓은 것을 말합니다.파일들을 관리하기 위해 사용하는 폴더(디렉토리)와 비슷한 개념입니다.패키지의 물리적인 형태는 파일 시스템의 폴더입니다. @ 패키지는 클래스 이름의 일부입니다.전체 클래스 이름 = 상위패키지.하위패키지.클래스클래스명이 같아도 패키지명이 다르면 다른 클래스로 취급합니다. @클래스를 선언할 때 패키지가 결정됩니다.클래스를 선언할 때 포함될 패키지를 선언해야 합니다.클래스 파일(~.class) 선언된 패키지와 동일한 폴더안에서만 동작합니다.클래스 파일은 다른 폴더안에 넣으면 동작하지 않습니다. 패키지 선언 @ 패키지 선언은 클래스 선언 첫 줄에 해야합니다. @ 상위 패키지와 하위 패키지는 도트(.)로 구분합니다. @ 패키지 이름 규칙 전..
Dev Environment 9년 전

Animation jQuery- delay()

애니메이션 지연 앞선 포스팅에서 사용한 애니메이션 효과는 메서드가 실행되지 마자 바로 효과가 나타났습니다. jQuery 효과 관련 메서드를 사용자가 정의하여 특정한 시간 후에 실행하고자 할 경우에는 delay() 메서드를 사용할 수 있습니다. jQuery delay() 메서드 delay() 메서드의 매개 변수에는 지연시키려는 시간을 밀리초 단위로 작성합니다. 다음의 예제를 통해 확인해보도록 합니다. See the Pen jQuery delay() 메서드 by jaeheekim (@jaehee) on CodePen. 각 박스는 delay() 메서드로 인하여 0.5초 지연 후에 애니메이션 효과가 나타나는 것을 확인하실 수 있습니다. Related Info 애니메이션 큐와 애니메이션 정지하기 Jaehee's ..
Web Tech/jQuery 9년 전

애니메이션 정지와 큐 - jQuery stop() 메소드 & clearQueue()

Animation Stop & Queue제이쿼리에서 애니메이션 사용시 이용되는 stop() 과 clearQueue() 에 대해 알아보도록 합니다.먼저 애니메이션 큐부터 알아보도록 하겠습니다. 애니메이션 큐큐는 특정한 엘리먼트에서 발생될 애니메이션의 목록입니다. 제이쿼리를 사용해 엘리먼트에서 애니메이션을 실행시킬 때마다 애니메이션은 큐에 저장됩니다. 엘리먼트는 큐의 모든 애니메이션이 완료될 때까지 큐에 저장된 애니메이션을 한번에 하나씩 실행시킵니다.다시 말해, 애니메이션 효과의 명령은 큐(Queue)에 누적됩니다.큐는 먼저 들어간 것이 먼저 나오는 공간을 말합니다.jQuery의 효과 메서드를 사용하면 효과 명령이 차례차례 큐에 들어가게 되고, 들어간 순서대로 실행되게 됩니다. 아래의 코드를 실행하면서 살펴..
Web Tech/jQuery 9년 전

프레임워크와 라이브러리의 차이점

Framework Vs Library 프레임워크와 라이브러리의 정확한 차이점은 무엇일까요? 대중 알것 같지만 정확히 어떠한 차이점이 있는지 모르고 있는 경우가 많을지도 모릅니다. 프레임워크는 단지 미리 만들어 둔 반제품이나, 확장해서 사용할 수 있도록 준비된 추상 라이브러리의 집합이 아닙니다. 프레임워크가 어떤 것인지 이해하려면 라이브러리와 프레임워크가 어떻게 다른지 알아야 할 것입니다. 먼저 프레임워크와 라이브러리의 개념에 대해 살펴보고 차이점에 대해 알아보도록 하겠습니다. Framework(프레임워크) 프레임워크는 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술입니다. 소프트웨어에서의 프레임워크는 '소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합'..
Dev Environment/개발 기타 자료 9년 전

jQuery의 each() 메서드 알아보기

jQuery - each() 메서드 jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있습니다. each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드입니다. each() 메서드는 다음과 같은 두 가지 타입이 있습니다. javascript // jQuery 유틸리티 메서드 $.each(object, function(index, item){ }); // jQuery 일반 메서드 $(selector).each(function(index, item){ }) 위의 메서드를 차례로 알아보도록 하겠습니다. $.each() $.each() 메서드는 object 와 배열 모두에서 사용할 수 있는 일반적인 반복 함수입니다...
Web Tech/jQuery 9년 전

attr() 메서드와 prop() 메서드의 차이점

attr() Vs prop() jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다. 이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다. attr() prop() HTML 의 속성(attribute)을 취급 JavaScript의 프로퍼티(property)를 취급 속성은 HTML Element에 있는 정보 프로퍼티는 JavaScript에서 사용하는 정보 (HTML의 정보와 일치 또는 불일치) 다음의 예시를 살펴보도록 합니다.. 먼저 다음의 코드가 있다고 가정해봅니다. html 버튼 javascript var $goLink = $('.link'); console...
Web Tech/jQuery 9년 전

CSS3 Property : text-align-last

text-align-last이번 포스팅에서는 CSS3 속성인 text-align-las 에 대해 알아봅니다.이 글을 포스팅하는 시점에 해당 속성의 브라우저의 지원률이 높지는 않습니다. 다음의 브라우저 지원현황에 대한 이미지를 참고하세요. caniuse text-align-last 지원현황 text-align-last Example Code기본적으로 text-align-last는 엘리먼트 요소 마지막 라인의 텍스트를 정렬하기 위한 속성입니다. text-align-last : left, right, center, justifytext-align-last 의 left, right, center, justify 에 대한 결과는 다음과 같습니다.See the Pen text-align-last #1 by jaeh..
StyleSheet/CSS 9년 전

[WAI-ARIA] Aria-describedby

Aria-describedby 활용하기 이번 글에서는 웹페이지 개발 시 스크린리더 사용자들에게 매우 유용한 WAI-ARIA속성 하나를 간략하게 소개하려 합니다. 스크린리더사용자들이 복잡한 구조의 페이지를 탐색할 때 또는 어떤 요소에 대한 상세 설명을 제공해야 할 필요가 있을 때가 있습니다. 복잡한 구조의 캘린더로 예를 들자면, 화면을 시각적으로 인지하는 사용자는 구조를 한 눈에 확인하고 전체적인 내용와 기능을 쉽게 파악할 수 있습니다. 하지만 음성출력으로만 웹페이지를 활용하는 스크린리더 사용자가 복잡한 콘텐츠의 전체적인 내용과 기능을 파악하는 것은 퍽 어려운 일입니다. 또한 암호입력과 같은 폼 요소에서 특정 입력 양식(예를 들어, 최소 한 자리 이상의 문자와 숫자 그리고 대문자가 반드시 포함된 8-16자..
HTMLㆍ웹표준ㆍ 웹접근성 9년 전

NVDA를 활용한 WAI-ARIA 살펴보기 #2

WAI-ARIA 살펴보기 이번 글에서는 NVDA를 활용한 WAI-ARIA 살펴보기 #1 에 이어서 사용자의 입장에서 꼭 필요한 WAI-ARIA의 Role과 Property 몇 가지를 더 살펴보도록 하겠습니다. 탭 컨트롤 웹페이지가 점점 다이나믹해지고 복잡해짐에 따라 보다 사용자들이 편리하게 해당 페이지를 이용할 수 있도록 하는 많은 방법들이 고안되어 있습니다. 그 중 하나가 여러 개의 콘텐츠 그룹을 탭으로 분류하여 사용성을 높히는 방법이 있습니다. 그러나 스크린리더 사용자의 입장에서 보았을 때 어떤 웹페이지의 콘텐츠들이 탭으로 분류되어 있을 경우 오히려 사용성에 있어 문제가 되는 경우가 종종 있습니다. 그 이유는 다음과 같습니다. 일반적으로 웹페이지에서 콘텐츠를 탭메뉴로 그룹화하여 제공할 때 탭을 선택할..
HTMLㆍ웹표준ㆍ 웹접근성 9년 전