반응형
보이는 것과 본래것에는 차이가 있을 수 있으니 [링크] 를 참고해주세요.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
TABLE 디자인과 DIV 디자인 간략 비교
ex1
상단
왼쪽
중앙
오른쪽
하단
ex2
상단
왼쪽
중앙
오른쪽
하단
ex3
상단
왼쪽
중앙
오른쪽
하단
* ex1 : TABLE로 디자인
* ex2 : DIV로 똑같게 디자인
* 주의 DIV로 할 때는 될 수 있는한 디자인 DIV 에 width를 설정해야한다.
o width를 설정 안하고, style에 float를 설정 할 경우 안의 내용에 따라 width가 결정됨(<span>과 같은 너비가 됨)
o width를 설정 안하고, style에 float를 설정 안한 경우 자신의 외각 대상에 대한 width를 가짐(100%와 비슷한 효과)
* DIV에 float 를 설정하면 inline 요소처럼 된다.
o float:left,float:right 를 설정하면 inline처럼 한줄에 여러개가 나열 될 수 있다..
o float를 설정하지 않을 경우 block 요소로 한줄에 하나만 존재하게 된다.
* clear 설정 (float를 설정한 DIV라고 가정)
o none : 한 줄 상에 위치하도록 설정된다.(한줄상의 모든 것에 너비가 외각의 너비를 넘어서면 밑으로 내려간다)
o left : 모든 것을 한줄로 봤을 때 자신의 왼쪽에 무엇인가 있다면 자신은 다음줄로 내려간다.
자신의 왼쪽에서는 흐름이 끊기고 새줄에서 새로 시작된다.
o right : 모든 것을 한줄로 봤을 때 자신의 오른쪽에 무엇인가 있다면 자신은 다음줄로 내려간다.
자신의 오른쪽에서는 흐름이 끊기고 새줄에서 새로 시작된다.
o both : left,right 양쪽이 성질을 갖는다.(즉, 그 줄에는 자신만 있게된다.)
o 이건 말로 설정하기 어려우니, 직접 어려 경우를 실험해보기 바람!
* 디자인용 DIV에 float를 주고 width 를 설정했을 경우 border를 주면 안된다.
o border를 주면 실제 너비는 width+(border*2) 가 된다.
이럴 경우 외각에서 너비를 제한 한 경우 외각 너비보다 DIV들의 실제 너비 합이 같아지므로
원하지 않는 디자인이 되버릴 수 있다. (ex3 참고)
o SPAN으로 해보아도 비슷한 결과를 가진다.(다만, SPAN은 width를 가질 수 없고 단어단위로 밑으로 내려간다)
* DIV로 디자인을 했을 때 수평으로 구성된 DIV들의 높이는 서로 다를 수 있다.
o TABLE의 경우 TR에의해서 TR에 포함된 TD는 모두 높이가 같다.
o 하지만 DIV는 서로 각각의 요소로 서로의 높이를 간섭하지 못하기 때문에 각각의 높이를 가진다.
o 예
+ http://mins01.zerock.net/for2007/index2.php?mm=1 : 메인 부분이 길어져도 왼쪽과 메인의 높이가 같다. : TABLE 디자인
+ http://mins01.zerock.net/for2007/index.php?mm=1 : 메인 부분과 왼쪽 부분의 높이가 다르다. : DIV 디자인
* DIV 안은 세로 정렬을 할 수 없다.
o TD에서는 valign 으로 valign="middle" 을 하면 되지만,
o DIV에서는 안된다.(편법이 있다고 들었음)
o style에서 vertical-align:middle 는 td,span 같은 inline 전용
o 예 : ex1,과 ex2의 2번째 줄을 비교
* DIV도 TABLE(align="center")처럼 중간에 위치하도록 할 수 있다.
o margin:0px auto; 를 style에 설정하면 중간에 위치한다.
* DIV로 전부 디자인하는 것은 비효율적이라고 생각한다.
o 최외각만 DIV로 디자인하고
o 내부에서는 TABLE로 디자인하는 편을 추천한다.
o valign 같은 것 때문에 DIV로만 디자인 하는건 바람직하지 않다고 생각한다.
* 첨부 파일
o css_div_design.html : 현재 이 파일([다른 이름으로 저장] 으로 다운 받기 바람)
o css_div_design.css : DIV디자인용 CSS파일
* 작성자
o 공대여자, mins, mins01
o 홈페이지 : http://mins01.zerock.net
o NateOn&MSN : mins01(at)lycos.co.kr
* 제작
o 2007년 5월 14일 월요일
o 심심해서
o 작성자
+ mins, mins01, 공대여자
+ 홈페이지 : http://mins01.zerock.net
+ NateOn&MSN : mins01(at)lycos.co.kr
* 제약
o 이 것을 볼 때, 읽을 때, 사용할 때 마다 "공대여자는 이쁘다." 를 마음속 깊이 세기셔야합니다
[출처] TABLE 디자인과 DIV 디자인 간략 비교 |작성자 플그림이
반응형