나는 왜이렇게 둔한거냐.. 이제야 DIV를 알아내다니.. 크흑
DIV ... .Div 그게 무엇인가?
나는 Table 만 고집했다.
먼옜날부터 테이블이 나에게 신적인 존재로 생각했다.
그런데 허무하다..
Div 라는 녀석이 내눈을 어지럽혓다. 이런 줸장 머 이런게 다있어 할정도로..
Div 레이아웃은 Table 를 그렇게 꼬아 만들고 붙여만들고.... .하던것을 없에버렸다.
다른소스도 필요없다. css 소스와 div 만알면된다
css 로... ID 값 정해놓고
Div id=부를이름 쳐넣으면 다된다.
그리고... <table><tr><td></td></tr></table> 를 = > <div></div> 로 바꾼것은 가히 혁명적이다.
Table 보다 속도도 빠르고
지금까지 내가 Div 뭐가 그리 잘랏냐? 테이블만 잇어도.. 다 할수있다.. 고 생각한것을 무색하게 만들었다.
Table 보다 초기 접근이 쉽고
원리도 간단한
DiV ....크헉..... 내가 바라던 소스엿었는데.. 나는 지금까지 외면하고있었다니
슬프다.. 크흑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
</head>
<style>
h3 {color:#ffffff;
font-weight:bold;
font-size:14px}
</style>
<body>
<div style="float:left;">
<div style="width:410px; height:250px; margin:5px; padding:0px; background:#FF0000;"><h3>1</h3></div>
<div style="float:left;">
<div style="width:200px; height:450px; margin:5px; padding:0px; background:#163423;"><h3>2</h3></div>
<div style="width:200px; height:150px; margin:5px; padding:0px; background:#012366;"><h3>3</h3></div>
<div style="width:200px; height:350px; margin:5px; padding:0px; background:#123566;"><h3>4</h3></div>
</div>
<div style="float:left;">
<div style="width:200px; height:250px; margin:5px; padding:0px; background:#012366;"><h3>2</h3></div>
<div style="width:200px; height:130px; margin:5px; padding:0px; background:#645366;"><h3>3</h3></div>
<div style="width:200px; height:150px; margin:5px; padding:0px; background:#123566;"><h3>4</h3></div>
<div style="width:200px; height:340px; margin:5px; padding:0px; background:#163423;"><h3>5</h3></div>
</div>
</div>
<div style="float:left;">
<div style="width:200px; height:150px; margin:5px; padding:0px; background:#163423;"><h3>2</h3></div>
<div style="width:200px; height:130px; margin:5px; padding:0px; background:#012366;"><h3>3</h3></div>
<div style="width:200px; height:310px; margin:5px; padding:0px; background:#123566;"><h3>4</h3></div>
<div style="width:200px; height:350px; margin:5px; padding:0px; background:#FF0000;"><h3>4</h3></div>
</div>
<div style="float:left;">
<div style="width:200px; height:250px; margin:5px; padding:0px; background:#012366;"><h3>2</h3></div>
<div style="width:200px; height:130px; margin:5px; padding:0px; background:#645366;"><h3>3</h3></div>
<div style="width:200px; height:150px; margin:5px; padding:0px; background:#123566;"><h3>4</h3></div>
<div style="width:200px; height:340px; margin:5px; padding:0px; background:#163423;"><h3>5</h3></div>
</div>
</body>
</html>
Div 원리에 대해 알려준 소스.. 크흑.. 캄샤캄샤
댓글 5개
하지만 테이블이 더 유리할 때도 있어요. ^^