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

A.J님께 소식듣고 정리해서 포스팅하려고 했는데 Ajaxian에서 벌써 소개했더군요. FireBreath는 윈도, 맥, 리눅스와 같은 각기 다른 플랫폼에서 파이어폭스, 크롬, 사파리, IE 브라우저 단위로 플러그인을 개발하는 수고를 덜어주는 프레임웍입니다. 브라우저 플러그인은 순수 웹 기술만으로 구현하는 것이 어려운 경우 이를 대신할 수 있는 소프트웨어를 연동하여 고차원 서비스를 브라우저를 통하여 제공하기 위한 것입니다. 예를 들면 퀵타임, 플래시, 실버라잇 등이 있겠네요.

NPAPI browsers on windows, mac, and linux:

  • Gecko/Firefox
  • Google Chrome
  • Apple Safari

ActiveX Control hosts:

  • Microsoft Internet Explorer 6, 7, and 8

그리고 아래와 같은 자바스크립트와 연동하기 위한 API도 제공하고 있어 여러모로 수고를 덜 수 있습니다. ActiveX로 인한 크로스-브라우저 이슈가 대두되고 있는 한국 웹문화에 도움될만한 대안이로군요!

JSAPI-chart.png

Comments