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;
}

설정

트랙백

댓글

CSS 복수이미지사용 z축 순서(css3)

CSS 2009.09.23 18:41

CSS 복수이미지사용 z축 순서

복수이미지사용으로 재미있는 점은 그림의 위치가 겹칠경우이다. 개별에 z-index를 줄수는없지만 순서는 지정해준 순서대로다 img01,img02,img03이렇게 해주면 img01이 맨앞에 온다.예제를 보자

내용
div{ 
width:500px; height:450px; border:1px solid #fcc;
background-image:
url("./images/love01.gif"),
url("./images/love02.gif"),
url("./images/love03.gif");

background-repeat : 
no-repeat,no-repeat, no-repeat;

background-position:	
20px 20px,
100px 70px,
130px 180px;
}

물론 요약해서 "background" 으로도 한번에 지정하기가 가능하다

div{ background:
url("./images/love01.gif") no-repeat 20px 20px,
url("./images/love02.gif") no-repeat 100px 70px,
url("./images/love03.gif") no-repeat 130px 180px;
}
결과는 여기서 보자링크

여전히 복수이미지는 아직 webkit을 기반으로 하는 구글크롬, 사파리에서만 적용된다.


설정

트랙백

댓글

CSS 복수이미지사용 라운드 박스(css3)

CSS 2009.09.23 17:53

CSS 복수이미지사용 라운드 박스

css3에서는 하나의 엘리먼트에 복수이미지가 사용가능하다.

월드와이드맵 참조 링크http://www.w3.org/TR/css3-background/

간단한 예로 div엘리먼트의 양쪽에 두이미지를 쓴다고 하면

div{
 background-image :
url("left.png"),
url("right.png");
/*콤마로 여러개를 지정한다*/
background-repeat : 
no-repeat,
no-repeat;
background-position:	
0 left,
0 right,

위와 같이 ","로 여러개를 지정할수 있다.라운드박스에 적용해보자

유동 라운드박스 :: dom

유동 라운드 박스를 반드는 방법은 여러가지가 있다. 먼저 여러 코딩으로 감싸고 각각 배경그림을 지정하는경우이다.예제를 보자

/*클래스 bt는 박스 탑부분이다 */
/*왼쪽 보더*/
/*오른쪽 보더*/
/*내용*/

유동 라운드박스 :: 코딩감싸기

/*클래스 bb는 박스 아래부분이다 */

위와같은 경우는 단지꾸며주기위해 코딩이 너무많아서 혼란스럽다. 이를 스크립트로 해결하는 방법이다음과 같다.

 
/*
먼저 다중함수실행 함수가필요하다.길어서생략하고 출처는
http://www.scottandrew.com/weblog/articles/cbs-events
*/
/*
또역시필요한 엘리먼트생성함수
http://simon.incutio.com/archive/2003/06/15/javascriptWithXML
*/

function insertTop(obj) {
	// 상단에 필요한 bt란클래스의 div와 그안에 div를 만든다.
	d=createElement("div"); d.className="bt"; //클래스이름이 bt
       d2=createElement("div"); d.appendChild(d2); //bt의 자식 div
	obj.insertBefore(d,obj.firstChild);
}
function insertBottom(obj) {
	// 하단에 필요한 bb란클래스의 div와 그안에 div를 만든다.
	d=createElement("div"); d.className="bb"; //클래스이름이 bb
       d2=createElement("div");  d.appendChild(d2);//bb의 자식 div
     obj.appendChild(d);
}
function initCB()
{
	var divs = document.getElementsByTagName('div');
	var cbDivs = [];
	for (var i = 0; i < divs.length; i++) {
		if (/\bcbb\b/.test(divs[i].className))
			cbDivs[cbDivs.length] = divs[i];
	}
	var thediv, outer, i1, i2;
	for (var i = 0; i < cbDivs.length; i++) {
		thediv = cbDivs[i];
          //클래스명이 cbb인 div를 찾고 cb로바꾼다
		outer = createElement('div');
		outer.className = thediv.className.replace('cbb', 'cb');
	 //클래스 i3생성
		thediv.className = 'i3';
		thediv.parentNode.replaceChild(outer, thediv);
	 //나머지 i2,i1을 생성 
		i1 = createElement('div');i1.className = 'i1';
		outer.appendChild(i1);i2 = createElement('div');
		i2.className = 'i2';i1.appendChild(i2);
		i2.appendChild(thediv);
		insertTop(outer); insertBottom(outer);
	}
}
if(document.getElementById && document.createTextNode)
{
addEvent(window, 'load', initCB);
}

위와 같이 해주어 의미없는 엘리먼트를 DOM으로 만들어준다.

그리고 적용할 css

.box {/*기본적인 box와 그배경*/
margin: 15px 0 0 0;
padding: 5px 0 5px 0;
background:url(images/diags.gif);
}
.cbb {
margin: 0 10px 0 10px;
background: #FFF;
padding: 5px 0 5px 0;
line-height: 170%;
}
.cbb p, .cb p {
margin: 0;
padding: 0 5px 5px 5px;
color: #333;
}
.cb {
margin: 0.5em 0;
line-height: 170%;
}
/* 위쪽의 그림*/
.bt {
	background:url(images/box.png) no-repeat 100% 0;
	margin:0 0 0 18px; height:27px;
	}
.bt div {
	height:27px;width:18px;
	position:relative;left:-18px;
	background:url(images/box.png) no-repeat 0 0 ;
	}

/* 아래쪽의 그림 */
.bb {
	background:url(images/box.png) no-repeat 100% 100%;
	margin:0 0 0 12px; height:14px;
	}
.bb div {
	height:14px;width:12px;
	position:relative;left:-12px;
	background:url(images/box.png) no-repeat 0 100% ;

	}
/* 왼쪽 보더*/
.i1 {
	padding: 0 0 0 12px;
	background:url(images/borders.png) repeat-y 0 0; 
	}
/* 오른쪽보더 */
.i2 {
	padding: 0 12px 0 0;
	background:url(images/borders.png) repeat-y 100% 0 ;
	}
/* 콘텐츠 */
.i3 {
	background:#FFF;  border: 1px solid #FFF;
	border-width:1px 0; padding:0 5px;
	}

유동 라운드박스 :: CSS3

앞에 보여준 것은 DOM으로 해결했지만 어느정도 알아야 하고 귀찮다. 더쉽게하는방법이 css3 복수 이미지사용하는것이다.위와같은 그림이 필요하고 소스는 아래와같다.

유동 라운드박스 :: css3로 해결

div#csspec  {
padding : 0 1em;
background-color : #f9e6f6; }
div#csspec { background-image :
url("./images/top_left.png"),url("./images/top_right.png"),url("./images/bottom_right.png"),
url("./images/bottom_left.png"),url("./images/top_center.png"), url("./images/middle_right.png"),url("./images/bottom_center.png"),url("./images/middle_left.png"); 

background-repeat : 
no-repeat,no-repeat, no-repeat, no-repeat,repeat-x, repeat-y,repeat-x, repeat-y; 

background-position:	
top left,top right,bottom right,bottom left,top left,top right,bottom right,bottom left; 
}

