Mozilla

Mozilla Firefox

최신의 개방 웹 기술

웹을 만드는 방법을 바꿀 강력하고 새로운 혁신

각 부분 위에 마우스 포인터를 놓으면 예시가 나옵니다.

개발 도구

웹이 작동되는 방식이 궁금했던 적이 있지 않나요? 디자인과 코드를 연결하고 싶나요? Firefox 개발자 도구를 사용하면 웹페이지의 안보이는 부분을 살펴볼 수 있고 디버깅이나 최적화 다양한 실험을 할 수 있습니다.

웹 콘솔 스크린 샷

웹 콘솔

웹페이지 안에서 발생하는 이벤트를 볼 수 있습니다. 웹콘솔을 사용하면 자바스크립트 코드의 로그 정보나 자바스크립트와 CSS 오류, 네트워크 상태를 볼 수 있습니다. 찾고자 하는 이벤트를 검색하고 필터링 할 수 있습니다. 여기에 추가해서 자바스크립트를 사용해서 페이지를 움직이고 탐색할 수 있습니다.

자세히 보기
페이지 검사 스크린샷

페이지 검사

어떤 웹페이지에서든지 살펴보고자 하는 페이지 요소를 눈으로 보면서 선택하고 직접 들여다 보세요. 페이지의 어느 부분에서든지 간단하게 오른쪽 클릭을 하고 "요소 검사"를 선택하세요. 웹개발자 메뉴에서 검사를 선택하거나 컨트롤 + 쉬프트 + I(맥에서는 커멘드 + 쉬프트 + I) 키보드 단축키를 누르세요(이 페이지에서 바로 사용해 보세요!).

자세히 보기
스크래치패드 스크린샷

스크래치패드

브라우저는 자바스크립트를 실험해보기에 가장 좋은 장소입니다. 스크래치패드를 사용해서 웹페이지의 콘텐츠와 직접 상호작용하는 코드를 작성할 수 있습니다. 스크래치패드에서 생각을 실험해보고 웹사이트 개발 도구에 복사해 넣을 수 있습니다. 웹페이지를 고쳐보는 일도 재미 있습니다.

자세히 보기

Firebug

모든 웹 개발자들이 의존하는 Firebug 부가기능은 최신 버전의 Firefox와 호환됩니다.

자세히 보기
각 부분 위에 마우스 포인터를 놓으면 예시가 나옵니다.

혁신의 HTML5

Firefox는 언제나 HTML5를 훌륭히 지원해왔으며 기록상 마지막 버전 빌드는 보다 진보된 기능을 가지고 있습니다.

서식

Mozilla에게,

나는 (이)라고 해. 내 생각에 이 데모는 .

그나저나 너에게 할 말이 있는데 그건 네가 을(를) 해야 한다는 거야.

제출되었습니다! 감사합니다.

Firefox는 HTML5 형식을 충족하며 새로운 입력 형식, 데이터 목록 지원, autofucus나 placeholder와 같은 새 입력 속성, 분리된 형식, 형식 옵션, 유효성 기법, 강제 유효성, 그리고 이를 한데 묶을 새 CSS 선택기를 지원합니다. 보다 자세한 정보를 원하시면, 저희의 Hacks site를 방문하십시오.

닫기 자세히 보기

파서

x = - b ± b 2 - 4 a c 2 a

Firefox는 인라인 SVG와 같은 새로운 가능성을 가져다주는 HTML5 파서를 지원하며파싱 알고리즘을 프로세서에서 실행하는 성능도 개선되었습니다. 이는 Firefox의 파싱 알고리즘을 표준에 가깝게 해주고 일관성있는 파싱 브라우저의 토대를 낳습니다.

닫기 자세히 보기

WebM

Firefox는 사용료를 지불할 필요가 없는 새로운 웹용 비디오 포맷인 WebM을 지원합니다. 유튜브의 HTML5 베타에 참여하시면 작동하며 새로운 iframe 엠베딩 API를 사용할 경우 엠베딩된 유튜브 비디오에서도 작동합니다. 베타에 참여하시고 이 글의 아래에 있는 예제가 작동하는 것을 보십시오.

닫기 자세히 보기

동영상 버퍼 API

HTML5의 동영상을 위한 버퍼 속성 지원으로 동영상이 포함된 웹 페이지는 다운로드 비율과 스트림의 현재 위치를 통한 근사적인 수치 대신 정확한 버퍼링 정도를 제공할 수 있습니다.

자세히 보기

동영상 “preloadd” 지원

동영상의 “autobuffer" 속성이 새로운 “preload” 속성으로 바뀝니다. 이 속성은 개발자들이 Firefox 3.5에 포함된 binary on/off system과 달리 페이지에 포함된 동영상의 pre-buffered를 조절하게 해줍니다.

자세히 보기
각 부분 위에 마우스 포인터를 놓으면 예시가 나옵니다.

아름다움의 CSS

