안녕하세요~
CSS 초보자입니다....^^
CSS를 이용한 DIV 레이아웃과 관련하여 2가지 문의를 드려봅니다.
아래 소스로 레이아웃을 잡았습니다.
--------------------------------------------------------------------------
<!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>div 태그로 레이아웃 설정</title>
<style type="text/css">
body { text-align:center; width:100%; height:100%;}
#header {
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 10px 0px;}
#left{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 10px 0px 0px;
float:left;}
#content{
width:650px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;
float:left;}
#right{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 10px;
float:left;}
#footer{
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:10px 0px 0px 0px;
float:left;}
</style>
<head>
<title>div 태그로 레이아웃 설정</title>
<style type="text/css">
body { text-align:center; width:100%; height:100%;}
#header {
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 10px 0px;}
#left{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 10px 0px 0px;
float:left;}
#content{
width:650px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;
float:left;}
#right{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 10px;
float:left;}
#footer{
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:10px 0px 0px 0px;
float:left;}
</style>
</head>
<body leftmargin="3" marginwidth="3" topmargin="3" marginheight="3">
<div id="header">Navigator</div>
<div style="width:990px;">
<div id="left">Left</div>
<div id="content">Content</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
-----------------------------------------------------------------
<궁금증 1>
첨부한 그림에서 보시다시파 "Right" 칸이 아래로 밀려납니다.... ㅡ.ㅡ;;
무엇이 잘못되었는지, 어느 부분을 수정하면 되는지 도움 말씀 부탁드립니다.
<궁금증 2>
첨부한 그림에서 보시면 좌측, 우측에 보시면 파란색 박스로 배너를 달려고 합니다.
인터넷 검색해서 비슷한 유형의 소스들을 퍼다가 붙혀 보았는데... 내공부족으로 안됩니다.... ㅠ.ㅠ
위 소스를 어떻게 구현하면 되는지... 함께 도움 말씀 부탁드립니다~
이곳 부산에는 이제 벛꽃망울둘이 제법 커졌습니다.
다음주면 활짝 만개를 할것 같군요.
주말에 봄내음 맏으면서 즐거운 시간 보내시기 바랍니다.
감사합니다~
2012.4.6
부산에서 SIR 사용자 드림
댓글 13개
cshop
13년 전
일단 div 는 테이블이 아닙니다. div 는 division 의 약자 입니다. 이렇게 생각하시면 쉬워요.
종이가 한장 있습니다. 그 종이를 여러 조각으로 나누는 겁니다. 저 위의 그림은 종이의 넓이가 990 인데 어떻게 divide 하면 100, 160, 650, 100 으로 나눌수 있을까요?
불가능한거죠. 제일 상단의 div 가 100, 160, 650, 100 을 합한 수 보다 더 넓어야 하는겁니다.
그리고 저 위의 레이아웃은 이렇게 짜면 되겠죠.
<style>
.최신글 { padding: 20px;border: 1px solid grey; float: left}
#최신글1 { width:100px;background-color:yellow;}
#최신글2 { width: 100px;background-color:red;}
#최신글3 { width: 100px;background-color:orange;}
#최신글4 { width: 100px;background-color:green;}
.위아래 { width: 500px; background-color:blue;}
}
</style>
<div class="위아래">header</div>
<div id="최신글1" class="최신글">1 </div>
<div id="최신글2" class="최신글">2</div>
<div id="최신글3" class="최신글">3</div>
<div id="최신글4" class="최신글">4</div>
<div class="위아래">footer</div>
확인 안해봤는데, 아마 맞을거에요.
종이가 한장 있습니다. 그 종이를 여러 조각으로 나누는 겁니다. 저 위의 그림은 종이의 넓이가 990 인데 어떻게 divide 하면 100, 160, 650, 100 으로 나눌수 있을까요?
불가능한거죠. 제일 상단의 div 가 100, 160, 650, 100 을 합한 수 보다 더 넓어야 하는겁니다.
그리고 저 위의 레이아웃은 이렇게 짜면 되겠죠.
<style>
.최신글 { padding: 20px;border: 1px solid grey; float: left}
#최신글1 { width:100px;background-color:yellow;}
#최신글2 { width: 100px;background-color:red;}
#최신글3 { width: 100px;background-color:orange;}
#최신글4 { width: 100px;background-color:green;}
.위아래 { width: 500px; background-color:blue;}
}
</style>
<div class="위아래">header</div>
<div id="최신글1" class="최신글">1 </div>
<div id="최신글2" class="최신글">2</div>
<div id="최신글3" class="최신글">3</div>
<div id="최신글4" class="최신글">4</div>
<div class="위아래">footer</div>
확인 안해봤는데, 아마 맞을거에요.
13년 전
일하는 중이라 간단하게 수정해봤습니다.
익스9에서만 테스트해봤습니다.
<!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>div 태그로 레이아웃 설정</title>
<style type="text/css">
body { text-align:center; margin:0; padding:0; width:100%; height:100%;}
#wrapper {
margin:0 auto; width:1210px;
}
#wingleft {
float:left; margin-top:110px; margin-right:10px; width:100px; height:100px; border:1px solid silver; background:yellow;
}
#wingright {
float:right; margin-top:110px; width:100px; height:100px; border:1px solid silver; background:yellow;
}
#wrapperb {
float:left; margin:0 auto; width: 990px;
}
#header {
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px auto 10px;}
#left{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 10px 0px 0px;
float:left;}
#content{
width:650px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;
float:left;}
#right{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; float:right;}
#footer{
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:10px 0px 0px 0px;
float:left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="wingleft">wingleft</div>
<div id="wrapperb">
<div id="header">Navigator</div>
<div style="float:left;width:990px;">
<div id="left">Left</div>
<div id="content">Content</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</div>
<div id="wingright">wingright</div>
</div>
</body>
</html>
익스9에서만 테스트해봤습니다.
<!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>div 태그로 레이아웃 설정</title>
<style type="text/css">
body { text-align:center; margin:0; padding:0; width:100%; height:100%;}
#wrapper {
margin:0 auto; width:1210px;
}
#wingleft {
float:left; margin-top:110px; margin-right:10px; width:100px; height:100px; border:1px solid silver; background:yellow;
}
#wingright {
float:right; margin-top:110px; width:100px; height:100px; border:1px solid silver; background:yellow;
}
#wrapperb {
float:left; margin:0 auto; width: 990px;
}
#header {
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px auto 10px;}
#left{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 10px 0px 0px;
float:left;}
#content{
width:650px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;
float:left;}
#right{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; float:right;}
#footer{
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:10px 0px 0px 0px;
float:left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="wingleft">wingleft</div>
<div id="wrapperb">
<div id="header">Navigator</div>
<div style="float:left;width:990px;">
<div id="left">Left</div>
<div id="content">Content</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</div>
<div id="wingright">wingright</div>
</div>
</body>
</html>
cshop
13년 전
이건 cheating 이야... 왜 wrapper 를 1210px 로 잡아서 씌우냐구요... 저 그림에 wrapper div 가 어디있어요!!!!
ㅋㅋㅋ
ㅋㅋㅋ
13년 전
가운데정렬을 원하실까봐요 ㅋㅋ
제 작은 성의입니다. 부끄부끄
제 작은 성의입니다. 부끄부끄
13년 전
궁금증1 번에 대한 '색다른' 답변:
border도 픽셀을 잡아먹습니다. 그래서 위 예제의 가운데 부분 총 폭은
1+160+1 + 1+650+1 + 1+160+1 > 990
이기에 밀려났습니다. :)
border도 픽셀을 잡아먹습니다. 그래서 위 예제의 가운데 부분 총 폭은
1+160+1 + 1+650+1 + 1+160+1 > 990
이기에 밀려났습니다. :)
13년 전
'정확한' 답변인 거 같은데요. ^^
13년 전
<!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>div 태그로 레이아웃 설정</title>
<style type="text/css">
body { text-align:center; width:100%; height:100%;}
#header {
width:994px; height:100px; background-color:Yellow;border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 10px 0px;}
#left{
width:160px; height:200px; background-color:Yellow;border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 10px 0px 0px;
float:left;}
#content{
width:650px; height:200px; background-color:Yellow;border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;
float:left;}
#right{
width:160px; height:200px; background-color:Yellow;border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 10px;
float:left;}
#footer{
width:994px; height:100px; background-color:Yellow;border:groove 1px silver;
padding:0px 0px 0px 0px; margin:10px 0px 0px 0px;
float:left;}
</style>
</head>
<body leftmargin="3" marginwidth="3" topmargin="3" marginheight="3">
<div id="header">Navigator</div>
<div style="width:996px;">
<div id="left">Left</div>
<div id="content">Content</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div 태그로 레이아웃 설정</title>
<style type="text/css">
body { text-align:center; width:100%; height:100%;}
#header {
width:994px; height:100px; background-color:Yellow;border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 10px 0px;}
#left{
width:160px; height:200px; background-color:Yellow;border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 10px 0px 0px;
float:left;}
#content{
width:650px; height:200px; background-color:Yellow;border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;
float:left;}
#right{
width:160px; height:200px; background-color:Yellow;border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 10px;
float:left;}
#footer{
width:994px; height:100px; background-color:Yellow;border:groove 1px silver;
padding:0px 0px 0px 0px; margin:10px 0px 0px 0px;
float:left;}
</style>
</head>
<body leftmargin="3" marginwidth="3" topmargin="3" marginheight="3">
<div id="header">Navigator</div>
<div style="width:996px;">
<div id="left">Left</div>
<div id="content">Content</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
13년 전
* 아래의 설명은 표준 브라우저를 기준으로 작성함을 알려드립니다.
* 오류없이 작성하려 꽤 노력은 하였지만 혹시라도 작성에 오류가 있다면 알려주시기 바랍니다.
* 설명에 관한 궁금증 및 오류의 지적은 댓글 또는 쪽지로 남겨주시면 참고하여 수정하겠습니다.
<궁금증 1에 대한 답>
1. #header {width:990px; height:100px; background-color:Yellow; border:groove 1px silver; padding:0px 0px 0px 0px; margin:0px 0px 10px 0px;}
- 위의 헤더 소스를 보면 박스 너비가 990px, 높이가 100px, 테두리 (상,하,좌,우) 선의 굵기가 1픽셀입니다.
- 위의 소스는 테두리를 뺀 크기가 너비 990px, 높이가 100px 이라는 뜻이며,
- 1px의 테두리를 그렸다면 실제 너비는 992px, 높이가 102px 이라는 뜻입니다.
2. 그런데 블랙님의 소스를 해석해보면
- #header 의 크기는 테두리 선을 포함하여 너비 992px, 높이 202px 이며
- #left 의 크기는 테두리 선을 포함하여 너비 162px, 높이 202px
- #content 의 크기는 테두리 선을 포함하여 너비 652px, 높이 202px
- #right 의 크기는 테두리 선을 포함하여 너비 162px, 높이 202px 입니다.
3. 여기에서 header의 너비 992px 이며 그 아래에 일렬로 배치하려는 left + content + right 의 너비 합은 976px 이며
left 와 content 사이에 10px의 공간(margin 값)을 주었고, content 와 right 사이에 10px의 공간(margin 값)을 준다면
left, content, right 가 배열되면 실제 너비 (가로) 가 996px 이 됩니다.
4. 그래서 아래와 같이 소스의 수정이 필요합니다. (위의 '아이존' 님의 설명과 같습니다.)
- 수정부분 1 : header 와 footer 의 너비를 994px 로 수정
- 수정부분 2 : <div style="width:990px;"> 을 <div style="width:996px;"> 로 수정
- 아래 -
<!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>div 태그로 레이아웃 설정</title>
<style type="text/css">
body {
text-align:center;
width:100%;
height:100%;
}
#header {
width:994px;
height:100px;
background-color:Yellow;
border:groove 1px silver;
padding:0px 0px 0px 0px;
margin:0px 0px 10px 0px;
}
#left {
width:160px;
height:200px;
background-color:Yellow;
border:groove 1px silver;
padding:0px 0px 0px 0px;
margin:0px 10px 0px 0px;
float:left;
}
#content {
width:650px;
height:200px;
background-color:Yellow;
border:groove 1px silver;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
float:left;
}
#right {
width:160px;
height:200px;
background-color:Yellow;
border:groove 1px silver;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 10px;
float:left;
}
#footer {
width:994px;
height:100px;
background-color:Yellow;
border:groove 1px silver;
padding:0px 0px 0px 0px;
margin:10px 0px 0px 0px;
float:left;
}
</style>
</head>
<body leftmargin="3" marginwidth="3" topmargin="3" marginheight="3">
<div id="header">Navigator</div>
<div style="width:996px;">
<div id="left">Left</div>
<div id="content">Content</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
- 끝 -
<궁금증 2에 대한 답>
1. ' Black' 님이 원하는 페이지를 제작하는 방법은 여러가지가 있지만 제가 애용하며 일반적으로 많이 사용하는 방법의 소스를 아래와 같이 작성합니다.
2. 참고로 ' Black' 님이 원하는 페이지와 유사하게 제작 중인 사이트를 알려드립니다. (현재 제가 제작 중인 사이트로 99.9% 완성된 사이트입니다.)
- 사이트주소 : http://egreenworld.co.kr/
- 아래 예제 미리보기 : http://egreenworld.co.kr/GNU/sirH/sir_black.html (2012년 4월 30일 까지만 게시할 예정입니다.)
- 아래 -
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Div 박스 정렬 연습</title>
<style type="text/css">
#AAA {width: 970px; height:120px; background-color: #FC0; font-size: 13px;font-weight: bold; text-align: left; margin: 0 auto; padding: 5px 0 0 20px;}
#wrap {width: 990px; height:500px; margin :0 auto; position:relative; background-color: #09C;}
#header {width: 990px; height: 100px; margin :0; float:left; background-color: #9C0;}
#left {width: 160px; height: 100px; margin :0 10px 0 0; float:left; background-color: #F60;}
#content {width: 650px; height: 100px; margin :0 10px 0 0; float:left; background-color: #FC3;}
#right {width: 160px; height: 100px; margin :0 auto; float:left; background-color: #F60;}
#wingleft {width: 50px; height: 100px; position: absolute; background-color:#9C0; left: -60px; top: 100px; z-index: 2;}
#footer {width: 990px; height: 100px; margin :0 auto; float:left; background-color: #CC3;}
#wingright {width: 50px; height: 100px; position: absolute; background-color:#9C0; left: 1000px; top: 100px; z-index: 1;}
</style>
</head>
<body>
<div id="AAA">
<p> 이 AAA 박스는 설명글 작성을 위해 임시로 만든 것이니 실제 응용을 하시려면 AAA 박스를 제거하여 응용하시기 바랍니다.</p>
<p>각 박스마다 색상을 넣은 것은 비교와 작업의 편의를 위한 것으로 제가 박스 레이아웃을 구성할 때 박스의 위치 및 크기의 변화를
쉽게 구별해 보기위해</p>
<p>박스 마다 다른 색상을 넣고 작업을 하곤합니다. 그래서 이렇게 박스마다 각각의 색상은 넣었음을 참고하시기 바랍니다.</p>
</div>
<div id="wrap">
<div id="header">header</div>
<div id="wingleft">wingleft</div>
<div id="left"> left</div>
<div id="content">content</div>
<div id="right">right</div>
<div id="wingright">wingright</div>
<div id="footer">footer</div>
</div>
</body>
</html>
- 끝 -
* 오류없이 작성하려 꽤 노력은 하였지만 혹시라도 작성에 오류가 있다면 알려주시기 바랍니다.
* 설명에 관한 궁금증 및 오류의 지적은 댓글 또는 쪽지로 남겨주시면 참고하여 수정하겠습니다.
<궁금증 1에 대한 답>
1. #header {width:990px; height:100px; background-color:Yellow; border:groove 1px silver; padding:0px 0px 0px 0px; margin:0px 0px 10px 0px;}
- 위의 헤더 소스를 보면 박스 너비가 990px, 높이가 100px, 테두리 (상,하,좌,우) 선의 굵기가 1픽셀입니다.
- 위의 소스는 테두리를 뺀 크기가 너비 990px, 높이가 100px 이라는 뜻이며,
- 1px의 테두리를 그렸다면 실제 너비는 992px, 높이가 102px 이라는 뜻입니다.
2. 그런데 블랙님의 소스를 해석해보면
- #header 의 크기는 테두리 선을 포함하여 너비 992px, 높이 202px 이며
- #left 의 크기는 테두리 선을 포함하여 너비 162px, 높이 202px
- #content 의 크기는 테두리 선을 포함하여 너비 652px, 높이 202px
- #right 의 크기는 테두리 선을 포함하여 너비 162px, 높이 202px 입니다.
3. 여기에서 header의 너비 992px 이며 그 아래에 일렬로 배치하려는 left + content + right 의 너비 합은 976px 이며
left 와 content 사이에 10px의 공간(margin 값)을 주었고, content 와 right 사이에 10px의 공간(margin 값)을 준다면
left, content, right 가 배열되면 실제 너비 (가로) 가 996px 이 됩니다.
4. 그래서 아래와 같이 소스의 수정이 필요합니다. (위의 '아이존' 님의 설명과 같습니다.)
- 수정부분 1 : header 와 footer 의 너비를 994px 로 수정
- 수정부분 2 : <div style="width:990px;"> 을 <div style="width:996px;"> 로 수정
- 아래 -
<!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>div 태그로 레이아웃 설정</title>
<style type="text/css">
body {
text-align:center;
width:100%;
height:100%;
}
#header {
width:994px;
height:100px;
background-color:Yellow;
border:groove 1px silver;
padding:0px 0px 0px 0px;
margin:0px 0px 10px 0px;
}
#left {
width:160px;
height:200px;
background-color:Yellow;
border:groove 1px silver;
padding:0px 0px 0px 0px;
margin:0px 10px 0px 0px;
float:left;
}
#content {
width:650px;
height:200px;
background-color:Yellow;
border:groove 1px silver;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
float:left;
}
#right {
width:160px;
height:200px;
background-color:Yellow;
border:groove 1px silver;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 10px;
float:left;
}
#footer {
width:994px;
height:100px;
background-color:Yellow;
border:groove 1px silver;
padding:0px 0px 0px 0px;
margin:10px 0px 0px 0px;
float:left;
}
</style>
</head>
<body leftmargin="3" marginwidth="3" topmargin="3" marginheight="3">
<div id="header">Navigator</div>
<div style="width:996px;">
<div id="left">Left</div>
<div id="content">Content</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
- 끝 -
<궁금증 2에 대한 답>
1. ' Black' 님이 원하는 페이지를 제작하는 방법은 여러가지가 있지만 제가 애용하며 일반적으로 많이 사용하는 방법의 소스를 아래와 같이 작성합니다.
2. 참고로 ' Black' 님이 원하는 페이지와 유사하게 제작 중인 사이트를 알려드립니다. (현재 제가 제작 중인 사이트로 99.9% 완성된 사이트입니다.)
- 사이트주소 : http://egreenworld.co.kr/
- 아래 예제 미리보기 : http://egreenworld.co.kr/GNU/sirH/sir_black.html (2012년 4월 30일 까지만 게시할 예정입니다.)
- 아래 -
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Div 박스 정렬 연습</title>
<style type="text/css">
#AAA {width: 970px; height:120px; background-color: #FC0; font-size: 13px;font-weight: bold; text-align: left; margin: 0 auto; padding: 5px 0 0 20px;}
#wrap {width: 990px; height:500px; margin :0 auto; position:relative; background-color: #09C;}
#header {width: 990px; height: 100px; margin :0; float:left; background-color: #9C0;}
#left {width: 160px; height: 100px; margin :0 10px 0 0; float:left; background-color: #F60;}
#content {width: 650px; height: 100px; margin :0 10px 0 0; float:left; background-color: #FC3;}
#right {width: 160px; height: 100px; margin :0 auto; float:left; background-color: #F60;}
#wingleft {width: 50px; height: 100px; position: absolute; background-color:#9C0; left: -60px; top: 100px; z-index: 2;}
#footer {width: 990px; height: 100px; margin :0 auto; float:left; background-color: #CC3;}
#wingright {width: 50px; height: 100px; position: absolute; background-color:#9C0; left: 1000px; top: 100px; z-index: 1;}
</style>
</head>
<body>
<div id="AAA">
<p> 이 AAA 박스는 설명글 작성을 위해 임시로 만든 것이니 실제 응용을 하시려면 AAA 박스를 제거하여 응용하시기 바랍니다.</p>
<p>각 박스마다 색상을 넣은 것은 비교와 작업의 편의를 위한 것으로 제가 박스 레이아웃을 구성할 때 박스의 위치 및 크기의 변화를
쉽게 구별해 보기위해</p>
<p>박스 마다 다른 색상을 넣고 작업을 하곤합니다. 그래서 이렇게 박스마다 각각의 색상은 넣었음을 참고하시기 바랍니다.</p>
</div>
<div id="wrap">
<div id="header">header</div>
<div id="wingleft">wingleft</div>
<div id="left"> left</div>
<div id="content">content</div>
<div id="right">right</div>
<div id="wingright">wingright</div>
<div id="footer">footer</div>
</div>
</body>
</html>
- 끝 -
Black
13년 전
제가 원하던 내용이 모두 잘 구현되었습니다.
대단히 감사합니다.
대단히 감사합니다.
Black
13년 전
바쁘실텐데 모두들 도움 말씀 정말 감사합니다.
주신 소스를 그대로 응용하여 차근차근 공부를 하였습니다.
제가 원하던 답을 얻었습니다.
아래는 가르려주신 소스대로 올린 html 파일입니다.
기존 소스 http://www.teamif.kr/css1.htm
cshop 님 http://www.teamif.kr/css2.htm
지운아빠 님 http://www.teamif.kr/css3.htm
아이존 님 http://www.teamif.kr/css4.htm
飛展 님 http://www.teamif.kr/css5.htm
다시 한번 감사의 인사를 드립니다.
모두들 건강하시고, 좋은 일만 가득하세요~
주신 소스를 그대로 응용하여 차근차근 공부를 하였습니다.
제가 원하던 답을 얻었습니다.
아래는 가르려주신 소스대로 올린 html 파일입니다.
기존 소스 http://www.teamif.kr/css1.htm
cshop 님 http://www.teamif.kr/css2.htm
지운아빠 님 http://www.teamif.kr/css3.htm
아이존 님 http://www.teamif.kr/css4.htm
飛展 님 http://www.teamif.kr/css5.htm
다시 한번 감사의 인사를 드립니다.
모두들 건강하시고, 좋은 일만 가득하세요~
13년 전
1. border 1px 은 넓이가 2px 넓어져요 160에 border 1px 주면 162px이됩니다
2. left 에 position:relative 주시고 wingleft를 left 내부에 absolute 마추시면됩니다
2. left 에 position:relative 주시고 wingleft를 left 내부에 absolute 마추시면됩니다
13년 전
어렵군요;
13년 전
음
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5230 | 13년 전 | 3071 | ||
| 5229 | 13년 전 | 576 | ||
| 5228 | 13년 전 | 621 | ||
| 5227 | 13년 전 | 725 | ||
| 5226 | 13년 전 | 9181 | ||
| 5225 | 13년 전 | 2191 | ||
| 5224 | 13년 전 | 2605 | ||
| 5223 | 13년 전 | 2580 | ||
| 5222 | 13년 전 | 3146 | ||
| 5221 |
visualp
|
13년 전 | 725 | |
| 5220 |
 Daeng`2 |
13년 전 | 772 | |
| 5219 | 13년 전 | 4665 | ||
| 5218 |
 몽키D팡야 |
13년 전 | 701 | |
| 5217 |
크라이스트
|
13년 전 | 1382 | |
| 5216 | 13년 전 | 1245 | ||
| 5215 | 13년 전 | 1260 | ||
| 5214 | 13년 전 | 1133 | ||
| 5213 | 13년 전 | 688 | ||
| 5212 | 13년 전 | 1367 | ||
| 5211 | 13년 전 | 758 | ||
| 5210 |
visualp
|
13년 전 | 1483 | |
| 5209 |
visualp
|
13년 전 | 1099 | |
| 5208 |
mammoth
|
13년 전 | 737 | |
| 5207 | 13년 전 | 2115 | ||
| 5206 | 13년 전 | 1090 | ||
| 5205 | 13년 전 | 699 | ||
| 5204 |
몽키D팡야 |
13년 전 | 2267 | |
| 5203 | 13년 전 | 1187 | ||
| 5202 | 13년 전 | 1214 | ||
| 5201 |
kastel
|
13년 전 | 1374 | |
| 5200 | 13년 전 | 1087 | ||
| 5199 | 13년 전 | 571 | ||
| 5198 | 13년 전 | 635 | ||
| 5197 | 13년 전 | 1571 | ||
| 5196 | 13년 전 | 788 | ||
| 5195 | 13년 전 | 1798 | ||
| 5194 | 13년 전 | 1300 | ||
| 5193 | 13년 전 | 617 | ||
| 5192 | 13년 전 | 4065 | ||
| 5191 | 13년 전 | 745 | ||
| 5190 |
 미운오리스키 |
13년 전 | 1862 | |
| 5189 | 13년 전 | 1199 | ||
| 5188 | 13년 전 | 1549 | ||
| 5187 |
믹스디자인
|
13년 전 | 817 | |
| 5186 |
 cshop |
13년 전 | 2390 | |
| 5185 | 13년 전 | 1434 | ||
| 5184 | 13년 전 | 896 | ||
| 5183 | 13년 전 | 1406 | ||
| 5182 | 13년 전 | 683 | ||
| 5181 | 13년 전 | 717 | ||
| 5180 |
프리온관리자
|
13년 전 | 717 | |
| 5179 | 13년 전 | 986 | ||
| 5178 | 13년 전 | 650 | ||
| 5177 | 13년 전 | 575 | ||
| 5176 | 13년 전 | 693 | ||
| 5175 | 13년 전 | 1427 | ||
| 5174 | 13년 전 | 871 | ||
| 5173 | 13년 전 | 603 | ||
| 5172 |
 TopSchooL |
13년 전 | 576 | |
| 5171 | 13년 전 | 911 | ||
| 5170 |
KhanSu
|
13년 전 | 705 | |
| 5169 | 13년 전 | 2166 | ||
| 5168 | 13년 전 | 1491 | ||
| 5167 |
sir24
|
13년 전 | 686 | |
| 5166 | 13년 전 | 1753 | ||
| 5165 | 13년 전 | 734 | ||
| 5164 | 13년 전 | 1660 | ||
| 5163 |
몽키D팡야 |
13년 전 | 997 | |
| 5162 |
곰도리푸우
|
13년 전 | 4094 | |
| 5161 |
UltraUCC
|
13년 전 | 1231 | |
| 5160 |
 원숭이123 |
13년 전 | 886 | |
| 5159 |
그런듯아닌듯
|
13년 전 | 545 | |
| 5158 |
TopSchooL |
13년 전 | 521 | |
| 5157 | 13년 전 | 1657 | ||
| 5156 | 13년 전 | 1161 | ||
| 5155 | 13년 전 | 2652 | ||
| 5154 | 13년 전 | 797 | ||
| 5153 | 13년 전 | 790 | ||
| 5152 |
몽키D팡야 |
13년 전 | 629 | |
| 5151 | 13년 전 | 836 | ||
| 5150 |
senseme
|
13년 전 | 560 | |
| 5149 |
워드앤코드
|
13년 전 | 1011 | |
| 5148 | 13년 전 | 706 | ||
| 5147 |
프로프리랜서
|
13년 전 | 908 | |
| 5146 | 13년 전 | 2403 | ||
| 5145 |
투코아미디어
|
13년 전 | 1505 | |
| 5144 |
there007
|
13년 전 | 1512 | |
| 5143 | 13년 전 | 1375 | ||
| 5142 | 13년 전 | 2095 | ||
| 5141 |
silky
|
13년 전 | 767 | |
| 5140 |
silky
|
13년 전 | 645 | |
| 5139 |
silky
|
13년 전 | 1985 | |
| 5138 |
silky
|
13년 전 | 586 | |
| 5137 |
silky
|
13년 전 | 614 | |
| 5136 |
silky
|
13년 전 | 898 | |
| 5135 |
silky
|
13년 전 | 623 | |
| 5134 |
silky
|
13년 전 | 477 | |
| 5133 |
 나는ya테스터 |
13년 전 | 846 | |
| 5132 |
복이219
|
13년 전 | 973 | |
| 5131 |
바부바부팅이
|
13년 전 | 1019 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기