Firefox 3.5글목록 :

쉬운 예제로 보는 웹 폰트와 css 특징들

Channy Yun

1

이 글은 Laurent Jouanneau에 의해 작성되었습니다. 그는 Firefox 3.5에서 웹 폰트와 CSS와 관련된 새로운 기능들을 어떻게 사용하는지 쉽고도 우아한 데모를 만드는 것에 관심이 많습니다. 이 글은 하동욱님께서 번역해 주셨습니다.

그림자와 둥근 테두리

먼저, 툴바에 스타일을 적용해 봅시다.
-moz-border-radius

-moz-border-radius:10px 0px 10px 0px;

이것는 좌상단과 우하단 경계 모퉁이가 10픽셀 반경으로 원형을 이루도록 합니다.

-moz-box-shadow

-moz-box-shadow: #9BD1DE 5px 5px 6px;

이것은 그림자가 우하단에 5픽셀 치우치고, 6픽셀의 블러(blur) 반경을 가지고 div 밑에 그려지도록 합니다.
다음은 버튼 차례입니다. 우리는 여기서도 역시 border-radius property를 사용합니다. 아울러 버튼의 상태에 따라 변하는 box-shadow 특성도 사용할 것입니다. inset CSS 기능(property)을 사용하면, 마우스가 버튼 위에 있을 때(hover 상태) 그림자가 버튼 안쪽으로 드리우도록 할 수 있습니다. 버튼이 클릭될 때도(active 상태) 마찬가지입니다. 원한다면, 그림자가 더 크고 어둡게 만들 수도 있습니다.

#superbox button {
    -moz-border-radius: 5px;
    -moz-box-shadow: #000 0px 0px 8px;

}
 
#superbox button:hover {
    -moz-box-shadow: inset #989896 0 0 3px;

    text-shadow: red 0px 0px 8px;
}
 

#superbox button:active {

    -moz-box-shadow: inset #1C1C1C 0 0 5px;

}

text-shadow 기능을 사용해서 마우스가 버튼 위에 있을 때, 버튼 텍스트 밑에 빨간 그림자를 추가한 것도 볼 수 있습니다.

Web fonts
각 버튼들은 @font-face를 사용하여 선언된 고유 폰트로 렌더링할 수 있습니다. 예를 들면 다음과 같습니다:

@font-face {
    font-family: Brock Script;

    src: url("BrockScript.ttf");

    font-style: normal;

    font-weight: normal;
}

font-family 특성을 사용하여, 사용될 폰트의 이름을 지정하고, src는 해당 폰트를 다운로드할 수 있는 url주소를 기술합니다. 한번 @font-face 특성을 정의하면, CSS에서 다른 버튼들을 위해서도 그것을 사용할 수 있습니다.

.first {

    font-family: Brock Script;
}

@font-face를 통해 폰트를 선언하고, 그것을 CSS에서 사용하게 되면, 브라우저는 자동으로 폰트를 다운로드하고, 그것을 사용하여 페이지를 렌더링하게 됩니다. 폰트를 선언만 하고 사용하지 않는다면 브라우저는 해당 폰트를 다운로드하지 않기 때문에, 당장 보여지고 있는 페이지에서 쓰고 있지 않은 폰트 서술자(description)들을 공통 CSS 파일에 포함시켜도 괜찮습니다.
데모에는 동적으로 폰트가 변경되는 예를 보여주기 위한 몇 줄의 스크립트가 추가되어 있습니다. 각 버튼과 연결된 스크립트는 데모의 파란박스(툴바)의 클래스를 변경하여 해당 버튼과 같은 폰트를 사용하도록 합니다. 이렇게 간단한 방법으로 비트맵 이미지없이 아름다운 버튼의 표현이 가능합니다. 참고: fontsquirrel.com : Brock-Script (created by Dieter Steffmann), Sniglet (created by The League of Moveable Type, under the licence CC-by-sa) and Quick End Jerk (created by Vic Fieger)에서 폰트들을 다운로드 받을 수 있습니다.

FireFox3.5의 DOM selectors API

Channy Yun

0

이 글은 하동욱님께서 번역해 주셨습니다. 원본 : http://hacks.mozilla.org/2009/06/dom-selectors-api/

W3C가 발표한 Selectors API 권고는 자바스크립트 개발자로 하여금 CSS Selectors를 사용하여 페이지 안의 DOM element들을 찾을 수 있도록 하려는 비교적 최근의 노력입니다. 이 단일 API는 DOM에서 element를 순회하고 선택하는 복잡한 과정을 단순하고 통일된 인터페이스로 통합합니다.

이것은 최근 표준프로세스로부터 나온 것들 중에서 모든 브라우저에 걸쳐 가장 잘 지원되고 있는 기술 중에 하나입니다: 현재 인터넷 익스플로러 8.0, 크롬, 사파리 그리고 곧 나올 파이어폭스3.5와 오페라10에서 사용가능합니다.

querySelectorAll사용하기
Selectors API는 모든 DOM 문서, element 그리고 fragment에 대해 다음과 같은 두가지 메소드를 제공합니다: querySelector 그리고 querySelectorAll 입니다. 이 두 메소드는 모두 CSS selector를 받고, 결과 DOM elements를 반환함으로서 사실상 동일한 동작을 합니다(querySelector가 단지 첫번째 element를 반환한다는 것만 제외하고는 말이죠.)
예를 들어, 다음과 같은 HTML 코드가 주어졌을 때