Firefox는 새로운 CSS 속성을 구현하고 private CSS namespace에서 최종적인 namespace으로 바꾸었습니다.

CSS 트랜지션

❖✪

Firefox는 CSS 변환에 대한 지원을 포함하고 있습니다. 세부 사항이 여전히 초기이므로 -moz로 시작하는 확장 또한 아직 존재합니다.

닫기 자세히 보기

CSS 애니메이션

Firefox 5는 CSS 애니메이션을 지원합니다. 이 방법을 이용해서 CSS 키프레임을 지정해서 복잡한 애니메이션을 만들 수 있습니다.

닫기 자세히 보기

-moz-calc()

Firefox는 초기 버전의 calc를 -moz-calc와 같은 특별한 형태로 지원합니다. 이는 개발자들이 CSS 페이지 배치를 훨씬 간단하게 만들 수 있는 length를 어디에서나 사용해(더이상 빈칸을 위해 divs를 사용하지 않아도 됩니다!) 간단한 표현을 사용할 수 있게 해줍니다.

자세히 보기

-moz-any()

Firefox는 -moz-any() 선택 묶기라는 극단적으로 유용한 새 CSS 확장을 추가했습니다. 이는 한 부분에 대한 전체 선택자를 반복하는 것에서 연결자를 사용하는 대안을 제공합니다.

자세히 보기

-moz-element()

–moz-element는 배경-그림 속성에 대한 확장으로 아무 요소나 배경에 대한 다른 요소로 사용하게 해줍니다.

자세히 보기

-moz-placeholder

:-moz-placeholder는 HTML5 형식의 placeholder인 배경 글자의 속성을 바꿉니다. 웹 개발자는 placeholder 글자의 색깔이나 다른 속성을 바꿀 수 있습니다.

자세히 보기

Border Radius

border-radius 속성이 이전의 -moz-border-radius를 대체하여 이제 지원합니다.

자세히 보기

box-shadow

box-shadow는 -moz-box-shadow에서 대체되었습니다.

자세히 보기

CSS 규격 일치

우리는 픽셀 크기의 핸들링을 Internet Explorer, Safari 그리고 Chrome에 맞춰 1 인치는 언제가 96픽셀과 같습니다.

자세히 보기

물리적 CSS 규격 지원

Firefox는 물리적 크기를 사용하기를 원할 경우를 위해 mozmm이라 불리는 새 CS5 규격을 소개합니다.

자세히 보기

device-pixel-ratio

-moz-device-pixel-ratio 미디어 쿼리는 CSS 픽셀당 장치 픽셀의 수를 제공합니다.

자세히 보기

-moz-tab-size

-moz-tab-size 속성은 글자를 렌더링할 시 탭 문자 (U+0009)의 렌더링 중 빈칸 문자의 너비를 지정하게 해줍니다.

자세히 보기

-moz-focusring

Firefox의 CSS 가상-선택자인 -moz-focusring은 한 요소가 focus되었을 경우 그리고 focus ring이 주위에 그려질 시 어떻게 보일지를 지정하게 해 줍니다. focus ring이 그려지거나 그렇지 않을 경우에 대한 규칙은 운영체제마다 다르나 이것은 기반 규칙을 유지 보수하는 동안 form control의 모양새를 제어하게 해 줍니다.

자세히 보기

크기 조절이 가능한 글자 영역

글자 영역은 기본적으로 크기 조절이 가능합니다. 새 CS5 크기 조절 속성을 통해 이를 해제할 수 있습니다.

자세히 보기
각 부분 위에 마우스 포인터를 놓으면 예시가 나옵니다.

현대적 API

Firefox는 새 표준 API를 충족함으로서 여러분의 브라우저 안에서 일어나는 일을 알아내고 (온라인과 오프라인) 웹 페이지에 대화식을 추가하는 여러 방법을 제공합니다.

window.matchMedia

Firefox는 CSS3 media queries와 같은 기능을 하는 자바스크립트 기능을 지원합니다. 이 기능은 웹페이지가 출력되는 미디어/기기에 반응하도록 해줍니다. 화면 크기나 해상도, 가로세로모드 등의 다양한 미디어 정보를 지원합니다.

자세히 보기

WebSockets

Firefox는 서버와 쌍방향 커뮤니케이션 할 수 있는 방법을 지원합니다. WebSockets은 실시간 메시징 어플리케이션이나 HTML5 웹 게임 등을 만들 수 있게 해 줍니다.

자세히 보기

Server Sent Events

Server Sent Events는 서버가 브라우저로 메시지를 보낼 수 있게 합니다. 이렇게 보내진 메시지는 웹페이지에서 이벤트로 감지할 수 있습니다.

자세히 보기

ECMAScript 5

ECMAScript 5는 JavaScript 언어의 새 버전으로 새 기능과 Strict Mode나 JSON API와 같은 새 API를 포함합니다.

자세히 보기

WebGL

