Rev. 2.73

계속해서 미루어 오다가 이제서야 소개합니다. Transcorners는 대상 엘리먼트의 모서리에 라운드(또는 대각선) 효과를 부여하는 자바스크립트 효과입니다. 가볍기로 잘 알려진 mootools 자바스크립트 프레임웍을 기반으로 만들어 졌으며, 모든 브라우저에서 사용할 수 있도록 제작되었습니다. 아래는 Transcorners 사용해서 직접 그려본 라운드 효과와 예제입니다.

보시다시피 실시간에 가까운 라운딩이 가능하며 이미지로 디자인한 라운드에 버금가는 디테일을 보여줍니다. 무엇보다도 이미지의 로드를 줄여 한결 가벼운 웹사이트를 구축할 수 있다는 것이 가장 큰 장점이라 하겠습니다. 매우 탐나는 확장기능이라 Prototype.js에서 사용할 수 있도록 컨버전하였으며, 손 댄 김에 기능을 조금 확장했습니다. 1픽셀 이상인 보더의 처리가 가능하도록 하였으며(예제2와 같은 결과), 투명한 라운드를 사용할 수 있도록 했고, 어설픈 그림자 효과도 만들어 보았습니다. 잘 응용하면 드래그앤 드롭이 가능한 멋진 다이얼로그 윈도우도 만들수도 있겠습니다. 참고로, 위에서 실행 된 예제는 Prototype.js기반으로 돌린 것 입니다.

윈도우 테스트

※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.
※ 라이브러리 이름이 Transcorners에서 Roundable로 변경되었습니다.

Comments

VirtualPC.jpg

마이크로소프트에서 무료로 배포한 버추얼 피씨(Microsoft Virtual PC)는 특정 플랫폼에서 여러가지 애플리케이션을 에뮬레이션 해 준다. 그리고 IE팀에서 만든 IE6이 포함된 버추얼 피씨 이미지를 마운트하면 가상으로 IE6에서 실행되는 결과물을 확일할 수 있게 된다. 특히, 윈도 비스타에서는 IE6에서의 작업 결과물을 확인하기가 쉽지 않기 때문에 웹개발시 장애가 되기도 했다. 이 이미지는 웹 디자이너나 개발자에게 큰 도움이 될 것이다.

문제는 기본으로 한글을 지원하고 있지 않는다는 것이다. 심지어 Regional and Language Options에 한국은 존재하지도 않는다. IME업데이트 또한 잘 되지 않았다. 한글의 입력뿐만아니라 표시조차도 안되는 것이다. 이 문제를 일부분 해결하려면 "C:\WINDOWS\Fonts" 폴더에 "gulim.ttc" 폰트를 강제복사함으로 IE6에서 한글표시가 가능하며, 완벽한 입출력을 위해서는 East Asian languages를 설치하면 된다고 한다.

Comments

8995856424_1.jpg

Prototype.js의 구석구석을 파해쳐 풀이한 도서가 4월에 출간될 예정이다. 영광스럽게도 본 도서의 베타리뷰를 맡아 진행하면서 느낀점을 간략하게 리뷰해 본다.

김영보 저자의 "Ajax Prototype.js - 프로토타입 완전분석"은 Prototype.js 프레임웍을 이해하는 것에 초점을 맞추고 있다. 코드 한줄 한줄을 낱낱히 분석하고 이해하는 과정을 적나라하게 담았다.(심지어는 정규식의 풀이과정까지) 이러한 분석은 자바스크립트의 기초를 다지고 나아가서는 개개의 작동방식을 이해함으로써 유기적으로 연결되어있는 큰 흐름을 볼수있게 한다. Prototype.js 프레임웍을 선호하거나 처음 시작하려는 이들에게 좋은 참고서이자 길잡이가 될 것이다.

Comments


예제1
//모든 코너에 반지름(radius) 30
new Transcorner( 'example1', { radius: 30 });
//background:#fee; border:1px solid #a00; 스타일 속성을 지님


예제2
//모든 코너에 반지름 10 (기본값)
new Roundable( 'example2');
//background:#4ff; border:2px solid #4bb; 스타일 속성을 지님

예제3
//상단 왼쪽 코너에만 반지름 20
new Roundable( 'example3', 'top left', { radius: 20 });

예제4
//상단 코너에만 반지름 10
new Roundable( 'example4', 'top');

예제5
//상단, 하단 오른쪽에 코너에 반지름 10 라인(cornerslinear transition)
new Roundable( 'example5', 'top, bottom right', { transition: Effect.Transitions.linear});