<div id="id" class="class">

    <p>First paragraph.</p>

    <p>Second paragraph.</p>
</div>

“id”라는 ID를 가진 div안에 정의된 모든 문단(paragraph)의 배경을 빨간색으로 만들기 위해 querySelectorAll를 사용할 수 있을 것입니다.

var p = document.querySelectorAll("#id p");

for ( var i = 0; i < p.length; i++ ) {

    p[i].style.backgroundColor = "red";
}

혹은 div안의 첫번째 문단을 찾아서 ‘first’라는 class 이름을 부여할 수도 있습니다.

document.querySelector("div.class > p:first-child")
    .className = "first";

이것을 자바스크립트/DOM으로 구현하려면 대게 긴 코드와 쿼리를 필요로 하는 따분한 작업입니다. Selectors API 메소드의 실제적인 사용은(단 하나의 인자를 받음) 비교적 간단한 반면, 어려운 부분은 어떤 CSS Selectors를 사용할지 고를 때 나타납니다. Selectors API는 CSS를 사용하여 element들을 스타일링하기 위해 브라우저가 제공하는 네이티브 CSS selectors를 사용합니다.

대부분의 브라우저(파이어폭스, 사파리, 크롬, 오페라)에서 이것은 당신이 CSS 3 selectors의 모든 부분에 대해 접근할 수 있음을 뜻합니다. 인터넷 익스플로러 8은 CSS 2 selectors(여전히 매우 유용한)를 포함하는 더 제한된 일부만을 제공합니다. Selectors API를 새롭게 사용하려는 유저들이 대부분이 겪는 가장 큰 문제는 어떤 CSS selectors가 당신이 원하는 elements를 선택하는데 적당한지 결정하는 것입니다. –

특히 브라우저 호환성있는 코드를 작성하는 대부분의 개발자들이 CSS 1 selectors의 제한된 일부분에 대해서만 경험을 가지고 있기 때문에 더욱 그러합니다. CSS 2CSS 3 selector 명세서는 당신이 사용가능한 것들이 무엇인지 공부하는데 좋은 자료입니다. 이밖에도 다음과 같은 좋은 참고자료가 있습니다:

Implementations in the Wild

Selectors API의 가장 흥미로운 사용예는 웹 개발자에 의한 직접적인 사용이 아니라 DOM CSS selector 기능을 이미 제공하고 있는 서드파티 라이브러리들이 사용하는 경우입니다. 오늘날 Selectors API를 채용하는데 가장 까다로운 문제점은 그것이 모든 브라우저에서 사용가능하지 않다는 것입니다.(IE6, IE7 그리고 파이어폭스3가 여기 포함됩니다.) 그러므로 이러한 브라우져가 더 이상 사용되지 않을때 까지는 모든 DOM CSS selector 기능을 재현하는 어떤 중간단계 유틸리티를 사용해야 합니다.

다행히도 Selectors API와 호환가능한 API를 제공하는 라이브러리들이 많이 있습니다.(사실 Selectors API를 만들게 된 영감들은 이러한 라이브러리들이 많이 존재한다는 사실로부터 왔습니다.) 덧붙이자면, 많은 라이브러리들이 Selectors API를 이미 사용하고 있습니다. 이 말은 여러분이 지원하는 모든 브라우저에서 DOM CSS Selectors를 사용하여 사용할 수 있다는 것을 뜻합니다. 그리고 추가적인 작업없이 네이티브 Selectors API 구현 덕에 빠른 성능을 볼 수 있습니다. 새로운 Selector API를 우아하게 사용하는 몇 개의 구현 내용을 소개하면 다음과 같습니다:

기존의 DOM와 자바스크립트를 혼합하여 사용할 수 밖에 없었던 것과 비교해서 새로운 API를 사용함으로서 얻게될 큰 성능 향상을 강조하고 싶습니다. 자바스크립트 라이브러리들이 새로운 Selectors API를 구현하기 시작할 때 생기는 향상을 똑똑히 목격할 수 있을 것입니다.

기존의 테스트 결과는 다음과 같습니다.:

네이티브 API를 사용하면 성능상 놀라운 변화가 있음을 알 수 있습니다. 이것은 여러분의 어플리케이션에서도 비슷한 성능향상을 얻을 수 있음을 뜻합니다.
Test Suite

Selectors API 명세서에서 정의된 바와 같이 Selectors API test suite은 모질라 그룹의 John Resig에 의해 만들어졌습니다. 이 test suite은 각 Selectors API 임플러먼테이션들의 질을 판단하기 위한 방식으로 사용될 수 있습니다.
이 API를 지원하는 브라우저는 현재 다음과 같습니다:

  • Firefox 3.5: 99.3%
  • Safari 4: 99.3%
  • Chrome 2: 99.3%
  • Opera 10b1: 97.5%
  • Internet Explorer 8: 47.4%

인터넷 익스플로러 8은 앞서 언급한 바와 같이 대부분의 CSS 3 selectors 기능이 빠져있습니다. 그러므로 관련된 대부분의 테스트를 실패합니다.
Selectors API는 말그대로 페이지 상의 DOM elements을 간단하고, 빠르게 선택하는 방식을 제공합니다. 비슷한 기능을 하는 자바스크립트 라이브러리를 사용하는 사람들에게 이미 이롭게 쓰이고 있습니다. 그러니 여러분도 편안한 마음으로 시도해 보시기 바랍니다.

