Dev Blog

스크립트 & 소스코드 공유

실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.

총 110건의 글

다중 브라우저 호환 CSS 이미지 좌우 반전(미러) 효과

한 장의 이미지로 좌우가 대칭인 미러 이미지를 만드는 CSS 기법을 소개한다. 기존에 IE에서만 동작하던 필터 방식 대신, 파이어폭스·크롬 등 다중 브라우저에서 지원되는 transform: scaleX(-1) 스타일을 이용하며, 이미지에 적용하는 CSS 정의와 HTML에서 사용하는 예제 코드를 함께 보여준다.

今天接到一个需求,通过一张图片得到其镜像对称的图片。本来说是后台处理的,但这样除了技术上难实现之外,还带来了资源消耗的问题,相当于每张图都要存储一个副本了。

只记得以前用过css的滤镜可以实现这个,但只在IE下有效。后来找到一个兼容多浏览器的样式,大爱。

css样式定义:

.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: fliph; /*IE*/ }
.flip-vertical {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv; /*IE*/ }

HTML引用示例:

<img src="/data/editor/2004/logo-zhidao_Znb6RGemhY4.gif" class="flip-horizontal" />
<img src="/data/editor/2004/logo-zhidao_Znb6RGemhY4.gif" class="flip-vertical" />

jQuery BlackAndWhite 플러그인으로 이미지 흑백 효과 적용하기

jQuery.BlackAndWhite 플러그인을 이용해 이미지에 흑백 효과를 적용하는 방법을 4단계로 설명한다. jQuery와 플러그인 스크립트를 로드하고, 흑백 처리할 이미지의 래퍼에 bwWrapper 클래스를 지정한 뒤 CSS로 래퍼 스타일을 설정하고, window load 시점에 플러그인을 초기화한다. hoverEffect, intensity, responsive, speed 등 주요 옵션도 소개한다.

1 add jQuery and plug in to the page

<script src="js/jquery.min.js"></script>
<script src="js/jQuery.BlackAndWhite.js"></script>

2 add this class to the wrapper of the image that you want make in Black and White

<div class="bwWrapper">
<img src="path/to/your/image" width="image width" height="image height">
</div>

3 set the wrapper in this way from the css:

.bwWrapper {
position:relative;
display:block;
}

4 initialize the plug in on window load (no $(document).ready()) :

$(window).load(function(){
$('.bwWrapper').BlackAndWhite({
hoverEffect : true, // default true
// set the path to BnWWorker.js for a superfast implementation
webworkerPath : false,
// for the images with a fluid width and height
responsive:true,
// this option works only on the modern browsers ( on IE lower than 9 it remains always 1)
intensity:1,
speed: { //this property could also be just speed: value for both fadeIn and fadeOut
fadeIn: 200, // 200ms for fadeIn animations
fadeOut: 800 // 800ms for fadeOut animations
}
});
});

MySQL에서 중복 데이터 모두 찾기 (GROUP BY + HAVING)

MySQL에서 특정 필드의 중복된 값을 모두 찾아내는 방법을 정리했다. GROUP BY와 count()로 필드값별 건수를 집계하고, HAVING 절에서 count 결과가 n 이상인 항목만 거르는 쿼리 예제를 보여준다. 중복 횟수 2개 이상인 데이터를 확인하는 실제 실행 결과 표도 함께 포함되어 있다.

SELECT 필드명, count(*) FROM 테이블명 GROUP BY 필드명
mysql> SELECT t1, count(*) FROM test GROUP BY t1

중복된 갯수가 n개 이상인 것 찾기
SELECT 필드명, count(*) as 변수명 FROM 테이블명 GROUP BY 필드명 HAVING 변수명>n

mysql> SELECT t1, count(*) as num FROM test GROUP BY t1 HAVING num>1;
t1 num
tulip pink 2
라일라 2

2 rows in set (0.01 sec)

주기적으로 PHP 파일 실행하기 (crontab으로 cron.php 돌리기)

리눅스 crontab을 이용해 PHP 파일을 주기적으로 실행하는 방법이다. crontab -e 명령으로 에디터를 연 뒤, 한 시간에 한 번씩 wget으로 http://도메인/cron.php를 호출하는 "0 * * * * wget -O - -q -t 1 URL" 한 줄을 추가하면 정해진 시간마다 PHP 코드가 자동으로 실행된다. cron.php에는 주기적으로 실행할 코드를 넣어두면 된다.

크론탭에 추가

# crontab -e

한시간에 한번씩 원하는 페이지를 실행시키는 코드

