본문 바로가기

레이아웃3

웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트 웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트 유동적 레이아웃에서 가로 너비으 최대값고 최소값을 제한해줄수 있는 걸 대부분알것이다(물론IE6는 그냥적용안됨) 어느정도 익숙하다면 Jello Mold Layout Generator를 방문하면된다. http://www.positioniseverything.net/articles/sidepages/pie-calc.php 위와같은 그림에서 위에는 가로 최소값 입력 아래는 최대값과 전체 사이트 너비를 입력하고 submit을 클릭하면 된다. 그러나 소스가 바로 나오지는 않는다. 변경된 사이트의 모습을 보여준다. 브라우저에서 사이트의 소스보기를 연후에 복사,저장하든지 사이트저장해서 수정하든지 하면 된다. 좋은점은 IE에 대한 대체 방안도 마련 되어있다는 점.. 2011. 3. 27.
CSS 고급 레이아웃 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} .. 2009. 9. 27.
CSS 다단 레이아웃(css3 column) 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.. 2009. 9. 25.