유썸홈관리 > 홈관리자료실 > CSS를 이용한 DIV 레이아웃

로그인 | 회원가입 | 아이디/비밀번호 찾기

유창화썸넬

유썸모닝웹진

로고스웹

게시판들

뮤직까페

유썸홈관리

open - close

작성일 : 12-04-22 18:52

[기타] CSS를 이용한 DIV 레이아웃

글쓴이 : Morning (211.♡.235.69)

http://sir.co.kr/bbs/board.php?bo_table=pg_html&wr_id=12703 [3054]

        #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>

주님과 함께 모닝커피를

Morning 12-04-22 18:53

211.♡.235.69

<!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>

<!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>

Morning 12-04-22 18:54

211.♡.235.69

<!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>

- 끝 -

<!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>

- 끝 -

Total 167

번호	제 목	글쓴이	날짜	조회

167	[그누소스] 점선긋는 방법	Morning	08-07	6124
166	[소스변경] 스케줄을 위한 날자설정 추가	Morning	08-05	6034
165	[그누소스] 그누보드 모바일폴더 설정	Morning	07-19	8675
164	[소스문법] 심볼릭링크없이, 두개의 그누보드에서 data폴…	Morning	07-19	9613
163	[그누스킨] 질문 게시판이 없어서 글 씁니다. (2)	Array	03-01	6945
162	[그누소스] 검색에서 (1)	Morning	01-28	6345
161	[기타] 그룹여분필드 (1)	Morning	01-28	7042
160	[그누소스] 하나의 계정에 그누보드를 2개이상 연동하는 …	Morning	09-13	6573
159	[그누소스] 댓글에 그림넣기	Morning	07-12	6607
158	[기타] CSS를 이용한 DIV 레이아웃 (2)	Morning	04-22	11555
157	[기타] 관리자비번 잃어버렸을 때에	Morning	04-17	7024
156	[기타] 지워지지않는 디렉토리 지우기 (2)	Morning	04-07	8440
155	[소스변경] 팝업칼렌다 스타일조정	Morning	04-01	6172
154	[그누스킨] 최신글 4개	Morning	03-23	5958
153	[그누스킨] loogoswebU	Morning	03-22	7372

1 2 3 4 5 6 7 8 9 10

Therefore, holy brothers, who share in the heavenly calling,
fix your thoughts on Jesus, the apostle and high priest whom we confess.
Let us fix our eyes on Jesus, the author and perfecter of our faith,
who for the joy set before him endured the cross, scorning its shame,
and sat down at the right hand of the throne of God