주요 문서
-
굉장히 빠른 CSS 엔진, Quantum CSS(aka Stylo) 살펴보기
이 글은 Lin Clark이 쓴 Inside a super fast CSS engine: Quantum CSS (aka Stylo)의 한국어 번역본입니다. 여러분께선 아마 프로젝트 Quantum을 한번쯤은 들어보셨을겁니다. Firefox를 더욱 빠르게 만들기 위해 브라우저 내부를 개선하고 있는 프로젝트이죠. 저희는 실험중인 브라우저, Servo로부터 부분적으로 Firefox에 반영하고 있으며 CSS 엔진에 엄청난 개선을 진행 중에 있습니다. 이 프로젝트는 하늘을 날고 있는 비행기에서 제트 […]
-
CSS :visited에 대한 프라이버시 정책변화
모질라에서는 프라이버시를 위해 CSS :visited에 대한 정책을 변경하고자 한다.
-
쉬운 예제로 보는 웹 폰트와 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픽셀 반경으로 […]
-
UI 레이아웃을 위한 CSS 그리드
CSS 그리드는 긴 텍스트 구절을 포함하는 컨텐츠 기반 웹사이트를 위한 훌륭한 레이아웃 도구이며, 다양한 전통적인 UI 레이아웃에도 굉장한 가치가 있습니다. CSS 그리드를 사용해 사용자 인터렉션이나 변경되는 조건에 반응하고 적응하며, 스크롤이 항상 제대로 동작하도록 어플리케이션의 레이아웃을 향상시키는 방법을 보여드리겠습니다. CSS 그리드는 웹사이트 레이아웃을 구축합니다. CSS 그리드는 웹디자이너가 수년동안 사용해왔던 끝없는 float 꼼수 대신 작은 비트의 지원 […]
-
웹IDE, 저장소 검사기, jQuery 이벤트, iframe 스위처 + 기타 – Firefox 개발자 도구 에피소드 34
이 글은 Heather Arthur와 Robert Nyman [Editor]이 쓴 WebIDE, Storage inspector, jQuery events, iframe switcher + more – Firefox Developer Tools Episode 34의 한국어 번역본입니다. Firefox 개발자 도구의 새로운 기능들이 이제 막 Aurora 채널에 반영됐습니다. 지금 당장 새로운 기능들을 써보고 싶다면 Aurora 버전을 써보세요. 이 새로운 기능들은 11월에 릴리즈되는 Firefox 34 버전에 포함될 것입니다. Firefox […]
-
Firefox 개발자 도구에서 Sass와 Less 실시간 편집하기
Sass 와 Less 는 CSS로 컴파일되는 표현식(Expressive) 언어입니다. 여러분이 Sass나 Less를 가지고 CSS 파일을 만들고 계시다면, CSS를 별도로 만들지 않고 소스코드만 디버깅하고 싶을 때가 있었을 것입니다. 이제는 Firefox 개발자 도구에 있는 소스맵을 사용해 디버깅이 가능해졌습니다! Firefox 개발자 도구는 소스맵을 사용하여 원 소스코드에서의 줄 번호를 보여주고 스타일 에디터를 통해 여러분이 편집을 가능하게 만들어 줍니다. 아래 간단한 […]
-
Firefox Nightly에서 CSS 변수 사용하기
이 글은 Chris Heilmann의 CSS Variables in Firefox Nightly의 한국어 번역본입니다. Cameron McCormack는 Firefox Nightly (버전 29)에서 CSS 변수를 지원한다고 알렸습니다. 여기 짧은 영상에서 바로 확인해 보실 수 있습니다: 여러분은 접두사 var-를 가지고 변수를 지정할 수 있으며 var() 명령으로 그 변수를 실행할 수 있습니다. 예를 들어: :root { var-companyblue: #369; var-lighterblue: powderblue; } h1 […]
-
CSS3의 유동적인 박스 모듈을 활용한 어플리케이션 레이아웃
이 글은 Simon Speich와 Robert Nyman의 Application Layout with CSS3 Flexible Box Module의 한국어 번역본입니다. CSS3만의 유동적인 박스 레이아웃 모듈 덕분에 유동적인 어플리케이션 레이아웃을 제작하는 일이 매우 쉬워졌습니다. 이번 글에서는 화면 전체를 차지하면서 브라우저 창에 따라 유동적으로 사이즈가 변하며 추가적으로 드래그로 구역을 나누는 것이 가능한 간단한 어플리케이션 레이아웃을 만들어 볼 것입니다. 기존의 <div> 엘리먼트 […]
-
CSS의 길이(Length)에 대한 설명
이 글은 CSS Length Explained에 대한 번역 및 편집본입니다. 여러분은 CSS를 사용하여 웹 사이트에 스타일을 지정할 때, 화면상의 인치(inch)가 실제 인치가 아니라는 것과, 픽셀(pixel)이 항상 실제 픽셀과 같지는 않다는 점을 알게 되셨을 겁니다. CSS 픽셀에서 빛의 속도가 어떻게 표현되는지 알고 계십니까? 이번 글에서는 C.G.P. Grey[1]에 있는 스타일의 단위 이름과 같은 이름인 몇몇 물리적 단위에 대한 […]
-
파이어폭스 3.6의 css 배경
파이어폭스 3.6은 css 배경에 대해 더 많은 것을 지원합니다. 그레디언트(http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/)와, 배경이미지 사이즈background size, 그리고 여러 개의 배경 이미지multiple backgrounds를 쓸 수 있습니다. 배경 이미지 크기 조절 파이어폭스 3.6에서는 -moz-background-size를 이용하여 특정한 길이를 주거나, 엘레먼트의 사이즈의 비율에 맞춰 배경 이미지를 조절할 수 있습니다. -moz-background-size: <bg-size>[, <bg-size>]* 백분율. 예를 들면 백분율을 이용하여 사이즈 조절의 효과를 볼 수 […]
