문서
-
Firefox 3.6에서 지원되는 ClassList
이 문서는 프랑스 OpenWeb 지지자 Anthony Ricaud에 의해 작성된 것 입니다. classList가 왜 필요한가. 동적 웹 응용 프로그램은 일반적으로 내부 매커니즘으로 부터 시작적은 피드백을 필요로 하거나, 다른 시각적인 요소를 사용자의 조작에 의해 표시해야 합니다. 사용자 인터페이스를 쉽게 변경 하기 위해, DOM API(document.createElement, div.removeChild, elt.style.color, …)를 사용하여 요소를 추가하거나 삭제하거나 변경할 수 있습니다. 하지만 CSS로 표시되는 […]
-
Firefox 3.6의 W3C FileAPI
웹 애플리케이션은 서버로 파일을 업로드 하는 경우처럼 필요한 경우 사용자에게 파일을 선택하도록 합니다. 웹 애플리케이션이 플러그인을 사용하지 않는 다면<input type="file"/>같은 HTML input 엘리먼트를 통해 파일을 선택하게 됩니다. Firefox 3.6은 이제 W3C File API의 많은 부분을 지원합니다. W3C File API는 선택된 파일들을 메모리로 비동기적으로 읽어들이는 기능과 웹 애플리케이션 내에서 파일 데이터를 다룰 수 있는 방법 – […]
-
Firefox 3.6에서 HTML용 pointer-events
CSS 속성(property)인 pointer-events는 오랫동안 SVG의 일부로써 쓸 수 있었다. 만일 요소(element)에 마우스이벤트(mouse event)가 마우스 바로 밑에 있는 요소에 보내져야 하거나 또는 그 밑에 있는 요소로 뚫고 지나가야 할 때 이를 제어하는 방법이다. 파이어폭스 3.6에서 우리는 속성을 확장해 일반적인 HTML 콘텐츠에서도 이를 적용할 수 있게 만들었다. SVG 사용시에는 pointer-events 속성을 여러 값(values)중 하나로 정할 수 있지만, […]
-
CSS 그라데이션(gradient)으로 멋진 버튼 만들기
이 데모를 만들고 쉽게 튜토리얼로 만들 수 있게 도와준 라이언 도허티에게 특별한 감사를 전합니다. 이번 데모에서는 Firefox 3.6에 새롭게 추가된 그라데이션(gradient) 기능을 사용하는 간단한 예를 살펴볼 것입니다(관련글 보기). gradient와 기존의 CSS 속성을 사용하여 양각화와 빗면 처리가 된 멋진 모양의 버튼을 만들 것입니다. 이 버튼은 다음 버전의 Personas 사이트에서 사용하려고 개발됐습니다. 버튼을 만드는데 CSS 기반의 메소드를 […]
-
쉬운 예제로 보는 웹 폰트와 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을 만드는 사람입니다. 아직 여러분이 데모 사이트를 보지 않으셨다면 먼저 보시길 권해 드립니다. 이 웹 사이트는 애니메이션과 매끈하게 […]
