Louis HarboeiOS 4 아이콘을 CSS만으로 만들었습니다. 그의 작품을 볼 수 있는 것은 물론, 아이콘을 그리기 위해 사용한 높은 수준의 아이디어를 들어볼 수도 있습니다.
연락처 아이콘에서 사람의 실루엣을 그리기 위해 5개의 도형을 사용했습니다. 머리는 둥근 모서리를 가진 사각형으로, 목은 사각형으로, 몸은 약간 찌그러뜨린 반원으로 표현했습니다. 어깨에서 목으로 이어지는 선을 표현하기 위해 원 두개를 그 위에 겹쳤습니다.
날씨 아이콘에는 해의 뒤편에서 나오는 여러 갈래의 햇살이 있습니다. 햇살은 양 끝단으로 갈수록 투명해지는 그래디언트 배경색이 적용된 긴 사각형으로 표현했습니다. 사각형의 각기 다른 각을 표현하기 위해 -webkit-transform:rotate를 사용했습니다. 같은 효과를 iTunes 아이콘에도 적용했습니다.
iDisk 아이콘의 구름 아이콘을 그리기 위해 둥근 모서리 사각형 위에 두 개의 원을 겹쳐 표현했습니다. 큰 원은 사각형 바로 앞에서 멈추는 그래디언트 배경색을 가지고 있습니다.
달력을 표현하기 위한 전체 소스는 다음과 같습니다.
[code:css]
.calendar {
        background: #9B2424;
}
.calendar .header {
        -webkit-border-top-left-radius: 30px;
        -webkit-border-top-right-radius: 30px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEC4C4), to(#521B1C), color-stop(.92,#da3434),color-stop(.1,#ef9fa5));
        height: 50px;
        width: 176px;
        -webkit-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.4);
}

.calendar p.weekday {
        color: #fff;
        font-weight: bold;
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
        width: 176px;
        line-height: 50px;
        font-size: 25px;
        text-align: center;
}

.calendar p.daynumber {
        color: #000;
        font-weight: bold;
        text-shadow: 0px 1px 0px #fff;
        width: 176px;
        line-height: 126px;
        font-size: 130px;
        text-align: center;
}

.calendar .paper {
        -webkit-border-bottom-left-radius: 30px;
        -webkit-border-bottom-right-radius: 30px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#EDEDED), color-stop(.05,#BFBFBF),color-stop(.2,#E3E3E3));
        height: 126px;
        width: 176px;
}
멋지죠? 이 방법의 장점은 크기를 자유자재로 조절할 수 있다는 것입니다. 벌써 아이폰 4 사용자들 사이에서는 저해상도 아이콘에 대한 불만이 나타나고 있습니다. 심지어 페이스북 앱이라 해도... 텍스트는 정말 훌륭하지만 아이콘은 투박합니다.

이 외에 또 다른 CSS 그래디언트 예제를 소개할까 합니다. 아이콘, 버튼, 진행상태바 등을 CSS로 표현했습니다.

from Made In CSS; iOS icons and more
Posted by 행복한고니 트랙백 1 : 댓글 1
돋보기 보는 사람

http://www.flickr.com/photos/andercismo/2349098787/


Jack Prosser가 재밌는 CSS 돋보기를 만들었습니다.
주요 컨셉은 CSS의 radius를 사용해서 동그라미 모양의 뷰 영역을 만드는 것입니다. 이 영역은 현재 페이지와 똑같은 컨텐트를 가진 iframe을 포함합니다. CSS3를 사용해서 iframe 내부의 컨텐트를 2배 확대해서, 작은 컨텐트를 읽기 편하게 만들었습니다. 이 돋보기는 간단한 키보드 조합으로 보이고/감추고 축소/확대를 할 수 있습니다. 앞으로는 구글 크롬이나 Firefox 확장기능을 만들 생각입니다. 확장기능은 iframe을 사용하지 않고, 페이지 컨텐트에 캔버스를 사용할 생각입니다. 물론, 페이지 컨텐트가 업데이트되면 캔버스도 업데이트 될 것입니다.
실제 동작을 보세요:


from MagnifyMa : A CSS magnifying glass
Posted by 행복한고니 트랙백 2 : 댓글 1

CSS calc()

2010.06.16 08:40 from [IT] Web Tech

CSS에서 상대적인 크기 계산을 위해 자바스크립트를 사용해본 기억이 있을 것입니다. 예를 들어, '절반(50%)에서 5px 뺀 너비' 등과 같이 말이죠. 하지만, 이젠 그럴 필요가 없게 됐습니다.

Paul Roget씨가 CSS calc()에 대해서 설명해주셨습니다. CSS calc()는 아직 버그가 있는 상태입니다.

다음은 간단한 사용예입니다.
[code:css]
/*
* Two divs aligned, split up by a 1em margin
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}
/*
 * Make sure input field won't overlap parent
 */
input {
  padding:2px;
  border:1px solid black;
  display:block;
  width: -moz-calc(100% - 2 * 3px);
}

/*
 * combine different units!
 */

width: -moz-calc(3px + 50%/3 - 3em + 1rem);
이 덕분에 상당히 많은 자바스크립트를 줄일 수 있게 되었습니다. 하지만, Firefox에서만 가능한 방법이라 실무에 적용하기는 다소 어려울 듯 합니다. ^^;