오픈스트릿맵에서 Geolocation 활용

Channy Yun

0

이 글은 하동욱님께서 번역해 주셨습니다. 원본: 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의 데이타 및 다른 공개 데이타들과 결합하였습니다. 밑에 데모를 실행해 보십시요. 사이트가 열릴 때 뜨는 Share Location버튼을 누르는 것을 잊지 마시구요.

위 데모에서 위치정보가 제대로 전달되었다면, 당신이 있는 위치가 빨간색 마크로 표시되는 것을 볼 수 있을 것입니다. 빨간색 마크를 둘러싸고 있는 파란색 원은 위치정보의 정확성을 나타냅니다. 위치정보는 당신의 IP주소 혹은 로컬 WiFi access 포인트를 기반으로 알아낸 것이기 때문에 정확성은 가변적입니다.
이 데모는 당신이 있는 지역의 정보를 다른 정보제공자들로부터도 가져옵니다. 각각의 정보는 레이어로 표시됩니다. 각 레이어들은 다음과 같습니다:

  • 기본 레이어는 OpenStreetMap로부터 제공되는 맵 그 자체입니다. OpenStreetMap는 스트리트맵과 같은 지리정보를 생성하고, 원하는 사람들에게 무료로 제공하는 프로젝트입니다. Wikipedia와 마찬가지로 누구나 맵을 수정하고, 자신의 정보를 추가할 수 있습니다.
  • 다음 레이어는 Wikipedia의 문서들을 기반으로 합니다. Mountain View 혹은 Montpellier와 같은 문서들은 지리좌표를 포함하고 있습니다. 그리고 GeoNames에서는 지리좌표를 입력으로 Wikipedia 문서들을 검색할 수 있는 웹서비스를 제공하고 있습니다. 이 데모를 통해 당신이 있는 주변장소에 대한 Wikipedia 문서들을 발견할 수 있습니다.
  • 마지막 레이어는 GeoNames을 기반으로 합니다. GeoNames는 전세계적인 지리학적 데이터베이스로 팔백만개가 넘는 지명을 포함하고 있습니다. 데모에서 도시, 마음, 호수, 공원, 호텔 등의 GeoNames 데이타베이스를 볼 수 있습니다.

지도와 레이어는 OpenLayers를 사용하여 구축되었습니다. OpenLayers는 무료 자바스크립트 라이브러리로서, 웹페이지에 동적인 지도를 추가할 수 있게 해줍니다.
Resources

데이타들이 잘 어울려진 맵 스크린샷 몇 장을 올립니다.
geolocation-2
geolocation-3

-moz-box-shadow를 이용한 상자 그림자

Channy Yun

2

이 글은 하동욱님께서 번역해 주셨습니다. 원본 위치: http://hacks.mozilla.org/2009/06/moz-box-shadow/

파이어폭스 3.5에서 구현된 또 하나의 재미있는 CSS3 기능(feature)은 box shadow입니다. 이 기능은 거의 모든 element의 프레임에 그림자를 드리울 수 있도록 해줍니다. 그러나 CSS3 box shadow 기능은 아직 진행단계에 있기 때문에, 파이어폭스에서는 -moz-box-shadow라는 이름으로 구현하였습니다. CSS의 실험적인 기능을 모질라에서 어떻게 테스트하는지 보여주는 예라고 할 수 있겠습니다. 이름 앞에 “-moz-”를 붙여서 말이죠. 명세서가 완성되고 나면, 이 기능의 이름은 “box-shadow”로 바뀔 것입니다.

How it works
element에 box shadow를 적용하는 방법은 직관적입니다. CSS3 standard에 따르면,

none | <shadow> [ <shadow> ]*

여기서 <shadow>는 다음과 같습니다.

<shadow> = inset? && [ <length>{2,4} && <color>? ]

처음의 두 길이값은 각각 그림자의 수평과 수직 오프셋을 의미합니다. 세번째 길이값은 블러(blur) 반경입니다.(text-shadow property에서의 블러반경과 비교해 보세요.). 마지막으로 네번째 길이값은 스프레드(spread) 반경으로 그림자를 부모 element의 크기와 비교하여 크거나(grow) 작게(shrink) 만듭니다.

inset 키워드는 표준문서에 아주 잘 설명되어 있습니다. 인용하면,

이 키워드가 있으면, 투영 그림자가 외부(outer) 그림자에서 내부(inner) 그림자로 바뀝니다. 외부 그림자는 캔버스 위에 박스의 그림자를 그리는 방식으로 캔버스 위에 떠있는 느낌을 줍니다. 반면, 내부 그림자는 캔버스의 그림자를 박스 위에 드리우는 방식으로, 박스가 캔버스의 안쪽 바깥으로 내려앉은 느낌을 줍니다.
.

백문이 불여일견입니다. 예를 통해 살펴보죠.
간단한 그림자를 오프셋과 색상만 지정해 보면 다음과 같습니다.

 -moz-box-shadow: 1px 1px 10px #00f;

 
simple box shadow
(이 문서의 각 예제는 현재 브라우저에서의 렌더링 결과와 함께 OSX에서 파이어폭스3.5를 통해 얻어진 스크린샷이 순서대로 보여집니다.)
앞서 설명한 in-set 키워드를 사용한 그림자도 다음과 같이 그릴 수 있습니다.

-moz-box-shadow: inset 1px 1px 10px #888;

 
inset box shadow
스프레드 반경을 사용해서, 해당 element보다 작거나 큰 그림자를 얻을 수 있습니다.