div#csspec p{padding:20px;}

이로서 복수이미지를 이용한 라운드 박스사용을 소개했다. 이예제를 보려면 여기로 클릭

그리고 아직까지 복수이미지는 브라우저 구글크롬 사파리에만 적용된다


설정

트랙백

댓글

CSS 월드와이드맵 모듈별 개발 링크

CSS 2009.09.22 14:15

CSS 월드와이드맵 CSS3모듈

현재 CSS3 개발중인각각의 링크를 걸어본다.월드와이드 맵에서는 복잡함을 고려하여 분야별로 나누어 개발하기로 했다. 여러번 소개한 선택자 모듈, 인쇄매체를 위한 페이지 모듈, 배경과 외곽선 모듈, 다단 레이아웃 모듈, 고급레이아웃 모듈, 매체조사모듈로 각각 소개한다.

선택자 모듈 : CSS3에서 추가된 선택자를 다룬다
http://www.w3.org/TR/css3-selectors/#target-pseudo
인쇄매체를 위한 페이지 모듈 : CSS를 보이는것뿐만아니라 인쇄에도 적용할 수 있도록 한다.
http://www.w3.org/TR/css3-page/
배경과 외곽선 모듈 : 한엘리먼트에 여러배경이미지 그리고 보더에도 이미지사용방법을 다룬다.
http://www.w3.org/TR/css3-background/
다단 레이아웃 모듈 : 별도의 마트업 추가 없이 단을 나눌수 있게 한다.
http://www.w3.org/TR/css3-multicol/
고급레이아웃 모듈 : 보이는 컨텐츠와 디자인의 레이아웃을 완전히 구분하게 한다.
http://www.w3.org/TR/css3-layout/
인쇄매체를 위한 페이지 모듈 : 모니터, 브라우저, 해상도, PDA등매체에 따라 적용할수 있도록한다.
http://www.w3.org/TR/css3-mediaqueries/



설정

트랙백

댓글

CSS :tager 동적 유사 클래스

CSS 2009.09.22 13:59

CSS :tager 동적유사클래스 (css3)