from CSS calc() in the house
Posted by 행복한고니 트랙백 1 : 댓글 2
Chris Vanrensburg: “최근의 위치 변경 애니메이션의 연장선 상에서, 저는 객체의 크기가 변함에 따라 곡선이 어떻게 적용되는지 보고 싶었습니다. 예상대로 너비와 높이 CSS 스타일 속성에 여러가지 곡선을 적용해보는 것은 꽤 재미있는 효과를 만들어냈습니다.”
웹 2.0 진영에서는 둥근 모서리가 사랑받고 있습니다. 그런데 애니메이션이라니요! 이 애니메이션은 Chris의 최근 실험에서 확인할 수 있습니다. 클릭해서 데모와 부드러운 효과를 살펴보세요.


from Round Corners. Moving.
Posted by 행복한고니 트랙백 1 : 댓글 0

http://www.flickr.com/photos/jonathasrr/4195103621/


초기의 HTML 스펙에는 HTML 요소에 대한 기본 스타일이 주어지지 않았었습니다. 당연히 브라우저 제작사들에게도 이런 가이드가 없었습니다. body는 마진(margin)이나 패딩(padding)값을 가질까요? 색상은요?

여러 브라우저를 다룰 때 사용할 수 있는 방법 초기에는 모든 브라우저에 대해 CSS를 초기화한 후, 그 뒤에 스타일을 작성했습니다. 이 방법에는 에릭 마이어의 초기화YUI 초기화 등이 있습니다.