-moz-box-shadow: 0px 20px 10px -10px #888;

 
box shadow with spread radius
원한다면, 콤마를 통해 여러개의 그림자를 정의함으로서 다수의 그림자 효과를 얻을 수 있습니다.(courtesy of Markus Stange):

-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

 
multiple box shadows
보시는 것처럼 각자 다른 그림자들이 서로 부드럽게 블렌딩됩니다. 그림자가 정의된 순서에 따라 결과물도 달라진다는 사실에 주목하세요. box-shadow가 CSS3의 기능(feature)이기 때문에, 파이어폭스3.5도 CSS3의 그리기 순서를 따릅니다. 즉, 먼저 선언된 그림자가 가장 위에 보여집니다. 다수 그림자를 드리울 때 항상 명심하셔야 합니다.
마지막으로, -moz-box-shadowRGBA color definition을 결합한 예제를 보여드리겠습니다. RGBA는 색의 불투명도(opacity)를 표현하기 위해 알파채널을 더한 것을 빼고는 RGB와 같습니다. 노란색 배경 위에 50%의 불투명도를 가지는 검은색의 블러가 없는 박스 그림자를 그려봅시다.

-moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5);

 
box shadow with RGBA
보시다시피, 별고생없이 노란색 배경이 반쯤 투명한 그림자를 통해 보이도록 했습니다. 이 기능은 특히 배경이미지와 결합되어 유용하게 쓰일 수 있습니다. 박스 그림자 뒤에 비쳐진 배경이미지를 볼 수 있으니까요.
Cross-Browser Compatibility
새롭게 진행중인 CSS3 기능이기 때문에, box-shadow는 아직 많은 브라우져에서 지원되지 않습니다.

  • 파이어폭스 3.5는 -moz-box-shadow라는 형태로 이 기능을 지원합니다. 다중 그림자와 inset 키워드 및 스프레드 반경도 함께 지원합니다.
  • Safari/Webkit도 파이어폭스와 유사한 방식하게 -webkit-box-shadow라는 형태로 지원합니다. 버전4.0부터 다중 그림자 기능을 지원합니다만, inset 그림자와 스프레드 반경은 아직 지원하지 않습니다.
  • 마지막으로 Opera와 Microsoft Internet Explorer는 box shadow기능을 아직 구현하지 않았습니다. 단, MSIE에는 DropShadow filter라는 그들만의 독점적인 기능이 있기는 합니다.

최대한 범용적인 페이지를 만들기 위해서는 -moz, -webkit 그리고 CSS3 스탠다드 문법을 동시에 정의해야 합니다. 그러면 브라우저들은 그들이 지원하는 것 중에 하나를 골라 적용할 것입니다. 예를 들면:

 -moz-box-shadow: 1px 1px 10px #00f;

 -webkit-box-shadow: 1px 1px 10px #00f;
 box-shadow: 1px 1px 10px #00f;

좋은 소식은 box-shadow 기능이 그것을 지원하지 않는 브라우저에서도 그리 흉하지 않게 나타난다는 것입니다. 인터넷 익스플로러에서 위의 모든 예제들은 그저 그림자없는 평범하고 심심한 박스들로 그려질 것입니다.
맺으면서
CSS3 box-shadow 기능은 아직 많은 브라우저들에서 사용가능하지 않습니다. 그러나 Webkit에서 제한된 box shadow 기능을 제공하고 있으며, 파이어폭스에서는 전적으로 이 기능(현재 초안에 따라서)을 지원하는 만큼 더 많은 유저들이 CSS box shadow를 볼 수 있게 될 것입니다.
웹 개발자로서 당신은 기존 브라우저 사용자들을 외면하지 않으면서도 최신 브라우저 사용자들에게 앞서가는 경험을 안겨줄 수 있는 것입니다.

더 읽을거리
문서

예제

TraceMoneky 속도 체험

Channy Yun

0

Firefox 3.5의 목표중 하나가 웹을 업그레이드 하는 것인데요. 여러번의 베타 버전을 출시하는 동안 많은 기술적인 면모를 갖추어왔습니다. 그 중 대표적인 것이 TraceMonkey에 대한 투자입니다. 이는 자바스크립트를 기계어로 넣어 실행하는 추적 기반 해석기로서 코드를 거의 네이티브 속도로 향샹 시켜 줍니다.

일반 사용자에게 기존 웹 애플리케이션의 속도를 증가 시켜 줄 뿐만 아니라 웹 개발자들이 더 빠른 새로운 종류의 프로그램을 만들 수 있게 되며 다른 웹 브라우저 만큼 속도를 향상시켰습니다. 아래 동영상은 실제 체감 속도가 얼마나 빨라지는지 느낄 수 있도록 만든 것으로 데모 페이지를 기반합니다. 여러분도 직접 Firefox 3.5로 느껴 보시기 바랍니다.

Sadfaces. Your browser doesn’t support native video. Maybe you can try the .ogv version or the .mp4 version and hope for the best?

Canvas와 Burst를 이용한 SVG 애니메이션

Channy Yun

0

본 데모는 Firefox 3.5 Beta 4 이상을 설치해서 보시길 권합니다.

오늘 보여드릴 데모는 매우 짧은 것이긴 하지만 어떻게 개발했는지 스크린 캐스트로 설명해 드릴려고 합니다. 이 데모는 Alistair MacDonald (@F1LT3R)가 만들었고 Processing.js의 개발자이자 이 데모의 기반이 된 Burst engine을 만드는 사람입니다.

