주요 문서
-
UI 레이아웃을 위한 CSS 그리드
CSS 그리드는 긴 텍스트 구절을 포함하는 컨텐츠 기반 웹사이트를 위한 훌륭한 레이아웃 도구이며, 다양한 전통적인 UI 레이아웃에도 굉장한 가치가 있습니다. CSS 그리드를 사용해 사용자 인터렉션이나 변경되는 조건에 반응하고 적응하며, 스크롤이 항상 제대로 동작하도록 어플리케이션의 레이아웃을 향상시키는 방법을 보여드리겠습니다. CSS 그리드는 웹사이트 레이아웃을 구축합니다. CSS 그리드는 웹디자이너가 수년동안 사용해왔던 끝없는 float 꼼수 대신 작은 비트의 지원 […]
-
굉장히 빠른 CSS 엔진, Quantum CSS(aka Stylo) 살펴보기
이 글은 Lin Clark이 쓴 Inside a super fast CSS engine: Quantum CSS (aka Stylo)의 한국어 번역본입니다. 여러분께선 아마 프로젝트 Quantum을 한번쯤은 들어보셨을겁니다. Firefox를 더욱 빠르게 만들기 위해 브라우저 내부를 개선하고 있는 프로젝트이죠. 저희는 실험중인 브라우저, Servo로부터 부분적으로 Firefox에 반영하고 있으며 CSS 엔진에 엄청난 개선을 진행 중에 있습니다. 이 프로젝트는 하늘을 날고 있는 비행기에서 제트 […]
-
웹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>]* 백분율. 예를 들면 백분율을 이용하여 사이즈 조절의 효과를 볼 수 […]
-
Firefox 4: CSS3 calc()
이 글은 CSS3의 calc()를 기술한 것입니다. 이 기능은 아직 Firefox의 어떤 소스 트리에도 추가되지 않았지만, 구현을 위한 작업이 진행중입니다. Firefox는 CSS의 cals() 함수를 지원할 것인데 이 기능을 사용하면 산술 식을 통해 길이 값을 계산할 수 있습니다. 이 말은 div들의 크기나 마진 값, 경계(border)의 폭이나 그 외 여러가지의 크기를 정의할 때 산술 식을 사용할 수 있다는 […]
-
-moz-any() 선택자(selector)를 이용한 그룹핑
이 글은 데이비드 바론(David Baron)의 블로그에 있던 포스팅을 가져온 것이다. 이 기능은 모질라 센트럴 (trunk) 에 적용됐고 아직 파이어폭스 나이틀리 빌드(Nightly Build)에서만 쓸 수 있다. 지난밤 나는 :-moz-any() 선택자 그룹핑(grouping) 지원 기능을 넣었다. 이것은 결합된 선택자(combinators)가 전체적으로 비슷한데 일부분만 다르게 사용되는 경우 일일이 반복하는 대신 짧게 줄여서 쓰게 해준다. 예를 들어 이 기능으로 브라우저(user-agent) 스타일 […]
