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

View the Demo in Firefox 3.5

그림자와 둥근 테두리

먼저, 툴바에 스타일을 적용해 봅시다.
-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)에서 폰트들을 다운로드 받을 수 있습니다.

이 글은 하동욱님께서 번역해 주셨습니다. 원본 : 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 2와 CSS 3 selector 명세서는 당신이 사용가능한 것들이 무엇인지 공부하는데 좋은 자료입니다. 이밖에도 다음과 같은 좋은 참고자료가 있습니다:

• CSS 3 Selectors Explained
• XML.com: CSS 3 Selectors
• jQuery Selector Reference (노트: custom, non-standard, selectors도 다루고 있음.)

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를 우아하게 사용하는 몇 개의 구현 내용을 소개하면 다음과 같습니다:

• jQuery
• Prototype
• Dojo
• MooTools

기존의 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을 간단하고, 빠르게 선택하는 방식을 제공합니다. 비슷한 기능을 하는 자바스크립트 라이브러리를 사용하는 사람들에게 이미 이롭게 쓰이고 있습니다. 그러니 여러분도 편안한 마음으로 시도해 보시기 바랍니다.

이 글은 하동욱님께서 번역해 주셨습니다. 원본: 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

• MDC & Geolocation
• GeoNames
• OpenStreetMap
• OpenLayers

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

이 글은 하동욱님께서 번역해 주셨습니다. 원본 위치: 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;

 

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

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

 

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

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

 

원한다면, 콤마를 통해 여러개의 그림자를 정의함으로서 다수의 그림자 효과를 얻을 수 있습니다.(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;

 

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

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

 

보시다시피, 별고생없이 노란색 배경이 반쯤 투명한 그림자를 통해 보이도록 했습니다. 이 기능은 특히 배경이미지와 결합되어 유용하게 쓰일 수 있습니다. 박스 그림자 뒤에 비쳐진 배경이미지를 볼 수 있으니까요.
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를 볼 수 있게 될 것입니다.
웹 개발자로서 당신은 기존 브라우저 사용자들을 외면하지 않으면서도 최신 브라우저 사용자들에게 앞서가는 경험을 안겨줄 수 있는 것입니다.

더 읽을거리
문서

• https://developer.mozilla.org/en/CSS/-moz-box-shadow
• http://dev.w3.org/csswg/css3-background/#the-box-shadow

예제

• http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
• http://www.css3.info/preview/box-shadow/
• http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html