아직 여러분이 데모 사이트를 보지 않으셨다면 먼저 보시길 권해 드립니다. 이 웹 사이트는 애니메이션과 매끈하게 보이는 슬라이드와 그래픽 영역을 가지고 있습니다. 아마 여러분들은 플래시로 만든게 아닐까 하는 생각이 드실 겁니다. 하지만 플래시는 사용하지 않았고 오직 CSS와 Canvas 그리고 DOM만을 이용하였습니다.

데모로 돌아와서 이 글에는 몇 가지 SVG 애니메이션 기능을 제공하고 있습니다. 지금까지 이렇게 다르게 만들 수 있는 방법이 별로 없었습니다만 SVG를 DOM으로 네이티브하게 받아 들이는 대신 Burst 엔진을 이용하여 SVG를 읽고 처리해서 JS 객체를 만들어 캔버스에 뿌리는 방식을 이용 합니다. 이렇게 함으로서 좀 더 빠르게 애니메이션을 만들고 Canvas에 그려 낼 수 있습니다.

또한 이 데모를 어떻게 만들었는지 튜토리얼을 보시길 권합니다. inkscape를 이용하여 Burst 엔진과 다른 간단한 JS 코드를 통해 그리기 및 애니메이션이 가능합니다.

텍스트에 그림자 만들기

Channy Yun

0

이 글은 Mozilla 웹 개발 팀의 Frederic Wenzel이 작성하였습니다.

text-shadow라는 CSS 프로퍼티는 이름이 말해 주듯이 텍스트 주변 부분에 그림자를 만들고 흐리게 해주는 기능을 제공합니다. text-shadow는 CSS2에서 처음 등장했으나 그 당시에 정확히 정의를 못했고 CSS 2.1에서 빠지게 되었습니다. CSS3에서 다시 등장한 이 기능은 현재 Firefox 3.5 기능 탑재가 완료되었습니다.

동작 방식
CSS 3 표준 스펙에 따르면 text-shadow 프로퍼티는 2가지 값을 가집니다.

none | [<shadow>, ] * <shadow>,

<shadow>는 다음과 같습니다.

[ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ],

여기서 첫 두 값은 수평 혹은 수직에서 텍스트와의 간격을 이야기하고 세번째는 얼마나 흐리게 할 것인가 하는 값(blur radius)를 말합니다. 가장 좋은 방법은 예제를 보는 것으니까 한번 살펴 보겠습니다.

text-shadow: 2px 2px 3px #000;
simple shadow

(앞으로 첫번째는 실제 코드 예제를 두번째 그림은 그것이 Firefox 3.5 맥버전에서 표시되는 것을 캡쳐한 것입니다.)

만약 그림자 배경을 좀 더 깔끔하게 하시려면 blur radius 값을 줄이면 됩니다.

text-shadow: 2px 2px 0 #888;
I don’t like blurs

텍스트 Glowing 및 다중 그림자
현재 기능을 유연하게 적용하기 위해서 여러 가지 다른 것을 해보겠습니다. 텍스트와 그림자와의 간격 및 흐림 정도, 색상을 조정함으로서 다양한 효과를 만들어 낼 수 있습니다. But due to the flexibility of the feature, the fun does not stop here. By varying the text offset, blur radius, and of course the color, you can achieve various effects, a mysterious glow for example:

 text-shadow: 1px 1px 5px #fff;
Glowing text

또는 간단한 그림자 효과입니다.

text-shadow: 0px 0px 5px #000;
Blurry text

이제 한 개 이상의 그림자를 만들어 보도록 하겠습니다. 이 기능은 css3.info의 http://www.css3.info/preview/text-shadow/에 소개된 것입니다.

text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200
Multiple shadows are hot

text-shadow를 여러개 적용하는 것은 Firefox 3.5에서 가능하며 이론적으로 그 갯수는 무제한입니다. 물론 적당한 갯수를 사용하셔야만 하겠지요. 여타 CSS 프로퍼티 처럼 자바스크립트를 이용하여 이를 수정할 수 있습니다.

Animated shadows with JavaScript

성능 및 접근성, 브라우저 호환성
많은 경우 플래시 파일 혹은 이미지 파일을 이용하여 그림자를 표시하는 것이 일반적입니다. 하지만 text-shadow를 써야할 2가지 이유가 있습니다.

The times of using pictures (or even worse, Flash) for text shadows on the web are numbered for two reasons:

먼저 이미지 파일 대신 text-shadow를 사용하면 HTTP 연결 수나 트래픽을 줄일 수 있으므로 성능이 향상 됩니다. 또한 스크린 리더 사용자나 검색 엔진들이 이미지가 아닌 텍스트로 정보를 얻을 수 있는 접근성이 향상 됩니다. 또한, 페이지 확대 기능을 통해 노인이나 어린이도 쉽게 글자를 파악할 수 있습니다. 이는 이미지로 된 경우 픽셀 확대에 따라 글자가 흐려지는 것을 방지할 수 있는 것입니다.