블라디미르 까레르는 80% 정도의 규칙을 다루는 자신의 미니 초기화를 공개했습니다.
[code:css] html, body, div, form, fieldset, legend, label {  margin: 0;  padding: 0; } table {  border-collapse: collapse;  border-spacing: 0; } th, td {  text-align: left;  vertical-align: top; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
아주 작은 초기화를 제안한 사람들도 있었습니다.
[code:css] * { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0; padding: 0; margin: 0; }
어떤 초기화를 사용하시나요?

from CSS Structural Reset
Posted by 행복한고니 트랙백 1 : 댓글 0

http://www.flickr.com/photos/jasonprini/4104210048/

스티브 사우더스씨가 브라우저의 이상한 동작에 대한 글을 작성했습니다. 성능에 관련된 내용인데, 간략한 내용은 다음과 같습니다.

스키마가 없으면 두 번 다운로드
인터넷 익스플로러 7과 8 버전은 http 프로토콜이 빠져있으면 스타일 시트를 두 번 다운로드 합니다. 가끔 "//stevesouders.com/images/book-84x110.jpg" 과 같이 사용하는 경우는 봤는데, 이 경우는 계속 주의해야 할 것 같습니다.

document.write 스크립트가 다운로드 정지의 원인(파이어폭스)
파이어폭스에서는 docuemnt.write를 사용한 스크립트를 읽어들이면 다른 다운로드를 정지시킵니다. 안타까운 사실이지만, document.write는 이미 만들어졌습니다. 이 문제는 페이지 컨텐트에 document.write를 이용해서 광고를 삽입하려고 할 때 수천억배쯤 더 나빠집니다. 대충 이런 식으로 작성하죠.
[code:js]
document.write('<script src="http://www.adnetwork.com/main.js"><\/script>');
다행히 대부분의 최신 브라우저들은 document.write로 추가된 스크립트까지 병렬로 읽어들입니다. 그러나, 몇 주전 파이어폭스 3.6에서 광고를 삽입할 때 이상한 중단 현상을 발견하고, 추적해보았더니 document.write로 추가된 스크립트가 문제였습니다.
document.write 스크립트 테스트 페이지에서 이 문제점을 보여주고 있습니다. 이 페이지에는 4개의 스크립트가 있는데, 첫번째와 두번째 스크립트는 document.write를 사용해 추가되었습니다. 세번째와 네번째 스크립트는 일반적인 방법(HTML과 SCRIPT SRC)을 사용해서 추가했습니다. 그리고 모든 스크립트는 4초가 걸려야 다운로드 할 수 있도록 했습니다. IE8, 크롬4, 사파리4, 오페라 10.10은 페이지를 전부 다운로드 하는데 ~4초가 걸렸습니다. 모든 스크립트는 document.write까지 포함해서 병렬로 처리되었습니다. 반면 파이어폭스에서는 페이지를 전부 다운로드 하는데 12초가 걸렸습니다(2.0, 3.0, 3.6에서 테스트). 첫번째 document.write 스크립트는 1초부터 4초까지 걸렸고, 두번째 document.write 스크립트에 5초부터 8초까지 걸렸습니다. 그리고 나머지 두 개의 일반적인 스크립트를 9초부터 12초까지 다운로드 했습니다.

media=print 스타일시트
인터넷 익스플로러에서는 media="print"를 사용한 스타일시트가 렌더링을 정지시킵니다.
저는 웹브라우저가 현재 사용중이지 않은 미디어 타입의 스타일시트를 건너뛰지 않고 다운로드한다는 사실에 놀랐습니다. 몇몇 웹 개발자들에게 물어보았지만 아무도 이런 동작에 대한 적당한 이유를 대지 못하더군요. 또한 여러분은 media="print" 타입의 스타일시트라 하더라도 Page Speed나 YSlow의 추천에 따라 문서 HEAD에 스타일시트를 두려고 할 것입니다.

동적인 스타일시트
IE에서는 DHTML과 setTimeout을 사용해서 스타일시트를 읽어들이면 렌더링이 멈추는 것을 방지할 수 있습니다. 몇 주전에 유명한 위젯을 만든 회사와 회의를 했습니다. 위젯이 메인 페이지에 주는 영향을 줄이기 위해 그들이 사용한 기술이 바로 다음과 같이 스타일시트를 동적으로 불러들이는 것이었습니다.
[code:js] var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = '/main.css'; document.getElementsByTagName('head')[0].appendChild(link);
과거에는 다운로드 중단을 피하기 위해 스크립트를 동적으로 로딩하는 것에만 주의를 기울였습니다. 스타일시트를 동적으로 읽어들일 생각은 미처 하지 못했었죠. 스타일시트로 오면 다운로드 중단은 문제가 되지 않습니다. 스타일시트는 다운로드를 멈추게 하지 않습니다(파이어폭스 2.0는 예외). 스타일시트 다운로드에서 걱정스러운 부분은 스타일시트를 모두 다운로드 하기 전까지 렌더링을 멈추는 IE의 특성입니다. 다른 브라우저에서는 스타일이 적용되지 않은 컨텐트가 잠깐 나왔다가 사라지는 현상(Flash Of Unstyled Content, FOUC)이 생길 것입니다.

배경이미지 예측
크롬과 사파리는 스타일시트가 전부 준비되기 전이라도 배경 이미지의 다운로드를 시작합니다. 배경 이미지 스타일이 재정의 되는 경우라면 쓸데없는 다운로드가 늘어나는 셈입니다.
직장 동료인 스티브 램이 이런 동작을 저에게 알려주었는데, 이 얘기를 들었을 때 제가 처음 했던 말은 "완전 낭비잖아!" 였습니다. 개인적으로 프리페칭(prefetching)을 좋아하기는 하지만, 대부분의 프리페칭 기능은 너무 공격적이어서 크게 좋아하지 않습니다. 사용하지 않아도 될 다운로드 리소스를 소모하는 일이 잦기 때문입니다. 이 얘기를 처음 들은 이후에 조금 더 생각해봤습니다. 예측된 배경 이미지의 낭비는 얼마나 자주 일어날까? 검색해봤더니 유명 웹 사이트에서는 재정의된 배경 이미지 스타일이 없더군요. 하나도요. 그런 페이지가 하나도 없다고 말할 수는 없겠지만, 매우 이례적인 경우인 것만은 확실합니다.
다르게 생각하면 이러한 배경 이미지 예측 다운로드는 사용자가 인지하는 페이지 속도와 성능을 개선시킬 것입니다.

from Souders blast off 5 in a row
Posted by 행복한고니 트랙백 1 : 댓글 3

Firescope는 디버깅 패널에 레퍼런스 탭과 컨텍스트 메뉴를 추가하는 새로운 Firebug 확장기능입니다.

기능
  • HTML 엘리먼트, HTML 속성, CSS 속성을 검색할 수 있습니다(조합도 가능합니다). 입력과 동시에 검색하므로, 한 두 글자만 입력해도 원하는 결과를 얻을 수 있습니다. 
  • 검색 결과에는 브라우저 호환성, 표준 준수, 간략한 사용 설명 등을 포함합니다. 더 많은 정보를 원하시는 분들을 위해 SitePoint 레퍼런스 웹 사이트로 연결하는 링크도 제공합니다.
  • 검색 결과에서 마우스 오른쪽 버튼을 클릭하시면 두 가지 기능을 선택할 수 있습니다. 하나는 온라인에서 더 자세한 정보를 찾는 것이고, 다른 하나는 선택한 항목의 예제 코드를 보는 것입니다.
  • 예제 코드는 레퍼런스, HTML, CSS 패널의 옆에 열립니다. 그리고, 해당 항목을 사용하는 방법에 대한 실전 예제를 간략한 설명과 함께 보실 수 있습니다. 예제 코드는 편집할 수 있으며, 복사하기도 편합니다(더블클릭하면 전체선택합니다).
  • HTML 패널에서 엘리먼트 이름, 속성 이름 혹은 속성 값(편집도 가능)에서 오른쪽 버튼을 클릭하면 두가지 옵션 중 하나를 선택할 수 있습니다. 클릭한 항목을 "Look up"으로 살펴보거나 "Show Code Example"로 항목의 코드 예제를 볼 수 있습니다.
  • 마찬가지로 CSS 패널에서도 속성 이름과 값 위에서 오른쪽 마우스 클릭을 할 수 있으며, 옵션도 같습니다.
  • HTML 패널에서 현재 선택한 엘리먼트(보통 군청색 배경으로 강조)의 태그 이름 위에서 마우스 오른쪽 버튼을 클릭하면, 컨텍스트 메뉴에는 "Look up selection(선택영역 살펴보기)"사 나타납니다. 이 메뉴를 클릭하면 해당 엘리먼트에 정의된 모든 속성과 현재 적용된 모든 CSS 속성을 볼 수 있습니다. 이 기능은 "Reference" 탭을 클릭하면 자동으로 실행되어 현재 선택한 엘리먼트의 데이터를 보여줍니다.
  • 검사기를 사용해 다른 엘리먼트를 선택할 때, HTML 패널 옆의 코드 예제(Code Example)을 열면 선택한 엘리먼트에 대한 예제를 자동으로 보여줍니다.
  • 이와 유사하게, DOM 계층(crumbtrail)을 클릭할 때,  코드 예제(Code Exmaple) 패널이 열려있다면 열면 코드 예제를 보여줍니다. 메인 HTML 패널과 같은 컨텍스트 메뉴 항목이 있어 선택한 항목을 살펴보거나 관련한 코드 예제를 볼 수 있습니다.
from FireScope: Add a Web reference to your Firebug
Posted by 행복한고니 트랙백 1 : 댓글 0
Wired의 Michael Calore 씨가 IE 팀이 참석한 "전문가에게 묻습니다" 웹 채팅에 대한 글을 작성하셨습니다.

주요 사항은 이렇습니다.
  • IE8은 CSS 2.1에 대한 완전한 전체 스펙 지원을 목표로 하고 있습니다.
  • IE8에서 가능한 CSS3는 쓰기 모드뿐입니다(세로 쓰기 지원을 위한 것입니다). IE는 이 기능을 5.x 버전때부터 지원해왔으며, 앞으로도 계속 지원할 것입니다.
  • IE8은 CSS의 border-radius을 지원하지 않습니다. 이 속성은 이미지를 사용하지 않고 경계선 모서리를 둥글게 만들 때 사용합니다. Microsoft의 Chris Wilson씨는 border-raduis가 "꽤 높은 순위로 배정되어있다"라고 했지만, IE8이 릴리스 된 후에나 진행될 듯 합니다.
  • IE9에 대한 공식적인 로드맵은 없습니다만, 네이티브 SVG 지원에 대한 가능성이 있습니다.
  • 새로운 자바스크립트 엔진도 나타날 것 같습니다. 사용자들은 이렇게 요구했습니다. "다른 브라우저들처럼 이제는 자바스크립트 컴파일에 대해서 고려해주세요. 사파리는 SquirrelFish를 도입했고 지난 주 SquirrelFish의 반응 V8에 육박하고 있죠. Mozilla는 ScreamingMonkey에 대한 작업을 시작했고요. IE9도 새 자바스크립트 엔진을 가지게 되나요?". 그에 대한 대답은 이렇습니다. "우리는 IE8과 그 이후 버전부터 자바스크립트 성능을 개선하는 일에 매우 집중하고 있습니다. 이 노력에 대한 뛰어난 앞으로의 결과물을 기대하고 있습니다."
SVG가 지원된다면 멋지겠네요. 제발 캔버스 지원이 되면 좋겠습니다. 부탁합니다, 크리스씨. 그 일을 돕기 위해 제가 Ajaxian에 뭐라고 쓰면 될까요? ;)