사용자가 클릭할 경우의 원본의 부분을 강조하기 위한 재미있는 새로운 방법. 필요한것은 클릭해야하니 링크, 그리고 효과가 지정될 엘리먼트, 그리소 css 설정이다. 예를들어보자 클릭하게되면 지장된곳의 상태가 css에서 지정한것으로 바뀐다.예제를 보자

  • 먼저 여기를클릭하시오
  • 다음 여기를클릭하시오
  • 먼저 여기 배경색이 빠뀜
  • 폰트크기가 바뀜

css는 다음과 같이

#first:target{
background: #ffff7e;
}
#second:target{ font-size:25px;}

첫번쪠 지정한 곳은 배경색이바뀐다. 두번째 지정한곳은 크기가 바뀐다.

이런 target 은 한페이지내에 링크를 걸어둘경우 선택되었을떄 특별히 주목받도록 변경시킬때 사용된다.

직접예제를 보려면 여기로GO


설정

트랙백

댓글

CSS :nth-last-child 유사클래스(css3)

CSS 2009.09.18 17:56

CSS :nth-last-child 유사클래스 이외..

:nth-child를 봤다면 :nth-last-child 도 어렵지않다. 아니똑같다.LAST가 붙은 만큼 뒤에서 세어주면 된다. 간다한은 예

li:nth-last-child(2n){ font-size:20px;}
/*뒤에서 꺼꾸로 짝수번쨰 폰트사이즈 20px*/

나머지 ㅁ유사한~유사클래스를 마저 보자

:only-child

:only-child이건 only 붙은 만큼 유일한 자식이 있을경우만 선택된다,예로 div:only-child라 했을 경우

이건 유일하니 선택됨
첫째 자식

또한명 자식 이다보니 선택안됨

:last-child

:first-child의 반대이다.:first-child는 자식 첫번째 껄 선택한다.반대로 :last-child는 마지막 자식이다.예제로 간단히보자

li:first-child{font-size:10px;}
li:last-child{font-size:20px;}
  • 첫번쨰 자식
  • 자식2
  • 자식3
  • 마지막 자식

결과는? 다음과 같다.

  • 첫번쨰 자식
  • 자식2
  • 자식3
  • 마지막 자식

설정

트랙백

댓글

CSS :nth-child 유사클래스(css3)

CSS 2009.09.18 16:58

CSS :nth-child 유사클래스

순차적 자식선택자이다. 자식선택자중 li라던가 table의 tr태그에 쓰이게 되는데 예제를 보자

홀수
짝수
홀수
짝수

이표는 홀수의 번쨰의 경우 표의 색깔을 #FF9999 로 한경우이다. 이렇게 할경우 소스는 다음과 같다.