두번째는 향후 웹 브라우저 호환성 때문입니다.

  • Opera는 text-shadow를 9.5 버전 부터 지원 합니다. Mozilla Developer Center에 의하면 Opera 9.x는 같은 요소에서 6개의 그림자를 지원합니다.
  • Safari 역시 1.1 버전 부터 이 기능을 지원 하며 웹킷 기반 브라우저 모두 해당됩니다.
  • Internet Explorer는 아직 text-shadow를 지원하지 않지만 텍스트를 보여 주는 데 있어서는 문제가 없습니다. 또한 text-shadow 기능이 MSIE에서 준비되고 있으며 Shadow 및 DropShadow” 필터기능과 함께 쓸 수 있습니다.
  • 또한 MSIE 뿐만 아니라 Firefox 3 등 오래된 버전에서는 이 기능을 지원하진 않지만 텍스트를 표시하는 데는 문제가 없습니다.

그 다음으로 중요하게 생각할 점은 그리기 순서 입니다. Opera 9.x에서는 CSS2의 그리기 순서 (즉 맨 먼저 정의된 그림자를 맨 밑에 그린다.)를 따르는 반면 Firefox 3.5는 CSS3의 그리기 순서(먼저 정의된 그림자를 맨 위어 그린다.)를 따르고 있습니다. 다중 그림자를 그릴때는 이 점을 주의하세요.

맺으면서
text-shadow는 CSS의 강력한 기능을 보여 주는 예중에 하나입니다. Firefox 3.5 이후로 웹 개발 시 많은 부분에서 이용되기를 바랍니다. 또한 이는 오래된 브라우저에게 단계적 기능 축소(Graceful degradation) 역시 제공하기 때문입니다.

마지막으로 웹 개발자들이 이 기능을 많이 이용함으로서 글자로된 다양한 정보들이 더 많이 공유되기를 바랍니다.

참고 문헌
문서

예제

이미지 분위기 있게 만들기

Channy Yun

0

이 글은 silverorange에 기고한 글이며 Mike Gauthier가 작성한 글입니다. silverorange은 본 35일간의 일기 프로젝트를 위한 데모 역시 제공하고 있습니다.

주의: 본 데모 페이지는 CPU가 많이 쓰이는 작업을 포함하고 있습니다. 본 기능에 관심이 있더라도 CPU 성능이 낮은 PC인 경우는 스크린샷만을 봐 주시기 바랍니다. 또한, 본 기능은 Firefox 3.5 RC1에서 더 잘 구동 되며 Beta 4 이하에서는 구동하지 않기를 바랍니다.

Mozilla와 함께 좀 더 혁신적인 실험을 진행하여 HTML5의 새로운 기능을 Firefox 3.5에 탑재하였습니다. 즉, <canvas>와 <video> 요소를 이용하여 재생되는 동영상의 색상 정보를 이용하여 그 주면에 경계선을 그려주는 데모 입니다.

동작 방법
HTML5의 canvas 요소에 동영상 프레임을 집어넣어 색상 계산을 수행합니다. 그런다음 캔버스의 평균 색상을 알아냅니다. 좀더 빠르게 수행하기 위해서 비디오 프레임은 좀 더 작은 캔버스에 만들어지고 (50×50 사이즈) 색상 정확도 및 계산 속도가 향상됩니다. 아래 코드를 참고하세요.

var canvas = document.getElementById('canvas');

var video = document.getElementById('video');
var context = canvas.getContext('2d');

 
// push frame to canvas
context.drawImage(video, 0, 0, canvas.width, canvas.height);

 
// get image data for color calculation
var data = context.getImageData(0, 0, canvas.width, canvas.height);

계산된 색상은 YUI animation을 이용하여 시간에 따라 변합니다.
동영상 각 부분은 SVG 마스크를 통해 뽑아냅니다. Firefox 3.5는 CSS+SVG property 방법을 이용하여 각 요소에 적용할 수 있습니다. 먼저 SVG mask는 문서 인라인에서 정의 합니다. (외부적으로 정의함) 그리고 mask는 아래 CSS를 통해 video 요소에 적용할 수 있습니다.

#video {
    mask: url(index.html#m1);

}

Firefox 3.5에서는 두 가지 CSS+SVG 프로퍼티가 있습니다. clip-pathfilter인다 CSS에서 이를 참조하기 위해서는 url(filename#element-id) 혹은 url(#element-id)을 이용하여 CSS 파일에 정의할 수 있습니다.

마지막으로 이 예제는 CSS 3.0의 새로운 기능들을 주로 이용합니다. Firefox 3.5에서는 box-shadow 프로퍼티, text-shadow 프로퍼티 및 rgba 색상 모델을 사용합니다.

#main-feature {
    -moz-box-shadow: #000 0px 5px 50px;

}
#description {
    text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 2px;

}

Geolocation 위치 정보 기능

Channy Yun

0

이 글은 Firefox 3.5의 Geolocation 기능을 개발한 Doug Turner가 작성하였습니다.

다양한 위치 정보를 이용하는 것이 현재 인터넷의 큰 화두입니다. 제가 토론토의 한 커피숍에 있고 제가 구글에서 검색을 한다고 하면 제 IP 주소를 기반으로 캐나다의 구글 페이지로 이동 시켜 줍니다. 주변의 제일 가까운 영화관을 찾고자 한다고 하면 나의 우편 번호를 기반으로 찾을 수 있겠지요. 웹 기반 애플리케이션에서 그러한 수고 없이도 나의 위치를 제공할 수 있는 방법이 있을까요?