from What is coming up with IE8 and 9?
Posted by 행복한고니 트랙백 0 : 댓글 0
Nexus에서 글꼴을 관리하는 typeface.js 를 작성했습니다. 이 프로젝트는 예전에 소개한 sIFR과 마찬가지로, 사용자의 시스템에 존재하지 않는 폰트를 보여주고자 할 때 유리합니다. sIFR과 다른 점은 sIFR은 플래시를 사용했지만, typeface.js는 자바스크립트만을 사용해 접근성을 높였다는 것입니다.
마치 방문객의 PC에 글꼴이 설치된 것처럼 사이트에서 보여주고 싶을 때, 이미지를 만들거나 플래시를 사용하는 대신 typeface.js를 사용하시면 HTML과 CSS만으로 원하는 폰트의 그래픽 텍스트를 보여줄 수 있습니다. 아직 진행중이긴하지만, 사이트에서 그래픽 텍스트를 렌더링할 정도의 기능은 충분합니다. 사용법을 알아보겠습니다. typeface.js 라이브러리와 typeface.js 폰트를 읽어들이면, 무난하게 진행됩니다:
[code:js]
<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
 
<div class="myclass typeface-js" style="font-family: Helvetiker">
        Text here in Helvetiker font...
</div>
예제를 보시면, 얼마나 CSS와 잘 연동되는지 보실 수 있습니다.

Canvas나 VML 레거시 지원을 사용한 것은 아주 훌륭합니다. 글자가 선택되었으면 정말 좋았을 것 같습니다.
추가 : 안타깝지만 이 기술은 한글 폰트에서는 사용하기가 어려울 것 같습니다. typeface.js는 글자를 이미지로 만들기 위해서 글꼴 정보를 js 파일로 만드는데, Helvetiker 폰트의 일반체(꾸밈이 전혀 없는) 경우만 해도 64KB 정도의 용량을 차지합니다. 영문 글자수는 대소문자를 모두 합쳐도 52자밖에 안되는데 한글은 자주 쓰이는 글자만 2350자에 달하며, 글자 하나의 모양도 영문보다 복잡해 훨씬 더 많은 데이터가 소모될 것입니다. 아쉽지만 사용하기 어려운 기술인 것 같습니다.