Canvas 3D. WebGL은 OpenGL ES 2.0을 거의 따르는 API를 소개함으로서 3D 그래픽을 웹에 제공하고 HTML canvas 요소에 쓰이게 합니다.

닫기 자세히 보기

.click() 지원을 통한 파일 업로드 제어

Firefox는 숨겨진 파일 제어의 .click()을 호출해서 파일 업로드 위젯 기반을 가져올 수 있으며 이는 (볼품 없는) 파일 업로드 제어를 여러분만의 것으로 확장할 수 있다는 뜻입니다. 만약 여기에 새 File APIprogress event를 조합시키면 매우 훌륭한 파일 업로드 경험 기법이 될 것입니다.

자세히 보기

File API에 포함된 .slice 지원

Firefox 는 Blob API와 딸려오는 .slice API를 지원합니다. 이는 전체 파일을 메모리로 올리지 않고 JavaScript를 사용해 큰 파일 객체의 부분만 처리하고 싶은 경우 도움이 됩니다. 신뢰할 수 있는 대용량 파일 업로드를 원하는 경우에는 서버와 JavaScript 코드를 사용해 큰 파일을 여러 부분으로 나누어 전체 덩어리를 업로드하며 이 과정에서 재-재시도 실패 부분이나 심지어는 동시에 여러 부분을 전송하는 것이 포함됩니다.

자세히 보기

File API URL 지원

Firefox는 File API의 .url 속성을 지원하며 이는 File API의 객체가 그림, 동영상, HTML 또는 다른 URL 제공 객체에 사용될 수 있음을 뜻합니다.

자세히 보기

터치와 멀티터치 event 지원

Firefox는 DOM에 의해 확대된 터치와 멀티-터치 event를 모두 지원합니다. 이 기능에 대한 지원은 Windows 7 시스템에서 가능합니다.

자세히 보기

클릭-터치 탐지

Firefox는 마우스나 손가락이 event를 생성할 경우 mozInputSource 속성을 통해 알려줍니다. 이는 터치와 멀티터치 event에서 유용하며 터치와 마우스 입력을 다르게 다루는 어플리케이션의 제작을 가능하게 해줍니다.

자세히 보기

IndexedDB

Firefox는 초기 버전의 IndexedDB를 지원합니다. 로컬 저장소에 대한 이 새로운 표준은 아직 변화를 겪고 있으며 안정될 때까지 private-prefix를 사용할 것입니다. IndexedDB 입문은 IndexedDB API 사용에 대한 개요를 제공합니다.

자세히 보기

FormData

Firefox는 새 FormData 객체를 지원하며 이는 HTML form에 영향을 쉽게 미칠 수 있도록 해줍니다. 또한 이는 File API를 통해 파일을 form accessed와 같이 쉽게 업로드하는 식의 일부 새로운 기능을 가능하게 해줍니다.

자세히 보기

Canvas를 파일 객체로 처리

Firefox는 Canvas를 업로드와 같은 목적으로 파일 객체로 접근하게 해줄 수 있습니다. mozGetAsFile() 메소드를 canvas에 사용하면 그림 파일을 반환하게 됩니다.

자세히 보기

음성 샘플링과 생성 API

Firefox Audio Data API는 개발자가 음성과 동영상 요소에서 데이터를 읽고, 편집하고, 쓰는 것을 가능하게 합니다.

자세히 보기

향상된 SVG

Firefox는 보다 창의적인 방법으로 라인 그래픽을 할 수 있도록 SVG에 대한 지원을 확장하였습니다.

SVG 애니메이션과 SMIL

이제 Firefox에서도 SVG를 SMIL을 사용하여 애니메이션할 수 있습니다.

자세히 보기

강화된 보안

Firefox는 수많은 새 보안 강화를 지원하여 웹 개발자를 돕고 사용자를 보호합니다.

컨텐츠 보안 정책

컨텐츠 보안 정책(CSP: Content Security Policy)은 개발자가 여러 다른 종류의 공격을 방지에는 데 도움을 주는 도구의 모음입니다. 구체적으로, 이는 cross-site scripting 공격과 click-jacking, 그리고 패킷 스니핑 공격을 누그러뜨리는 도구를 제공합니다. 만일 규칙을 위반하게 되면 Firefox는 웹 사이트에 위반사항에 대한 정보를 보내 다른 브라우저의 보안도 향상되도록 돕습니다.

자세히 보기

X-Frame-Options

Firefox는 X-Frame-Options 헤더를 지원하여 clickjacking으로부터 보호합니다. 이 응답 헤더는 다른 브라우저에서도 잘 지원됩니다.

자세히 보기

HSTS (강제화된 HTTPS)

Firefox는 HTTP Strict Transport Security (HSTS) 헤더를 지원합니다. 이 헤더는 반드시, 절대로 사이트를 암호화되지 않은 HTTP로 연결하지 않도록 브라우저에게 알리는데 사용됩니다.

자세히 보기

CORS 개선

Firefox에서 CORS 수행의 버그를 고쳤습니다.

자세히 보기