Entries Tagged as CSS/Javascript

imgAreaSelect

imgAreaSelect는 이미지의 영역선택(Selection)과 자르기(Cropping)를 지원하는 JQuery플러그인입니다. 이미지의 특정영역을 드래그하여 선택하며 강력한 기능을 제공하고 있습니다. 적용도 매우 쉽네요. 다음과 같은 멋진 기능을 제공합니다.

- X, Y축의 좌표추출
- 선택영역의 비율지정 (1:1인 경우 정사각형 기본값은 4:3)
- 최소, 최대 크기지정기능
- 드래그제어
- 선택영역 리사이즈(실제 이미지자체를 리사이즈하여 저장하는 기능은 제공하지 않습니다. 당연한것 이겠지만)
- 대부분의 브라우저지원(IE6지원)

문서화도 비록 영어로만 제공하지만 소스코드만 봐도 쉽게 적용이 가능합니다. 특히 CSS로 코드선택영역의 테두리, 또는 선택영역에 오베레이하여 다른 이미지를 보여줄 수 있습니다. 라이센스는 MIT/GPL입니다. 

http://odyniec.net/projects/imgareaselect/

imgselectarea jquery plugin

Twitter의 디자인을 한번이라도 본 분이라면 간결하고도 직관적이지만, 심플하면서도 디자인적이 요소가 군더더기 없이 일관된 UI특성을 유지하고 있다는 것을 잘 아시리라 봅니다.

대부분의 인터넷 서비스(국제적인 서비스일수록) 간결한 디자인에 직관적이면서도 기업의 전통과 일관성을 녹여내는 디자인을 구축합니다. 가끔은 디자이너로서, 또는 개발자로서 이런 디자인이 참 부럽다. 나도 해보고 싶다. 욕구가 생기지만 항상 결과물은 비슷한 유형의 복제품?만 나오게 됩니다.

대부분의 서비스에서 디자인적 요소는 저작권과 직결되기 때문에 함부로 가져다 쓸 수 없지만 TwitterBootstrap을 이용하면 Twitter에서 사용된 여러 디자인적 요소, 가령 레이아웃이나, Form 디자인 등을 그대로 사용할 수 있습니다.

물론 저작권이 없는 것은 아니지만 공개를 한 것이죠. 현재는 Apache 2.0 License를 취하고 있습니다. 대부분의 프로젝트에서 소스상의 저작권을 표기하는 조건이라면 사용해도 무방할 듯 합니다. ColdFusion엔진인 Open BlueDragon의 Administrator의 UI가 이 Twitter Bootstrap을 이용해 만들어졌는데요..

웹사이트에서 다양한 데모예제와 사용법을 살펴 볼 수 있고, GitHub에서의 소스코드도 다운로드 할 수 있습니다. 멋진 웹 어플리케이션을 만들고 싶지만 늘 디자인이 문제인 개발자에게 또 하나의 선물이지 않을까 생각합니다. 물론 JQuery UI도 하나의 훌륭한 대안이지만 저는 왠지 Twitter Bootstrap이 더 끌리는데요~

Powered by

© 2010-2018 NOOREE.COM