Channy Yun가 쓴 문서
-
쉬운 예제로 보는 웹 폰트와 css 특징들
이 글은 Laurent Jouanneau에 의해 작성되었습니다. 그는 Firefox 3.5에서 웹 폰트와 CSS와 관련된 새로운 기능들을 어떻게 사용하는지 쉽고도 우아한 데모를 만드는 것에 관심이 많습니다. 이 글은 하동욱님께서 번역해 주셨습니다. View the Demo in Firefox 3.5 그림자와 둥근 테두리 먼저, 툴바에 스타일을 적용해 봅시다. -moz-border-radius -moz-border-radius:10px 0px 10px 0px; 이것는 좌상단과 우하단 경계 모퉁이가 10픽셀 반경으로 […]
-
FireFox3.5의 DOM selectors API
이 글은 하동욱님께서 번역해 주셨습니다. 원본 : http://hacks.mozilla.org/2009/06/dom-selectors-api/ W3C가 발표한 Selectors API 권고는 자바스크립트 개발자로 하여금 CSS Selectors를 사용하여 페이지 안의 DOM element들을 찾을 수 있도록 하려는 비교적 최근의 노력입니다. 이 단일 API는 DOM에서 element를 순회하고 선택하는 복잡한 과정을 단순하고 통일된 인터페이스로 통합합니다. 이것은 최근 표준프로세스로부터 나온 것들 중에서 모든 브라우저에 걸쳐 가장 잘 지원되고 […]
-
오픈스트릿맵에서 Geolocation 활용
이 글은 하동욱님께서 번역해 주셨습니다. 원본: http://hacks.mozilla.org/2009/06/geolocation-open-street-maps/ 이 데모는 Rene-Luc D’Hont가 제작하였으며, 35 days project를 위한 것입니다. 그의 회사 3Liz는 오픈소스 GIS 어플리케이션을 전문적으로 개발하고 있습니다. 3일 전 Doug Turner의 블로그에 파이어폭스 3.5에서 Geolocation이 어떻게 작동하는지에 대한 글이 올라왔습니다. Rene-Luc은 파이어폭스에서 geolocation 기능을 OpenStreetMap의 데이타 및 다른 공개 데이타들과 결합하였습니다. 밑에 데모를 실행해 보십시요. 사이트가 […]
-
-moz-box-shadow를 이용한 상자 그림자
이 글은 하동욱님께서 번역해 주셨습니다. 원본 위치: http://hacks.mozilla.org/2009/06/moz-box-shadow/ 파이어폭스 3.5에서 구현된 또 하나의 재미있는 CSS3 기능(feature)은 box shadow입니다. 이 기능은 거의 모든 element의 프레임에 그림자를 드리울 수 있도록 해줍니다. 그러나 CSS3 box shadow 기능은 아직 진행단계에 있기 때문에, 파이어폭스에서는 -moz-box-shadow라는 이름으로 구현하였습니다. CSS의 실험적인 기능을 모질라에서 어떻게 테스트하는지 보여주는 예라고 할 수 있겠습니다. 이름 앞에 […]
-
TraceMoneky 속도 체험
Firefox 3.5의 목표중 하나가 웹을 업그레이드 하는 것인데요. 여러번의 베타 버전을 출시하는 동안 많은 기술적인 면모를 갖추어왔습니다. 그 중 대표적인 것이 TraceMonkey에 대한 투자입니다. 이는 자바스크립트를 기계어로 넣어 실행하는 추적 기반 해석기로서 코드를 거의 네이티브 속도로 향샹 시켜 줍니다. 일반 사용자에게 기존 웹 애플리케이션의 속도를 증가 시켜 줄 뿐만 아니라 웹 개발자들이 더 빠른 새로운 […]
-
Canvas와 Burst를 이용한 SVG 애니메이션
본 데모는 Firefox 3.5 Beta 4 이상을 설치해서 보시길 권합니다. 오늘 보여드릴 데모는 매우 짧은 것이긴 하지만 어떻게 개발했는지 스크린 캐스트로 설명해 드릴려고 합니다. 이 데모는 Alistair MacDonald (@F1LT3R)가 만들었고 Processing.js의 개발자이자 이 데모의 기반이 된 Burst engine을 만드는 사람입니다. 아직 여러분이 데모 사이트를 보지 않으셨다면 먼저 보시길 권해 드립니다. 이 웹 사이트는 애니메이션과 매끈하게 […]
-
텍스트에 그림자 만들기
이 글은 Mozilla 웹 개발 팀의 Frederic Wenzel이 작성하였습니다. text-shadow라는 CSS 프로퍼티는 이름이 말해 주듯이 텍스트 주변 부분에 그림자를 만들고 흐리게 해주는 기능을 제공합니다. text-shadow는 CSS2에서 처음 등장했으나 그 당시에 정확히 정의를 못했고 CSS 2.1에서 빠지게 되었습니다. CSS3에서 다시 등장한 이 기능은 현재 Firefox 3.5 기능 탑재가 완료되었습니다. 동작 방식 CSS 3 표준 스펙에 따르면 […]
-
이미지 분위기 있게 만들기
이 글은 silverorange에 기고한 글이며 Mike Gauthier가 작성한 글입니다. silverorange은 본 35일간의 일기 프로젝트를 위한 데모 역시 제공하고 있습니다. 주의: 본 데모 페이지는 CPU가 많이 쓰이는 작업을 포함하고 있습니다. 본 기능에 관심이 있더라도 CPU 성능이 낮은 PC인 경우는 스크린샷만을 봐 주시기 바랍니다. 또한, 본 기능은 Firefox 3.5 RC1에서 더 잘 구동 되며 Beta 4 이하에서는 […]
-
Geolocation 위치 정보 기능
이 글은 Firefox 3.5의 Geolocation 기능을 개발한 Doug Turner가 작성하였습니다. 다양한 위치 정보를 이용하는 것이 현재 인터넷의 큰 화두입니다. 제가 토론토의 한 커피숍에 있고 제가 구글에서 검색을 한다고 하면 제 IP 주소를 기반으로 캐나다의 구글 페이지로 이동 시켜 줍니다. 주변의 제일 가까운 영화관을 찾고자 한다고 하면 나의 우편 번호를 기반으로 찾을 수 있겠지요. 웹 기반 […]
-
콘텐츠 기반 자동 이미지 크기 조정
이 예제는 Stephane Roucheray가 작성했으며 그는 PIMS 팀의 일원입니다. 본 글은 Pims World Labs 블로그에 소개되었습니다. Firefox 자동 이미지 크기 변경 데모를 보면 콘텐츠 기반 자동 이미지 크기 변경(Content Aware Image Resizing)이 콘텐츠 너비에 따라 자동으로 이미지 크기가 변하게 한다는 것을 알 수 있습니다. 비선형적 이미지 크기변경이라는 이러한 아이디어 Shai Avidan와 Ariel Shamir에 의해 2007년에 […]
