웹표준 코딩 질문 하나만 드릴게요^^ 정보
웹표준 코딩 질문 하나만 드릴게요^^
본문
DIV를 이용해서 레이아웃을 잡고 있습니다.
테이블 코딩하면 쉽게 해결 가능한것들이 Div 코딩을 시도하다보니 크고 작은 어려움이
생겨나네요. 도와주세요^^*;
당연히 위의 이미지 처럼 배치하고싶으나.. 2번째 이미지처럼 C가 D 밑으로 배치가 되네요
C와 D의 배치를 바꿔도 마찬가지고요;;
어떻게 수정해야하나요?
<xmp>
-스타일시트-
#view_1{width:800px;height:320px;float:left;margin:10px 0 0 0;}
#view_image{width:300px;height:300px;float:left;t;margin:10px 10px 10px 0px; border:1px solid #E4E4E4;padding:10px;}
#view_2{width:450px;height:250px;float:left;margin:20px 0 0 10;}
#detail_view{width:300px;height:55px;float:left ;}
#buy{width:382px;height:20px;float:left;margin:0px 0 0 10;}
</xmp>
<xmp>
<div id="view_1"> <!-- 상세페이지 왼쪽 부분 800px-->
<div id="view_image">A</div>
<div id="view_2"> B</div>
<div id="buy">C</div>
<div id="detail_view">D</div>
</div>
</xmp>
어떻게 해야 하나요?ㅠ 어렵네요
댓글 전체
스타일
#view_1 {width:800px; margin-top:10px;}
#content{float:left; width:45%; margin-right:10px;}
#aside {float:left; width:width:55%;}
div 이렇게
<div id='view_1">
<div id='content'>
<div id='view_image'>A</div>
<div id='buy'>C</div>
</div>
<div id='aside'>
<div id='view_2'>B</div>
<div id='detail_view'>D</div>
</div>
</div>
스타일과 div 를 이렇게 사용해 보세요
#view_1 {width:800px; margin-top:10px;}
#content{float:left; width:45%; margin-right:10px;}
#aside {float:left; width:width:55%;}
div 이렇게
<div id='view_1">
<div id='content'>
<div id='view_image'>A</div>
<div id='buy'>C</div>
</div>
<div id='aside'>
<div id='view_2'>B</div>
<div id='detail_view'>D</div>
</div>
</div>
스타일과 div 를 이렇게 사용해 보세요
보니까 div 속성들이 뒤죽박죽이네요;;; 당연히 안맞습니다..
그리고 DTD는 선언해주셨나요? 웹표준에 따를려면 DTD를 선언해주셔서 작업해주셔야합니다 ^^
그리고 DTD는 선언해주셨나요? 웹표준에 따를려면 DTD를 선언해주셔서 작업해주셔야합니다 ^^
우선 좌우를 div로 나누고
그 안에서 다시 아래 위로 나누세요.
그 안에서 다시 아래 위로 나누세요.
float이 어려우시면 차리리 position속성을 이용하세요. 그게 편할지도 모르겠네요.ㅎ
<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
div#center {
width:1000px;
}
div#left-top {
width:500px;
height:300px;
float:left;
background:gray;
}
div#right-top {
width:500px;
height:400px;
float:right;
background:black;
}
div#left-bottom {
width:500px;
height:400px;
float:left;
background:red;
}
div#right-bottom {
width:500px;
height:300px;
float:right;
background:blue;
}
</style>
</head>
<body>
<div id="center">
<div id="left-top">
</div>
<div id="right-top">
</div>
<div id="left-bottom">
</div>
<div id="right-bottom">
</div>
</div>
</body>
</html>
이런식으로 해보세요.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
div#center {
width:1000px;
}
div#left-top {
width:500px;
height:300px;
float:left;
background:gray;
}
div#right-top {
width:500px;
height:400px;
float:right;
background:black;
}
div#left-bottom {
width:500px;
height:400px;
float:left;
background:red;
}
div#right-bottom {
width:500px;
height:300px;
float:right;
background:blue;
}
</style>
</head>
<body>
<div id="center">
<div id="left-top">
</div>
<div id="right-top">
</div>
<div id="left-bottom">
</div>
<div id="right-bottom">
</div>
</div>
</body>
</html>
이런식으로 해보세요.