홀수
짝수
홀수
짝수
.odd{background-color:#ff9999;}
.even{background-color:#ffcccc;}

이와칸이 별도로 클래스를 지정해주고 그에 맞게 색을 지정하게 해주어야한다. 표나, 리스트의 행열이 적으면 간편하나 길면 일일이 클래스 지정해주기가 귀찮아 진다.특히 통계자료에 쓰일 표같은 경우는 더욱 그렇다. 이같은 점을 쉽게 사용할 수 있도록 하는 방법이 :nth-child를 이용하는것이다.사용방법은 다음과 같다

E:nth-child(){}
/*an E element, the n-th child of its parent
(E 엘리먼트가 부모이며 그순차적 자식선택자를 괄호안의 방법으로 선택한다)
*/

E:nth-child()에 괄호 안에 따라서 지정할 수 있는데 가장 간단한 변수인 odd(홀수), even(짝수)을 들수 있다. 예로 E:nth-child(odd){}이렇게하면 롷수번째가 선택되고 E:nth-child(even)이렇게하면 짝수번쨰가 선택되는 것이다.그럼앞서보인표에 클래스 부여없이 선택할려면 다음과같다.

tr:nth-child(odd){background-color:#ff9999;}
/*tr엘리먼트의 홀수번쨰 배경색을 #ff9999로*/
tr:nth-child(even){background-color:#ffcccc;}
/*tr엘리먼트의 짝수번쨰 배경색을 #ff9999로*/

이와 같이하면 별도 클래스 지정없이 간편하게 해줄수있다

좀더 고급스럽게 사용하기

단순히 짝수 홀수만 사용한다면 그다지흥미를 못느낄 것이다. 하지만 :nth-child()의 괄호안에 수학 공식을 넣기에 따라 선택할수 있다. 학교에서 배운 수열을 생각해보자 1, 3, 5 ,7 ,9 .... 이수열의 일반화 공식은? 2n+1 이다. (모르는 분은 수학공부부터....)이처럼공식을 넣어줄수있다. 물론 2n+1 이건 홀수 선택 odd와 같다. 그러면 1, 4,7, 10, 13...이런경우는? 3n+1이다. 예제 소스를 보자.아그리고 n은 0부터 시작한다.

  • 첫번쨰
  • 두번쨰
  • 세번쨰
  • ... .. .
  • 열번쨰
li:nth-child(1){}/*li엘리먼트중 첫번쨰 선택*/
li:nth-child(2){}/*li엘리먼트중 두번쨰 선택*/
li:nth-child(n){}/*li엘리먼트중 n번쨰 선택 0부터시작하니 모두선택된다*/
li:nth-child(2n){}/*li엘리먼트중 2n번쨰 선택 0,2,4,6...*/

마지막으로 1, 4,7, 10, 13...로 선택할경우 폰트 소스와 그 결과를 보자

li:nth-child(3n+1){ font-size:20px;}
/*1, 4,7, 10, 13..번째의 경우 폰트 크기를 20px로*/
  • 첫번쨰
  • 두번쨰
  • 세번쨰
  • 네번쨰
  • 다섯번쨰
  • 여섯번쨰
  • 일곱번쨰
  • 여덟번쨰
  • 아홉번쨰

더자세한 내용을 알고 싶으면 여기로 가보자


설정

트랙백

댓글

CSS 간접 선택자(css3)

CSS 2009.09.17 17:49

CSS 간접 선택자(General selector)

간접 선택자는 엘리먼트 뒤에 나오는 모든 엘리먼트를 지정할때 사용한다.

E ~ F{font-size:20px;}
/*F element preceded by an E element
(E 엘리먼트가 F엘리먼트보다 앞에있다.*/

h1 ~ p{} 이렇게 지정하면 h1 뒤에 p엘리먼트가 선택된다 하지만 다른 엘리먼트에 종속되어있는 엘리먼트는 선택되지 않는다.예제를 보자.

앞서있는 엘리먼트

어쩌고

저쩌고

어쩌고

여긴선택안됨

저쩌고

h1 ~ p{font-size:20px;}

결과는 다음과 같이 된다

앞서있는 엘리먼트

어쩌고

저쩌고

여긴선택안됨

어쩌고

저쩌고

위와 같이 div엘리먼트안에 p 엘리먼트는 선택되지않는다.


설정

트랙백

댓글

CSS 인접 선택자(css3)

CSS 2009.09.17 17:19

CSS 인접 선택자(Adjacent selector)

인접선택자는 엘리먼트 바로다음에 오는 엘리먼트를 지정하는 방법이다.

사용방법은 다음과 같다.

E + F{font-size:30px;}
/*F element immediately preceded by an E element
(F엘리먼트 다음 바로 붙어오는 E엘리먼트*/

예를 들어html이 다음과 같을 경우

기준이요

선택되는것은 여기

여기는 선탣안됨

여기도 선탣안됨

h1 + p{font-size:30px;}
/*"선택되는것은 여기" 이 텍스트의 폰트크기가 30px이 된다.*/

h1 다음에 오는 엘리먼트 첫번쨰 엘리먼트p만 폰트의 크기가 30px이 된다.


설정

트랙백

댓글

CSS 자식 선택자(css3)

CSS 2009.09.17 13:18

CSS 자식선택자(Child selector)

자식선택자는 엘리멘트 하위에 엘리먼트를 선택하는 것이다.

방법은 다음과 같다

E > F{font-size:30px;}
/*an F element child of an E element( F는  E 의 자식엘리먼트이다*)/

예로"div#box >div" 이의미는 box라는 아이디를가진 div엘리먼트에 속한 div엘리먼트를 선택하는 것이다. 그러면 div#box div 자손선택자와 타이점은 무엇인가? 자식은 말그대로 아들(child) 그엘레먼트의 바로 하위에만을 의미한다. 하지만 자손은 그하위에 모든 엘리먼트를의미한다. 예를 보자

여기는 바로아래 자식이다

여기는 자시이아닌 손자이다

여기도 자식이아닌 손자(자손)이다.

css는 다음과 같다.

div#box  p{ font-size:36px;}
/*자손인 모든 텍스트만 크기가 바뀐다*/
div#box > p{ font-size:36px;}
/*자식인 첫번째 텍스트만 크기가 바뀐다*/

자식선택자를 사용하면 첫번째 텍스트만 크기가 바뀔것이다. 하지만 자손 선택자의 경우는 모든텍스트의 텍스트 크기가 변한다.

따라서 자식선택자의 경우는 이와같이 별도 클래스나 아이디부여없이 선택할 수 있는 장접이 있다.



설정

트랙백

댓글