DIV와 TABLE 정보
DIV와 TABLE
본문
저는 html 코딩할때 테이블을 만든다면
하나의 페이지를 하나의 테이블로 코딩을 합니다.
(테이블안에 수많은 테이블이 존재하지만 가장 외곽은 하나의 테이블로 되어 있지요)
그런데, 속도면에서 차이가 난다는 주변사람들의 말에 따라서
각각의 테이블로 페이지를 구성해봤습니다.
가령 제가 주로 코딩하는 방식은
<table width=900>
<tr>
<td>
<table width=100%>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width=100%>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
이건거구요.
주변사람들이 권하는 방법은
<table width=900>
<tr>
<td>
</td>
</tr>
</table>
<table width=900>
<tr>
<td>
</td>
</tr>
</table>
이렇습니다.
어떤 방식이 좋은지 정확하게 좀 알려주세요.
그리고 어제부터는 div로 코딩연습을 하고 있는데요.
div에는 table 에 align 처럼 가운데 정렬하는 속성이 없나요?
<div align="center" style="width:900px;">
이렇게 하면 div 안의 내용들만 가운데 정렬이 되고
div 자체는 가운데 정렬이 안되던데요.
div 자체를 가운데 정렬하는 방법이 있나요?
그리고 div 내의 내용에서 table의 valign처럼 상하위치를
지정할수 있는 속성은 없는가요?
누군가 그러던데요.
"이제 테이블(table)은 원래의 목적인 표만들기에만 충실하고 전체적인 레이아웃은 div로 해야 할 때" 라구요.
대세는 table 인가요? div 인가요?
댓글 전체
전 첫번째 방식이 ,,)^ ^,,
그리고 여러가지 효과를 +_+
한번 저장해서 보세요. +_+
불여우와 익스에서는 정상적으로 보여집니다.
<html>
<head>
<title>DIV</title>
</head>
<body topmargin="0" leftmargin="0" >
<style type="text/css">
<!--
body
{
margin:0 0 0 0;
text-align:center;
}
#box
{
width:600px;
margin:0 auto;
text-align:left;
}
#box_1{float:left}
#box_1
{
width:600px;
height:100px;
background-color:#ffeeee;
margin-bottom:50px;
text-align:left;
}
#box_2{float:center}
#box_2
{
margin-top:10px;
margin-left:10px;
text-align:left;
}
#box2
{
width:600px;
text-align:left;
}
#box_3{float:left}
#box_3
{
width:600px;
height:100px;
background-color:#ffeeee;
text-align:left;
}
#box_4{float:center}
#box_4
{
margin-top:10px;
text-align:center;
}
#box_5, #box_6, #box_7{float:left}
#box_5
{
width:600px;
height:100px;
margin-top:30px;
text-align:center;
}
#box_6
{
width:100px;
height:100px;
margin-top:30px;
background-color:#cccccc;
text-align:center;
}
#box_7
{
width:500px;
height:100px;
margin-top:30px;
background-color:#ff3300;
text-align:center;
}
</style>
<div id="box">
<div id="box_1">
<div id="box_2">박스</div>
</div>
<div id="box_3">
<div id="box_4">호호</div>
</div>
<div id="box_5">
<div id="box_6">aa</div>
<div id="box_7">bb</div>
</div>
</div>
</body>
</html>
한번 저장해서 보세요. +_+
불여우와 익스에서는 정상적으로 보여집니다.
<html>
<head>
<title>DIV</title>
</head>
<body topmargin="0" leftmargin="0" >
<style type="text/css">
<!--
body
{
margin:0 0 0 0;
text-align:center;
}
#box
{
width:600px;
margin:0 auto;
text-align:left;
}
#box_1{float:left}
#box_1
{
width:600px;
height:100px;
background-color:#ffeeee;
margin-bottom:50px;
text-align:left;
}
#box_2{float:center}
#box_2
{
margin-top:10px;
margin-left:10px;
text-align:left;
}
#box2
{
width:600px;
text-align:left;
}
#box_3{float:left}
#box_3
{
width:600px;
height:100px;
background-color:#ffeeee;
text-align:left;
}
#box_4{float:center}
#box_4
{
margin-top:10px;
text-align:center;
}
#box_5, #box_6, #box_7{float:left}
#box_5
{
width:600px;
height:100px;
margin-top:30px;
text-align:center;
}
#box_6
{
width:100px;
height:100px;
margin-top:30px;
background-color:#cccccc;
text-align:center;
}
#box_7
{
width:500px;
height:100px;
margin-top:30px;
background-color:#ff3300;
text-align:center;
}
</style>
<div id="box">
<div id="box_1">
<div id="box_2">박스</div>
</div>
<div id="box_3">
<div id="box_4">호호</div>
</div>
<div id="box_5">
<div id="box_6">aa</div>
<div id="box_7">bb</div>
</div>
</div>
</body>
</html>
레이어를 지정하고,
그 안에 레이어를 하나 더 추가하여~
위치를 지정 +_+
딸랑 레이어 하나에 padding 같은 방식으로 텍스트의 위치를 지정하면,
불여우와 익스 따로 놉니다. ㅋㅋㅋ
그 안에 레이어를 하나 더 추가하여~
위치를 지정 +_+
딸랑 레이어 하나에 padding 같은 방식으로 텍스트의 위치를 지정하면,
불여우와 익스 따로 놉니다. ㅋㅋㅋ
역시 이글은 질문게시판에 갔어야 해. 이 바로 위 코맨트는 코드로 인해 너무길잖아.. 흙 ㅜ.ㅡ
생선을 주는것 보단 고기잡는 방법을 가르쳐주는 선에서.. 쿨럭; -_-;;;
생선을 주는것 보단 고기잡는 방법을 가르쳐주는 선에서.. 쿨럭; -_-;;;
div 는 정렬을 스타일로 주셔야 합니다. style="text-align:center" 이 속성은 하위 div까지 모두 먹힙니다. 따라서 그 아래의 블록형 코드는 따로 정의를 하시던지 다시 하나의 블록코드로 감싸서 align의 속성을 바꿔 그 아래의 블록코드에 정의되도록 하는 방법등이 있습니다.
div는 많은 장점이 있습니다만 아직까지 브라우저마다 그지같아서 전 그냥 테이블 사용합니다.
전문코더들이 만든 대형사이트들도 div는 아직까지는 틀을 잡을때라던지 바꿔치기를 쉽게하기위한 용도등으로 사용됩니다.
( 바꿔치기라는건 다양한 방법으로 표현의 방법을 요령으로 익혀 만들어간다는 뜻이지 그 말 자체가 은어형식의 말은 아닙니다. )
가령 아무리 해도 안될경우 스타일에서 id 값에 대한 것을 주고 그 id에 묵인 스타일을 만들어야 적용이 되는 등 아직 골치아픈일들도 많습니다.
간단한 레이아웃은 div와 그 아래 속성들만으로 가능합니다.
제로보드 xe 보시면 .. 결국 서브페이지들중 뒤져보시다보면 보면 table이 들어갑니다.
길게 이야기할만한 사항이 자유게시판에서는 아니므로 줄입니다.
rm -rf / .. -_-; 여기다가 질문을 올리시다니. 미워요.
여름이밴트가 끝나갈 즈음이라 슬슬 잠수를 끝내가는 오리주둥이 올림.
div는 많은 장점이 있습니다만 아직까지 브라우저마다 그지같아서 전 그냥 테이블 사용합니다.
전문코더들이 만든 대형사이트들도 div는 아직까지는 틀을 잡을때라던지 바꿔치기를 쉽게하기위한 용도등으로 사용됩니다.
( 바꿔치기라는건 다양한 방법으로 표현의 방법을 요령으로 익혀 만들어간다는 뜻이지 그 말 자체가 은어형식의 말은 아닙니다. )
가령 아무리 해도 안될경우 스타일에서 id 값에 대한 것을 주고 그 id에 묵인 스타일을 만들어야 적용이 되는 등 아직 골치아픈일들도 많습니다.
간단한 레이아웃은 div와 그 아래 속성들만으로 가능합니다.
제로보드 xe 보시면 .. 결국 서브페이지들중 뒤져보시다보면 보면 table이 들어갑니다.
길게 이야기할만한 사항이 자유게시판에서는 아니므로 줄입니다.
rm -rf / .. -_-; 여기다가 질문을 올리시다니. 미워요.
여름이밴트가 끝나갈 즈음이라 슬슬 잠수를 끝내가는 오리주둥이 올림.
오리주둥이님께서 블로그 스킨을
float:left; (좌측정렬) 또는
float:right; (우측정렬) 또는
margin-left:auto; margin-right:auto; (중앙정렬) 방식으로 사용안하시고,
레이어 두번 사용으로 즉 상위레이어 text-align:center; 하위레이어 text-align:left; 방식으로
정렬 해 놓으셔서 쪼매 고생했어요.
float:left; (좌측정렬) 또는
float:right; (우측정렬) 또는
margin-left:auto; margin-right:auto; (중앙정렬) 방식으로 사용안하시고,
레이어 두번 사용으로 즉 상위레이어 text-align:center; 하위레이어 text-align:left; 방식으로
정렬 해 놓으셔서 쪼매 고생했어요.
왜 그렇게 했는지는 float의 속성에 대해서 좀 더 연구해 보시면 아시게 되실겁니다.
정말이에요~
여러종류의 브라우저가 따로 놀더라구요~
여러종류의 브라우저가 따로 놀더라구요~
유아원님께서는 자신이 구현하고자 하는 DOCTYPE을 지정하지 않으셔서 그런것 같네요
DOCTYPE에 따라서 padding 값 주는 방법이 다릅니다. 따로 노는것은 다시 한번 곰곰히 생각해 보시기 바랍니다.
그리고 <body> 태그에 특별한 아이디나 클래스가 지정 되지 않았는데
<body topmargin="0" leftmargin="0" >를 적고
스타일에 body { margin:0 0 0 0; 중복으로 적을 필요가 없어보입니다.
둘중에 하나는 삭제 하심이....
전 body 스타일안에 text-align:center; 속성을 주면 하위가 모두 따라 적용되서 골치 아프더군요.
body스타일의 text-align:center;를 삭제하시고 아래 방식으로 사용해 보세요
#box {
width:600px;
margin-left:auto; margin-right:auto;
}
DOCTYPE에 따라서 padding 값 주는 방법이 다릅니다. 따로 노는것은 다시 한번 곰곰히 생각해 보시기 바랍니다.
그리고 <body> 태그에 특별한 아이디나 클래스가 지정 되지 않았는데
<body topmargin="0" leftmargin="0" >를 적고
스타일에 body { margin:0 0 0 0; 중복으로 적을 필요가 없어보입니다.
둘중에 하나는 삭제 하심이....
전 body 스타일안에 text-align:center; 속성을 주면 하위가 모두 따라 적용되서 골치 아프더군요.
body스타일의 text-align:center;를 삭제하시고 아래 방식으로 사용해 보세요
#box {
width:600px;
margin-left:auto; margin-right:auto;
}
DOCTYPE 를 지정해도 뭐 이상하게 틀어지는 곳은 없네요. (이런게 있는지 오늘 처음 알았음)
하하하하핫 -_-v
그리고 저는 모든 레이어에 id 값을주기 때문에 골치 아플일은 없답니다. -_-a
하하하하핫 -_-v
그리고 저는 모든 레이어에 id 값을주기 때문에 골치 아플일은 없답니다. -_-a
그럼 제가 하나 문제 낼테니 해결해주시면 매우 감사하겠습니다.
사실 전 이 문제가 해결이 불가능하여 레이어를 한개 이상 쓰거든요? ^^,,
조건
- 가로 600, 세로 200 픽셀의 박스를 만들어라.
- 이 박스는 가운데(좌우로 기준하여 중앙)에 위치하여야 한다. (상하 중앙이 아님)
- 박스내, 상단에서 50픽셀 떨어진 위치에 내용 이라는 글자를 위치하여라.
- 불여우, 익스에서 호환이 되어야 한다.
- 레이어는 단 하나로 하여야 한다.
사실 전 이 문제가 해결이 불가능하여 레이어를 한개 이상 쓰거든요? ^^,,
조건
- 가로 600, 세로 200 픽셀의 박스를 만들어라.
- 이 박스는 가운데(좌우로 기준하여 중앙)에 위치하여야 한다. (상하 중앙이 아님)
- 박스내, 상단에서 50픽셀 떨어진 위치에 내용 이라는 글자를 위치하여라.
- 불여우, 익스에서 호환이 되어야 한다.
- 레이어는 단 하나로 하여야 한다.
body 에는 특별한 스타일값 없이
위의 레이어박스에서 높이와 페딩값만 더 추가 하시면 되겠네요.
#box {
width:600px; height:200px;
margin-left:auto; margin-right:auto;
padding-top:50px;
}
테두리값이 필요하시면 1px 추가시
좌테두리 1px 우테두리 1px 합이 2px 결론은 너비값이 600px을 598px로 수정.
이런식으로 설정하셔야 합니다.
너비와 높이가 변하면 마긴값과 페딩값이 있을 경우 레이어에 맞게 원하는 화면이 나오도록 수정하셔야 합니다.
예로 width:600px일경우 padding:300px 이면 파폭은 밀어내지만 익스에서는 해당값이 안보이는 버그가 있으니 자신의 원하는 스타일 코딩방법에 따른 DOCTYPE 을 지정 해주시면 좋죠.
위의 레이어박스에서 높이와 페딩값만 더 추가 하시면 되겠네요.
#box {
width:600px; height:200px;
margin-left:auto; margin-right:auto;
padding-top:50px;
}
테두리값이 필요하시면 1px 추가시
좌테두리 1px 우테두리 1px 합이 2px 결론은 너비값이 600px을 598px로 수정.
이런식으로 설정하셔야 합니다.
너비와 높이가 변하면 마긴값과 페딩값이 있을 경우 레이어에 맞게 원하는 화면이 나오도록 수정하셔야 합니다.
예로 width:600px일경우 padding:300px 이면 파폭은 밀어내지만 익스에서는 해당값이 안보이는 버그가 있으니 자신의 원하는 스타일 코딩방법에 따른 DOCTYPE 을 지정 해주시면 좋죠.
익스에서는 200픽셀이나 불여우에서는 250픽셀로 됩니다. ^^;;;
방법이 없나요...? ^ ^;;;
방법이 없나요...? ^ ^;;;
http://www.cadvance.org/?leftmenu=doc/include/total_menu.asp&mainpage=doc/css/page_layout/layout_dtd.asp
의 Transitional mode와 Strict mode 에서의 출력결과를 참고 하세요.
기본이 Strict mode 이기 때문에 특별한 선언이 없을 경우 익스에서는 버그값을 그대로 다 뿜어 냅니다.
의 Transitional mode와 Strict mode 에서의 출력결과를 참고 하세요.
기본이 Strict mode 이기 때문에 특별한 선언이 없을 경우 익스에서는 버그값을 그대로 다 뿜어 냅니다.
자기 입맛대로 하는게 가장 좋군요. -_-a
여름 이벤트란 무엇인지요??? .......
써머 바케이션 이랍니다...^^
웹표준2.0 책을 사서 읽어보시면 도움이 되실겁니다~
//테이블
레이아웃을 위해서 테이블 속 테이블 혹은 테이블속 테이블 속 테이블 속 테이블 이런식의 방법은
속도면에서 불리하고 수정시 복잡한 코드로 권하지 않아요.
테이블 속 테이블을 안쓰려고 하다보면 방법이 생기실거예요.
//div 세로 중앙 정렬
세로 정렬 문제는 모든 사이즈를 정확하게 고려해서 마진이나 패딩을 주시는 방법이 좋아요.
높이 30px div에 돋움 12px를 세로 중앙 정렬 하고 싶다면.
30px - 12px = 18px 고로 탑마진이나 패딩을 9px로 지정하시던가 바텀마진을 9px로 하시면 되요.
다른 꼼수들도 있지만. 이렇게 하시면 정확하게 원하는 결과가 출력 될거예요.
이런 중앙 정렬이 번거로우시면 테이블 쓰셔야해요 ㅠ.ㅠ
레이아웃을 위해서 테이블 속 테이블 혹은 테이블속 테이블 속 테이블 속 테이블 이런식의 방법은
속도면에서 불리하고 수정시 복잡한 코드로 권하지 않아요.
테이블 속 테이블을 안쓰려고 하다보면 방법이 생기실거예요.
//div 세로 중앙 정렬
세로 정렬 문제는 모든 사이즈를 정확하게 고려해서 마진이나 패딩을 주시는 방법이 좋아요.
높이 30px div에 돋움 12px를 세로 중앙 정렬 하고 싶다면.
30px - 12px = 18px 고로 탑마진이나 패딩을 9px로 지정하시던가 바텀마진을 9px로 하시면 되요.
다른 꼼수들도 있지만. 이렇게 하시면 정확하게 원하는 결과가 출력 될거예요.
이런 중앙 정렬이 번거로우시면 테이블 쓰셔야해요 ㅠ.ㅠ
