웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트

CSS 2011.03.27 11:34

웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트

유동적 레이아웃에서 가로 너비으 최대값고 최소값을 제한해줄수 있는 걸 대부분알것이다(물론IE6는 그냥적용안됨)

어느정도 익숙하다면 Jello Mold Layout Generator를 방문하면된다.

http://www.positioniseverything.net/articles/sidepages/pie-calc.php



위와같은 그림에서 위에는 가로 최소값 입력 아래는 최대값과 전체 사이트 너비를 입력하고 submit을 클릭하면 된다. 그러나 소스가 바로 나오지는 않는다. 변경된 사이트의 모습을 보여준다.


브라우저에서 사이트의 소스보기를 연후에 복사,저장하든지 사이트저장해서 수정하든지 하면 된다.

좋은점은 IE에 대한 대체 방안도 마련 되어있다는 점이다.
아래가 마련된 소스이다





저작자 표시
신고

설정

트랙백

댓글

CSS 고급 레이아웃

CSS 2009.09.27 12:06

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와 더불어 아직 개발중이니 발전하는대로 올려보겠다.


저작자 표시
신고

설정

트랙백

댓글

CSS 다단 레이아웃(css3 column)

CSS 2009.09.25 17:27

CSS 다단 레이아웃

여러레이아웃을 별도로 나누는것은 일일이 지정하기귀찮은 법이다.특히 같은 크기의 레이아웃으로 나눌떄는 귀찮다.다음그림과 같은경우를 보면 이걸 일일이 div태그로 정하고 class 로 이름을 달아주고 나눠줘여한다.코드는 다음과 같다.

첫번째 단입니다.

두번째 단입니다.

세번째 단입니다.

columns이라고 일일이 클래스를 지정해주었다.

#contents{ width:800px;}
#contents div{ float:left; border-right:2px solid #000;}
.columns{ padding:10px; width:200px;}

CSS3 columns 이용

첫번째 단입니다.

두번째 단입니다.

세번째 단입니다.

#colcontents{ 
width:800px;
column-count:3 ;
}

아주간단히 column-count:3 ;로 정하여 단이 나누어진다. 예제를 보려면

여기

그러나 아직까지 이 다단column-count

을 지원하는브라우저는 파이어폭스 뿐이다.그것도 -moz-column으로 지정해야한다.

월드와이드웹에서 column에 대한정보는http://www.w3.org/TR/css3-multicol이다.

column 자세히보기

마지막 column과 그 값은 다음과 같이 정의한다.

div{
columns: 200px 3;
/*단의 길이 , 나눌 갯수*/
column-width:200px;
column-count:3;
column-gap:
column-rule : 1px soild #000;
/*단의 보더의 두깨, 스타일, 색깔*/
column-rule-color:#000;
column-rule-style:soild;
column-rule-width:1px;
}
저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바