0 * * * * wget -O - -q -t 1 [http://domain.com/cron.php](http://domain.com/cron.php)

위와같이 한 줄을 추가하게되면
순서대로 0분 매시간 매일 매월 매요일 이 될 때마다 (다시말해 1시간에 1번) php코드를 실행시키게 된다.
cron.php에는 1시간에 1회 실행될 코드를 넣어두면 된다.

자바스크립트 배열 내장 함수 정리 (join, reverse, sort, concat, slice, spli…

자바스크립트 배열의 주요 내장 함수를 예제와 함께 정리한 글이다. join과 split으로 배열·문자열 변환, reverse로 순서 뒤집기, sort 정렬, concat 병합, slice로 부분 배열 추출, splice로 원소 삽입·삭제하는 방법을 설명하고, 원본 배열이 변경되는지 여부와 음수 인덱스 처리 등 주의할 점을 코드 예시로 보여준다.

join()

//배열의 모든 원소를 문자열로 변환후 구분자로 이어 붙여서 반환.(구분자 기본값으로는 콤마(,)가 사용됨)
var arr = new Array(1, 2, 3);
var str = arr.join();
str : "1,2,3"

String.split()

//Array.join() 함수와 반대되는 기능을 한다. 구분자를 입력받아 해당 구분자로 문자열을 자른뒤 배열로 반환한다
var str = "1,2,3";
var arr = str.split(",");
arr : ["1", "2", "3"]

reverse()

//배열 안의 원소들의 순서를 뒤집는다. 주의할 점은 뒤집은 결과를 반환하는 방식이 아닌 함수 내부에서 변환이 진행 된다는 점이다
var arr = new Array(1, 2, 3);
arr.reverse();
arr : [3, 2, 1]

sort()

//배열 안의 원소들을 정렬하여 반환한다. reverse() 함수와 마찬가지로 배열 내에서 직접 수행된다.
//별도의 전달 인자 없이 호출할 경우 배열 안의 원소들을 알파벳 순으로 정렬한다.
//배열 안의 원소가 문자열이 아닐 경우 임시로 문자열 변환 작업이 수행된다.
var arr = new Array("banana", "cherry", "apple");
arr.sort();
arr : ["apple", "banana", "cherry"]

concat()

//기본의 배열원소 뒤에 전달 인자들을 추가한 배열을 반환한다. 허나 중복하여 중첩된 배열은, 원소로써 분리되어 나오지 않음을 주의 하자.
var arr = new Array(1, 2, 3);
arr.concat(4, 5) // arr : [1, 2, 3, 4, 5]
arr.concat([4, 5]) // arr : [1, 2, 3, 4, 5]
arr.concat([4, 5], [6, 7]) // arr : [1, 2, 3, 4, 5, 6, 7]
arr.concat([4, [5, [6, 7]]) // arr : [1, 2, 3, 4, 5, 6, 7]]

slice()

//배열의 일부, 혹은 부분배열을 반환한다. 전달인자가 음수일 경우 배열의 마지막 원소에서 상대적인 위치로 배열 원소들을 지정한다.
var arr = new Array(1, 2, 3, 4, 5);
arr.slice(0, 3); // arr : [1, 2, 3]
arr.slice(3); // arr : [4, 5]
arr.slice(1, -1); // arr : [2, 3, 4]
arr.slice(-3, -2); // arr : [3]

splice()

//배열에 원소를 삽입하거나 원소를 제거하려고 할때 사용하는 함수이다. 하지만 본 함수는 slice(), concat() 과는 달리 변경 결과를 반환하는 방식이 아닌 배열 내부에서 수행된다.
// 삭제
var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8);
arr.splice(4); // [5, 6, 7, 8] 반환, arr : [1, 2 ,3 ,4]
arr.splice(1, 2); // [2, 3] 반환, arr : [1, 4]
arr.splice(1, 1); // [4] 반환, arr : [1]

// 삽입
var arr = new Array(1, 2, 3, 4, 5);
a.splice(2, 0, 'a', 'b'); // []반환, arr : [1, 2, 'a', 'b', 3, 4, 5]
a.splice(2, 2, [1, 2], 3); // ['a', 'b']반환, arr : [1, 2, [1, 2], 3, 4, 5]

push(), pop()

//배열을 스택처럼 조작할 수 있다. push() 는 원소의 삽입 pop() 은 원소의 제거를 수행하며, 두 함수 모두 배열의 끝에서 연산을 수행한다. 
//배열 자체에서 연산이 수행되며 pop() 함수의 경우 제거한 원소를 반환하는 특징이 있다.
var arr = new Array()
arr.push(1, 2); // arr : [1, 2]
arr.pop(); // arr : [1], 2 반환
arr.push([4, 5]); // arr : [1, [4, 5]]
arr.pop(); // arr : [1], [4, 5] 반환
arr.pop(); // arr : [], 1반환

unshift(), shift()

//push(), pop() 과는 다르게 배열의 끝이 아닌 맨 앞에서 연산이 이루어진다. unshift() 의 경우 새로운 배열의 길이를, shift() 는 제거한 배열원소를 반환한다.
var arr = new Array();
arr.unshift(1); // arr : [1], 1 반환
arr.unshift(22); // arr : [22, 1], 2 반환
arr.shift(); // arr : [1], 22 반환
arr.unshift(3, [4, 5]); // arr : [3, [4, 5], 1], 3 반환
arr.shift(); // arr : [[4, 5], 1], 3 반환
arr.shift(); // arr : [1], [4, 5] 반환
arr.shift(); // arr : [], 1 반환


Let's create something great together.

프로젝트 문의 및 견적 요청은 언제든 환영합니다.