from Typeface.js: A potential replacement for sIFR
Posted by 행복한고니 트랙백 0 : 댓글 1
XHR은 1997년부터 있었습니다. 이제는 CSSHttpRequest라는 것이 나타났습니다. CSS 핵을 이용해서 크로스 도메인 Ajax 요청을 실행하는 것입니다.
JavaScript와 비슷하게, CSS도 XMLHttpRequest에 영향을 주는 동일출처정책(same-origin policy)의 대상이 아니기 때문에 이 동작이 가능합니다. JSONP와 마찬가지로 CSSHttpRequest도 GET 요청을 만들어야 하는 한계가 있습니다. JSONP와는 다르게, 신뢰할 수 없는 써드파티 자바스크립트는 호출된 페이지 컨텍스트에서 실행할 수 없습니다.

요청은 CSSHttpRequest.get(url, callback) 함수를 이용해서 이루어집니다:
[code:js]
CSSHttpRequest.get(
    "http://www.nb.io/hacks/csshttprequest/hello-world/",
    function(response) { alert(response); }
);
데이터는 서버에서 URI 인코딩된 2KB 조각들로 나누어지고, 수정된 about: URI 스키마를 덧붙여 CSS의 @import 규칙에 직렬화되어 입력됩니다. 응답은 디코딩되어 콜백함수에 문자열로서 전달됩니다:
[code:css]
@import url(about:chr:Hello%20World!);
이것이 몇 달 사이에 나타난 두번째 @import 핵이군요.

from CSSHttpRequest: cross-domain Ajax using CSS for transport.
TAG ajax, CSS
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

우리는 간단한 CSS를 통해 크기를 바꾸고, 변형하고, 기울이고, 매트릭스 작업을 할 수 있는 WebKit의 CSS 변형에 대해 얘기한 바 있습니다.

새로운 -moz-transform 덕분에 Mozilla는 진보했고, Keith Schwarz씨는 Firefox에서의 CSS 변형 지원에 대한 글을 작성하셨습니다.
[code:css]
-moz-transform: translate(100px, 200px); /* Move right 100 pixels, down 200 pixels */
-moz-transform: translate(30px); /* Move down and right 30 pixels */
-moz-transform: translate(50%, 50%); /* Move down and right by 50% of the size of the element. */
이 기능은 지정된 오프셋만큼 단순히 엘리먼트를 이동시킵니다. 예를 들어 -moz-transform: translate(100px)가 설정된 텍스트 엘리먼트는 원래의 위치에서 100 픽셀 우측 하단에 나타납니다. 물론, 단순한 변형 이상의 기능들도 있습니다. 예를 들면, 엘리먼트를 지정한 각도의 숫자만큼 회전시키는 회전; 엘리먼트를 각 축의 임의의 선을 기준으로 축소, 확대시키는 스케일; X, Y 축을 따라 기울이는 기울임; 그리고 임의의 매트릭스 변형을 위한 매트릭스 기능 등이 있습니다. 또한 skewx(X축 기울임), skewy(Y축 기울임)과 같이 몇가지 경우에 대해 보다 단순한 문법을 사용할 수 있는 단순한 버전도 있습니다.

CSS변형을 위해 개발자들이 사용한 것이 무엇인지를 보는 것도 재밌을 것입니다. 기능의 대부분들은 플러그인에서 구현될 예정이었지만, 지금은 CSS와 JavaScript에 직접 통합되어 웹 개발자들이 현재의 페이지들을 보다 생생하게 만드는 것에 도움을 줄 것입니다. 우리는 또한 이제 두 개의 구현체가 있게 된 이 속성의 표준화가 빨리 이루어지기를 기대하고 있습니다.

from CSS Transforms: First WebKit, now Gecko too!
Posted by 행복한고니 트랙백 2 : 댓글 0
iPhone 응용프로그램들은 많은 주의와 이해를 필요로 합니다. 수많은 iPhone 응용프로그램 개발자들에게 이러한 작은 응용프로그램들은 iPhone 플랫폼에서의 개발을 값을 매길 수 없는 어마어마한 캐시 카우가 될 수 있습니다. 하지만 iPhone이 Safari를 구동시킨다는 것을 생각해보면, Safari에서 사용할 수 있게된 새로운 WebKit 기능의 사용에 더 많이 열광하지 않는다는 것이 놀랍습니다.

jQuery UI팀의 수석개발자(lead developer)인 Paul Bakaus씨는 Safari가 웹 개발자들에게 제공할 수 있는 가능성에 대해 찾기 시작했습니다:
저는 제가 Safari에서 시도했던 것들에 만족할 수 없어서, 최근 iPhone SDK 문서와 실제 CSS 변환 스펙을 깊이 연구하기 시작했습니다.