Firefox 3.5는 간단한 JavaScript API를 이용하여 사용자의 위치 정보를 웹 애플리케이션이 받아 갈 수 있는 기능을 탑재했습니다. 위치 정보를 별도로 타이핑하지 않아도 웹 사이트에 나의 위치를 공유할 수 있습니다. Firefox 3.5의 Geolocation 서비스에 대해 살펴 보고 사용 방법을 알아보겠습니다.

기능 소개
사용자의 위치 정보는 얻어오는 방법은 매우 쉽습니다.

function showPosition(position) {

    alert(position.coords.latitude + “ “ +
    position.coords.longitude);

}
 
navigator.geolocation.getCurrentPosition(showPosition);

getCurrentPosition을 호출해서 사용자의 현재 위치를 얻고 이를 알림창에 표시하는 것으로 위치는 위도와 경도 값으로 표현됩니다.

위치 정보를 얻어오려고 할 때 주소창 아래에 간단한 알림 표시줄이 보이게 됩니다.

요청 하는 웹 사이트에 위치 정보 제공 허가 여부와 기억 여부를 결정할 수 있습니다.

오류 처리
소스 코드에서 2가지 경우 오류를 처리하는 것이 필요합니다.

먼저 사용자가 위치 정보 요청에 대해 응답하지 않거나 거부하는 경우 API는 오류 콜백을 제공합니다. 사용자가 공유를 거부하면 콜백이 만들어지지만 응답하지 않는 경우 제공되지 않습니다. 이러한 콜백 오류를 처리하려면 시간 초과(timeout) 기능을 이용하여 getCurrentPosition 호출을 특정 시간 이후에 만료 시켜야 합니다.

navigator.geolocation.getCurrentPosition(successCallback,

                                         errorCallback,
                                         {timeout:30000});

위의 코드에서 errorCallback 함수는 사용자가 취소할 경우 실행 되는데 30초 후에도 응답이 없으면 요청이 취소 됩니다.

두번째는 사용자 위치가 시간에 따라 변해서 위치의 정확성이 떨어지는 경우 입니다. 그 이유에는 몇 가지가 있습니다.

  • 사용자의 위치를 파악하는 데 필요한 방법의 정확성에서 차이가 날 때.
  • 사용자가 정확한 위치 정보를 제대로 공유해 주고 있지 않을 때.
  • GPS 기기의 정확성은 대개 위성 위치에 따라 차이가 나는데 시간에 따라 이동에 의해 위성 정보가 좀 더 나빠질 경우.
  • GPS 기기가 위치를 잡을 때 길게는 수십초가 걸리는데 이 때 위치 이동 시 정보에 차이가 발생 할때.

이들 경우 공유된 위치 정보가 차이가 날 수 있으며 이는 서비스의 사용자 경험에 영향을 줄수 있습니다. 만약 위치 정보의 변화를 주시하고자 한다면 watchPosition 콜백 API를 사용할 수 있습니다.

navigator.geolocation.watchPosition(showPosition);

showPosition 역시 위치가 변경될 때 호출 합니다. 이 때 getCurrentPosition을 이용하여 위치 정보를 다시 얻어올 수 있습니다. 하지만, 성능 등 여러 문제 때문에 watchPosition을 이용하는 것이 좋습니다. 콜백 API는 일반적으로 호출될 때만 사용되므로 성능에 도움을 줍니다. 이는 브라우저의 짐을 덜어주고 좀 더 빠른 응답이 가능합니다. 더 자세한 사항은 API 명세 초안을 참고하시면 다양한 예제들이 있습니다.

위치 정보 수집 방식
위치 정보를 정확히 어떻게 얻어 낼수 있을까요. 가장 흔한 방법이 무선 AP의 위치와 IP 주소 정보 그리고 GPS 기기를 이용하는 것입니다. Firefox 3.4에서는 WiFi 네트웍 및 IP 주소를 이용하여 정보를 얻어내게 되지만 정확도에서는 차이가 많이 납니다.

또한, 아직까지는 이러한 정보를 이용해서 위치 정보를 제공해 주는 회사가 몇 군데 없습니다. 데이터의 크기가 매우 크고 복잡한 저장 단계를 거쳐야 하기 때문입니다. WiFi AP 정보가 없다면 IP 주소를 이용하기도 하는데 IP 주소를 위치 정보로 변환해 주는 역 데이터베이스를 이용합니다. 예를 들어 제가 토론토에 있다면 WiFi를 이용한 위치는 150m의 정확성을 보이지만 IP 주소의 경우 25km 이상 차이가 납니다.

개인 정보 보호
개인 정보를 보호하는 것은 Mozilla의 중요한 사명 중에 하나입니다. 사용자 실명을 수집하는 것이나 위치 정보를 공유하는 것 모두 매우 민감한 문제 입니다. 실제로 유럽 연합에서는 위치 정보를 개인 식별 정보로 취급하고 있습니다. 우리는 사용자가 이러한 정보를 정확하게 제어할 수 있어야 한다고 믿고 있으며 파이어폭스가 위치 정보 공유를 요청하는 웹 사이트의 정보를 제공하고 이에 대한 판단을 할 수 있도록 하고 있습니다. 이들 웹 사이트의 페이지 정보를 이용하면 현재 제공 정보를 거부할 수 있는 기능도 제공합니다.

