Rev. 2.73

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
n ..
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
1
2
3
4
5
6
1
2
3
4
5
6
7
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
1
2
3
4
5
6
7
8
9
1
2
1
2
3
4
5
6
7
8
9
a
b
a
c

Vladimir Carrer씨는 스타일시트 단 두줄을 설정하는 것으로 다양한 크기의 컬럼을 설정하는 그리드 프레임웍을 소개했습니다. 위 데모는 아래의 간단한 두줄로 이루어진 스타일시트와 최소한의 HTML 코드만으로 만들어진 것입니다.

.row { display:table; width:960px; margin:0 auto }
.cell { display:table-cell; vertical-align:top; padding-left:10px }
<div class="row">
  <div class="cell" style="background-color:#aaa;">1</div>
  <div class="cell" style="background-color:#bbb;">2</div>
  <div class="cell" style="background-color:#ccc;">3</div>
</div>

위 스타일시트를 분석하면 다음과 같습니다.

.row {
  display: table; /* 전체 컨테이너에 테이블 스타일을 적용 */
  width: 960px; /* 전체 폭, 사이즈 변경을 비롯해 단위 %, em에 변경 가능 */
  margin: 0 auto /* 좌우 중앙에 배치 */
}
.cell {
  display: table-cell; /* 각 컬럼에 테이블의 셀 스타일을 적용 */
  vertical-align: top; /* 상단(top) 정렬 */
  padding-left: 10px /* 컬럼 간의 간격 너비 */
}

이 스타일시트를 이용하여 구축한 다른 예제1예제2도 확인해 보세요.

Comments

hero.png

Sencha에서 CSS3 애니메이션을 만들어주는 데스크탑용 애플리케이션인 Sencha Animator를 릴리즈했습니다. 플래시의 타임라인을 이용한 애니메이션 생성 인터페이스와 유사한 레이아웃으로 구성되었으며, 간단한 도형 및 문자를 추가할 수 있는 생성 도구가 포홤되어 있습니다. Mac OS X, Windows, Linux에 설치할 수 있고 완성된 프로젝트를 Export(내보내기)하면 html과 css파일을 생성해 줍니다. 현재 CSS3의 애니메이션 속성은 웹킷기반 브라우저에서만 작동하므로 사파리, 크롬, 안드로이드 및 iOS 등의 모바일 브라우저에 사용될 수 있습니다. 서드-파티 플러그인을 사용하지 않고 광고를 제작할 수 있다고 강하게 피력하고 있네요. 아래는 Sencha Animator를 이용해서 만들어진 광고 예제입니다.

CSS3

Comments

Hertz Click to reveal the answer

CSS3 Ad

Pay for standard.

Drive off in premium.

Get a free double upgrade
on Hertz weekend rentals.

Plus your regular
AAA discount.

Book Now

  

AAA Members:
Free double upgrade
on Hertz rentals

Flash Ad

HSBC Click to reveal the answer

CSS3 Ad

HSBCBusiness
HSBC
The world's local bank
 
 
Can your business be a local business all around the world?
With offices in over 60 countries we can help navigate local laws, customs and risks.
Learn more>>

Flash Ad

Buick LaCrosse Click to reveal the answer

Flash Ad

CSS3 Ad

We're so confident
 in the 2010 LaCrosse
We don't have to
 say another word about it.

"The LaCrosse just may be proof that Buick's best
days are yet to come...simply stunning on the inside..." CarandDriver.com, July 2009

"Buick sees Lexus on most counts
and raises on others." Motor Trend

"2010 Buick LaCrosse CXS...
Easily the best Buick sedan in a long time."
CarandDriver.com, July 2009

"LaCrosse could be a game-changer for Buick."
Pittsburgh Post-Gazette

More Reactions On Twitter

위 화면은 sencha.com의 Arne Bech씨가 플래시로 만든 간단한 애니메이션 광고를 CSS3로 재현한 것입니다. 어느쪽이 CSS이고 플래시일까요? 이 것은 animation CSS속성을 지원하는 웹킷 계열 브라우저(사파리, 크롬)에서 정상적으로 작동합니다. 얼핏 보기에는 구별해내기가 쉽지 않군요. 해답은 "Click to reveal the answer"를 클릭하여 확인 할 수 있습니다.

Comments