WebKit iPhone에서 동작하는 멋진 기능들에 대해 처음 읽었을 때는 조금 회의적이었습니다. 문서가 거의 없어서 다른 어떤 개발자에 의해 구현된 적도 없고, 데모도, 테스트도 없었습니다. 시간많은 학생 몇 명이 바로 뛰어들어야 하는 것 아냐? 라고 생각했었습니다.
iPhone 기능에 대한 정보를 찾는 Paul씨의 방법은 조금 부족했었던 것 같습니다. 그래서 Paul씨는 iPhone 시뮬레이터를 이용해  내장된 Webkit 기능들 특히 2D CSS 변환을 해킹하기 시작했습니다.
멋진 녀석이 있습니다: perspective 기능은 다른 기본 기능들이 어떻게 동작하는지 정의하는 것 같습니다:

실제 예제를 볼까요: 다음 세 함수들을 보세요:
  • rotateX - 엘리먼트를 X축 상에서 회전
  • rotateY - 엘리먼트를 Y축 상에서 회전
  • rotateZ - 엘리먼트를 Z축 상에서 회전(기본값, "rotate"와 같음)
이 함수들을 사용해보세요 - 세가지 모두 여러분에게 평면, 2D 애니메이션을 제공해줍니다. 사실은 이들이 3D 매트릭스를 사용한 함수들이이지만 말이죠.  하지만, -webkit-perspective 속성을 200으로 변경하고 실행해보세요. 지금은 가상 깊이가 만들어지고 이 세가지 함수들은 여러분에게 믿을 수 없는 결과를 안겨줄 것입니다.
Paul씨는 끝으로 iPhone 브라우저에서 다룰 수 있는 전형적인 iPhone 응용프로그램과 유사한 아주 멋진 뒤집기(flip) 효과를 만들었습니다. 작은 데모일 뿐이지만, 이것은 iPhone에서 웹 브라우저 기반 응용프로그램이 상호반응할 수 있는 방법과 모바일 웹 사용자들에게 보여줄 수 있는 것에 대한 가능성을 열어주었습니다.

데모를 보시려면, iPhone이나 iPhone 시뮬레이터가 필요합니다.

from 3D CSS Transforms on the iPhone
Posted by 행복한고니 트랙백 0 : 댓글 0
CSS 변수가 다음 예정이라는 글을 쓴 적이 있습니다. 그리고 이제 와버렸네요!

WebKit에 이제 CSS 변수가 시험적으로 구현되었습니다.

WebKit nightly를 사용하면 이 기능을 테스트 해보실 수 있습니다.

Test cases

다시, Dylan Schiemann를 보고 가죠.

from CSS Variables are .... here!
TAG CSS, SAFARI
Posted by 행복한고니 트랙백 0 : 댓글 0
[code:css]
#indirect-example1 h4 + p,
#indirect-example2 h4 ~ p {
    background-color: #CCC; color: #F00;
}
Eric Wendelin씨가 상단에 보여지는 것과 같은 일반 형제 결합자(general sibling combinator)에 대해 살펴보셨습니다:
[code:css]
h4 ~ p {}

이 부분은 <h4> 엘리먼트가 앞에 있는 모든 형제 <p> 엘리먼트에 영향을 줍니다. 이는 인접 형제 결합자 (+)가 모든 <p> 형제 대신 직접적으로 인접한 형제에만 영향을 미친다는 점에서 다릅니다. 이 부분은 IE7+, FF2+, Opera 9.5+, Safari 3+, 심지어는 Konqueror 에서도 잘 작동합니다.

from CSS General Sibling Combinator in action
TAG CSS, TIP,
Posted by 행복한고니 트랙백 0 : 댓글 0
Chritian Heilmann씨가 YUI Grids와 함께 쓰는 Autogrid 라는 새로운 JavaScript 라이브러리를 작성하셨습니다. 이 기반 CSS 라이브러리는 똑똑한 리사이즈 기능을 제공합니다:
저는 YUI Grids를 아주 좋아합니다. 저는 CSS를 알고 있고, 브라우저마다 일어나는 다른 문제를 처리할 방법도 알고 있습니다. 하지만, 동시에 이런 처리들을 계속 해가면서 고치고 작성하는 일에 무척 짜증이 나기도 합니다. YUI Grids가 모든 경우의 웹 개발에 완벽히 맞지 않다해도, 그것들을 이용해 실용적인 접근을 하고 사이트를 만드는 일이 매우 좋습니다(아시다시피 저는 디자이너가 아니거든요).

YUI 기반 사이트를 만들면서 계속 가지고 있던 한가지 문제는 정확한 화면 해상도 혹은 가시영역 크기 예측에 대한 사람들의 불평이었습니다. YUI Grids는 고 해상도에서는 조금 멍청해보일 수 있는 100% 너비도 되고 800x600이나 1024x768 등의 해상도에 최적화된 것도 가능합니다. 여러분이 800 픽셀에 최적화하면, 보다 높은 해상도를 사용하는 사람들은 페이지의 길이에 대해 불평할 것입니다. 여러분이 1024에 최적화한다면, 800x600을 사용하는 사람들은 가로 스크롤을 해야하는 것에 대해 뭐라고 할것입니다. 모두다 만족시킬 수 없는거죠.