Firefox는 사용자의 개인 정보를 보호해 줄 뿐만 아니라 W3C의 Geolocation 워킹 그룹이 제안하는 개인 정보 고려 사항 역시 준수하도록 하고 있습니다.

  • 위치 정보 수신자는 위치 정보만을 요청 받아야 한다.
  • 수신자는 위치 정보 요청 시 제공하는 작업에만 이 정보를 이용해야 한다.
  • 수신자는 작업이 완료되면 수신한 위치 정보는 사용자의 별도의 동의가 아니면 저장하지 않고 파기해야 한다.
  • 위치 정보를 저장할 경우 사용자에게 이 정보를 업데이트하거나 삭제할 수 있는 권한을 주어야 한다.
  • 수신자는 사용자의 동의 없이 위치 정보를 재송신해서는 안되며, 만약 동의를 얻어 재송신할 경우에는 HTTPS 암호 통신을 사용하도록 한다.
  • 수신자는 명백하고 양심적으로 정보를 수집하고 이용해야 하며 정보 수집의 목적과 데이터 저장 기간, 데이터 보안 방법, 재공유 사유 및 방법 및 사용자의 갱신 및 삭제 방법 등을 명시해야 한다. 이러한 가이드라인은 사용자가 쉽게 인지할 수 있도록 해야 한다.\

이러한 자발적인 준수 규약이 있지만 사용자들이 믿을 만한 웹 사이트를 잘 판단하여 개인 정보를 제공하는 것이 더 중요하다고 생각 합니다. 따라서 웹 사이트 개발자들이 안심하고 서비스를 이용할 수 있도록 해야 합니다.

호환성 이슈
우리는 W3C에서 Geolocation 표준 초안을 만들었습니다. 약간의 변경은 있겠지만 하위 호환성을 유지하는 그룹의 활동을 지원하고 있습니다. 여러분이 알고 있어야 할 이슈 중에 하나는 enableHighAccuracy라는 기능인데 useLowPower라는 이름을 쓰기도 합니다. Firefox 3.5에서는 enableHighAccuracy를 호환성 이유로 사용하고 있으며 여러 버전의 호환성 문제 때문에 이름이 변경되지 않을 것 같습니다.

맺으면서
Firefox 3.5는 Geolocation 서비스를 제공하는 첫번째 단계에 접어들었습니다. 여러 단체들이 비슷한 종류의 다양한 표준 작업을 시작하고 있습니다. 이 첫 단계의 서비스를 통해 사용자들이 트위터나 페이스북에 사진을 올리고 주변의 사람들을 만나고 정보를 공유하고 하는 것에 이어 비슷한 지역의 정보를 이용함으로서 웹 서비스의 큰 역할을 하리라고 기대해 봅니다.

콘텐츠 기반 자동 이미지 크기 조정

Channy Yun

0

이 예제는 Stephane Roucheray가 작성했으며 그는 PIMS 팀의 일원입니다. 본 글은 Pims World Labs 블로그에 소개되었습니다.

Firefox 자동 이미지 크기 변경 데모를 보면 콘텐츠 기반 자동 이미지 크기 변경(Content Aware Image Resizing)이 콘텐츠 너비에 따라 자동으로 이미지 크기가 변하게 한다는 것을 알 수 있습니다. 비선형적 이미지 크기변경이라는 이러한 아이디어 Shai Avidan와 Ariel Shamir에 의해 2007년에 기고된 “Seam Carving for Content-Aware Image Resizing이라는 논문에서 따온 것입니다.

몇 가지 오픈 소스 기반 구현이 진행 되었고 Gimp 플러그인 및 C++로 만든 CAIR라는 독립 프로그램 등이 있습니다.

하지만 Canvas와 JavaScript 덕분에 우리는 플러그인 없이도 브라우저 내에서 이것을 구현 할 수 있게 되었습니다. Firefox 1.5 이후로 Canvas API를 이용해 비트맵을 다룰 수 있게 되었고 3.5 버전에서는 매우 빠른 자바스크립트 엔진을 탑재함과 동시에 createImageData라는 메소드를 가짐으로서 더 강력한 기반을 가질 수 있게 되었습니다.

데모를 보시면 멋진 알고리듬이 잘 구현되었습니다. 이미지 너비가 높이의 변경 없이도 자유롭게 감소합니다. 이를 통해 이미지 크기를 바꾸거나 수직선 크기에 맞게 조정할 수 있습니다. 이 알고리듬은 네가지 단계를 거치게 되는데 첫단계는 크기를 바꾸는 것입니다. 이미지를 Canvas로 읽어와서 첫 단계를 시작 합니다.

  1. 회색조 이미지는 계산이 필요함.
  2. 이미지 가장자리(Sobel convolution 방법 이용)와 에너지 매트릭스 또한 계산이 필요함.
  3. 에너지 솔기(Seam) 감지. (에너지 매트릭스의 아래에서 위로의 1 픽셀 수직 라인)
  4. 이 때 감지된 솔기의 픽셀을 원래 이미지에서 없애고 결과를 첫 단계로 다시 옮김.

각각의 이전 단계에서는 모든 데이터 매트릭스를 저장하게 됩니다. 이러한 매트릭스는 이미지 전체가 이나 알고리듬에서 실제 만드는 부분인데 ImageData 객체에 저장하는 데이터는 간단한 배열을 이용하는 것 보다 더 편리합니다. 이는 Canvas의 createImageData를 이용하는 이유입니다. 이 방법의 잇점 중에 하나가 중간 정도의 계산만으로도 필요한 정보를 얻을 수 있다는 것입니다. 이러한 이미지 처리 방식을 웹 브라우저에서 수행할 수 있게 됨에 따라서 다양한 기술적 가능성이 열리게 되었습니다.