본문 바로가기
CSS

CSS 고급 레이아웃

by 샷타이거 2009. 9. 27.

CSS 고급 레이아웃

레이아웃을 지정하는데 있어 플로트나 포지션을 지정할경우 상당히 귀찮아진다. 마진 패딩을 고려하고 일일이 지정하는것은 참귀찮은 일이다. css3에서는 원하는 모양을 단번에 나올수 있게 쉽게할수 있는 레이아웃모듈이 개발되고 있다. (월드와이드 맵고급레이아웃 모듈 http://www.w3.org/TR/css3-layout/.)

아래그림처럼 레이아웃을 꾸민다고 생각해보자

플로트나 포지션을 이용하면 아래위를 나누고 각각배치할 구역별위치를 지정해야한다. 이걸 단번에 지정하는방법이 개발되고 있다. 예제소스를보자

a
b
c
d
e
f
#box { display: 
          "a b c",
           "d e f "; }/*위그림처럼 display 값의 위치를 지정해준모습 코드*/
div#one{position :a}
/*포지션 값에 지정한 위치의 알파벳을 지정한다*/
div#tow{position :b}
div#three{position :c}
div#four{position :d}
div#five{position :e}
div#six{position :f}

아주 간단하다. 먼저 display에서 모양그대로 "a b c" ," d e f" 해주고 각div의 위치를 a~f까지원하는 위치에 갔다주면된다

앞서말했지만 여전히 문제되는 점은 "아직 개발중" 이라는 점이다.따라서 위와같이 해서는 아직 어떤브라우저에서도 적용되지않는다. 대신 자바스크립트로 위와같이 편하게 지정할 수 있도록 하는 방법이 있긴하다.

먼저 스크립트 almcss_4_6.js 이 필요하고 그다음으로 position 대신에 situated를 사용한다

예제를 보려면 여기서 볼수 있다.

이로서 CSS3에 대해 거의 둘러봤다고 보면 된다 hrml5와 더불어 아직 개발중이니 발전하는대로 올려보겠다.


댓글