할 수 있을까요? CSS는 동적이지 않습니다 —고정된 상태를 가지고 있으며 브라우저가 여러분이 작성한 대로 제대로 보여주기만 바랄 수 밖에 없습니다(음, IE를 위한 조건절이 있긴 합니다만 기술적으로 그것들은 HTML의 영역입니다. 물론, CSS3의 미디어 퀴리도 있고 다른 것들도 있지만, 이 글의 목적은 기본적으로 IE6 지원을 위한 것입니다). 한편, JavaScript는 매우 동적이라서 그것을 사용하고 반응할 때 브라우저에서 지금 무슨 일이 일어나고 있는지 읽고 확인할 수 있습니다.

JavaScript의 이 기능을 잘 사용하면 여백의 폭을 필요에 따라 조절할 수 있는 YUI Grids 기반의 레이아웃을 만들 수 있습니다. 여러분이 해야할 것은 약간의 YUI Dom 마법과 ID와 class를 바꾸어 주는 것뿐입니다.
Christian씨는 데모 페이지와 전체 코드를 제공하고 있습니다:
[code:js]
YAHOO.example.autoGrid = function(){
  var container = YAHOO.util.Dom.get('doc') ||
                  YAHOO.util.Dom.get('doc2') ||
                  YAHOO.util.Dom.get('doc4') ||
                  YAHOO.util.Dom.get('doc3') ||
                  YAHOO.util.Dom.get('doc-custom');
  if(container){
    var sidebar = null;
    var classes = container.className;
    if(classes.match(/yui-t[1-3]|yui-left/)){
       var sidebar = 'left';
    }
    if(classes.match(/yui-t[4-6]|yui-right/)){
       var sidebar = 'right';
    }
    function switchGrid(){
      var currentWidth = YAHOO.util.Dom.getViewportWidth();
      if(currentWidth> 950){
        container.id = 'doc2';
        if(sidebar){
          container.className = sidebar === 'left' ? 'yui-t3' : 'yui-t6';
        }
      }
      if(currentWidth <950){
        container.id = 'doc';
        if(sidebar){
          container.className = sidebar === 'left' ? 'yui-t2' : 'yui-t5';
        }
      }
      if(currentWidth <760){
        container.id = 'doc3';
        if(sidebar){
          container.className = sidebar === 'left' ? 'yui-t1' : 'yui-t4';
        }
      }
      if(currentWidth <600){
        container.id = 'doc3';
        container.className = '';
      }
    };
    switchGrid();
    /*
      Throttle by Nicholas Zakas to work around MSIE's resize nasties.
      http://www.nczonline.net/blog/2007/11/30/the_throttle_function
    */
    function throttle(method, scope) {
      clearTimeout(method._tId);
        method._tId= setTimeout(function(){
        method.call(scope);
      }, 100);
    };
    YAHOO.util.Event.on(window,'resize',function(){
      throttle(YAHOO.example.autoGrid.switch,window);
    });
 
  };
  return {
    switch:switchGrid
  };
}();

from YUI Autogrid: Correctly resize the grids
TAG CSS, Yahoo!, Yui
Posted by 행복한고니 트랙백 0 : 댓글 0
WebKit의 새로운 CSS 변환에는 회전, 크기 변경 등의 여러 기능이 있어 사람들이 여러 가능성을 생각할 수 있게 되었습니다. LifeRayPaul Bakaus씨는 실험적으로 이런 새 기능을 이용해 iTunes 같은 멋진 Coverflow 효과를 작성하셨습니다. 실시간으로 흐름 및 애니메이션도 지원하지만, canvas나 미리 렌더링된 그래픽은 사용하지 않았습니다.
이 편리하고 매력있는 css 기능은 커스텀 CSS 태그를  이용해 페이지의 어느 엘리먼트에서도 모든 종류의 2d 변환을 실행할 수 있도록 합니다. 이것은 DOM 엘리먼트를 회전하거나 변형할 수 있을 뿐 아니라, 여러분이 원하는 것을 위해 일반적인 매트릭스 함수를 사용할 수도 있다는 의미입니다.

CSS 변환은 nightly build 뿐 아니라 Safari 3.1과 iPhone에서도 가능합니다. 따라서, 현재의 사용자들을 목표로 삼는 것도 가능합니다.

사용자 삽입 이미지
Paul 씨는 실제 Coverflow 위젯을 작성하는데 jQueryUI를 사용했으며, jQueryUI의 슬라이더로 슬라이드 효과를 낼 수 있었습니다. 마우스를 클릭하거나 키보드의 좌/우 화살표를 이용해 탐색할 수 있습니다.

이 데모를 보시려면 CSS 변환이 지원되는 Safari 3.1 이나 Webkit이 필요합니다.

from Using CSS transforms to Build a Coverflow Effect on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1

Safari 에서 뒤집기

2008.06.10 01:41 from [IT] Web Tech
사용자 삽입 이미지
Thomas Fuchs 씨가 RailsConf 에서 재밌는 것을 보여주셨습니다. 북마클릿을 이용한 새로운 WebKit 변환 예제입니다.
[code:js]
javascript:document.body.style['-webkit-transform']='rotate(180deg)';

javascript:document.body.style['-webkit-transform']='rotate('+prompt('degrees',180)+'deg)';

from Flipping out over Safari on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
CSS Namespace 모듈이 "W3C 예비 권고안"이 되었습니다.

간단하지만, 아주 유용하게 쓰일 모듈입니다:

CSS Namespace 모듈은 CSS에서 네임스페이스 사용 문법을 정의합니다. 기본 네임스페이스 선언과 네임스페이스와 네임스페이스 접두어를 바인딩하는 @namespace 규칙을 정의합니다. 또한 네임스페이스 자격이 있는 이름에서 이러한 접두어를 사용하기 위해 다른 명세를 적용할 수 있는 문법도 정의합니다.

아래는 네임스페이스를 아주 잘 보여주는 예제입니다:
네임스페이스 선언:
[code:css]
@namespace toto "http://toto.example.org";
@namespace "http://example.com/foo";

컨텍스트에서는 기본 네임스페이스가 적용됩니다:
  • toto|A:
    http://toto.example.org 네임스페이스에 있는 이름 A를 표시
  • |B:
    네임스페이스가 없는 이름 B를 표시
  • *|C:
    네임스페이스가 없는 것을 포함한 모든 네임스페이스의 이름 C를 표시
  • D:
    http://example.com/foo 네임스페이스의 D를 표시

아주 좋은 발전이긴한데, 우리가 진짜로 기다리는 것은 언제 주요 브라우저들에서 지원이 되느냐는거겠죠!

from W3C CSS Namespaces: Now a Candidate Recommendation on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Kevin Yank씨가 Firefox 3 RC 1 에서 새로워진 기능을 보고, 웹 개발자들이 알아야 할만한 부분을 짚어주셨습니다.

부드러운 하이픈
Firefox 3 의 CSS 개선사항을 보면 부드러운 하이픈soft hyphen이 추가된 것을 보실 수 있습니다. HTML 표준에는 있었으나 그간 브라우저들이 구현하지는 않았던 모양입니다. 이번 Firefox 3의 지원을 시작으로 IE, Safari, Opera 등의 다른 브라우저에서도 지원하게 될 것이라고 합니다. 부드러운 하이픈은 평상시에는 보이지 않지만, 내용이 밀려 내려가야 할 경우에 나타난다고 합니다. 영문을 띄어쓰기 없이 붙여썼을 때 레이아웃이 깨지거나 글이 제대로 보이지 않는 일은 많이들 겪어보셨을텐데, 이 경우에 유용하게 사용할 수 있을 것 같습니다.

실제 동작을 보시겠습니다:
사용자 삽입 이미지

Inline Blocks
이 역시 잘 알려져있지 않지만, 꽤 유용한 기능입니다. 엘리먼트 스타일에 display 타입으로 inline-block 이라는 값을 적용하면 엘리먼트는 span과 같은 inline 엘리먼트처럼 위치를 정합니다. 하지만, 내부의 컨텐트들은 해당 엘리먼트가 block 속성을 가진 것처럼 동작하게 됩니다.

모든 브라우저에서 이것만 제대로 지원된다면 그간 float 으로 삽질했던 일이 훨씬 많이 줄어들게 될 것 같습니다.
[code:js]
<ul class="gallery">
  <li>
    <div class="caption">A short caption</div>
    <div class="thumb"><img src="thumb1.jpg"/></div>
  </li><li>
    <div class="caption">A short caption</div>
    <div class="thumb"><img src="thumb2.jpg"/></div>
  </li><li>
  …
</li></ul>

위 코드는 다음과 같이 표현됩니다.
사용자 삽입 이미지

실제 동작하는 것을 확인해보세요.

from Soft-hyphens and inline-block; Subtleties in Firefox 3 RC 1 on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 2

우리 모두는 input[type=text] 과 같이 쓰고 싶어하지만 브라우저에서 지원을 제대로 못합니다.
그것이 James Cogian 씨가 classy_inputs이라는 이름의 작은 플러그인을 만들게 된 이유입니다:

아, 제가 얼마나 input 태그를 싫어했던지요(YUI도 그들을 싫어합니다만, 그 얘기는 나중에 하겠습니다). 타입이 다르면 다른 태그 이름을 사용했어야 하는데, 그렇지 못하니까 CSS로 input 태그를 다루는 것이 완전히 힘들어졌습니다. 그래서, 저는 Rails 템플릿을 작성할 때 모든 form 엘리먼트에 a :class 옵션을 추가하는 짜증나는 방법을 사용하는 것으로 해결하곤 했습니다. 잠깐 돌아가자면, 저는 이 작업을 자동으로 하기 위해 Rails를 패치하려고 해봤습니다. 하지만 몇몇 곳에 클래스를 적용할수록 테스트는 저를 좌절하게 했습니다.

그래서, 이런 반복작업을 없애기 위한 플러그인을 만들었습니다:

script/plugin install
http://svn.jcoglan.com/classyinputs/trunk/classy_inputs

설치가 되면, Rails view method를 사용해 작성된 모든 input 태그는 자신의 type 속성에 알맞은 클래스 이름을 가지게 됩니다. Dion씨도 아마 다른 방식으로 Rails를 패치할 것 같다고는 하는데, 장담할 수는 없다고 합니다.

from classy_inputs: Rails plugin to add autoclass names on Ajaxian
TAG CSS, ruby
Posted by 행복한고니 트랙백 0 : 댓글 0

티스토리 툴바