레이아웃 질문
본문
그누보드 tail 부분을
이런 레이아웃 으로 만들고 싶습니다.
답변 3
<div id="tail" style="width:100%;height:300px">
</div>
</div>
<div id="layout_02" style="background:#f15a2b;width:60%;height:150px;float:right;">
</div>
<div style="claer:both"></div>
<div id="layout_03" style="background:#ee1c25;width:100%;height:150px;float:left;">
</div>
</div>
이런 레이아웃 형식으로 하시면 되지 않을까.. 싶네요. 스타일시트는 내용 설명 편의상 인라인으로 지정했습니다.
CSS Code
HTML Code
body{_text-align:center}
#wrap{width:600px;margin:0 auto;_text-align:left}
#header{width:100%}
#container{width:100%;display:inline-block}
#container:after{display:block;clear:both;content:''}
.snb{float:left;width:180px}
#content{float:right;width:400px}
#footer{width:100%}
/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */
div{margin:0 0 10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}
#wrap{_width /**/:620px;padding:10px;border:1px solid #bdbdbd;background:#f7f7f7}
#header{margin-top:10px}
#header,#container{padding:15px;border:2px solid #bfbfbf;background:#e5e5e5}
#header,#container{width:auto}
.snb,#content{margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#content{width:380px;height:200px}
#footer{width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
<div id="wrap">
<p>#wrap</p>
<!-- header -->
<div id="header">
<p>#header</p>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<p>#container</p>
<!-- snb -->
<div class="snb">
<p>.snb</p>
</div>
<!-- //snb -->
<!-- content -->
<div id="content">
<p>#content</p>
</div>
<!-- //content -->
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
<p>#footer</p>
</div>
<!-- //footer -->
</div>
이런 레이아웃을 말하시는건가요?? 출처 : 네이버 널리
<div id="tail" style="width:100%;height:300px">
<div id="layout_01" style="background:#fcae3f;width:40%;height:150px;float:left;">
</div>
<div id="layout_02" style="background:#f15a2b;width:60%;height:150px;float:right;">
</div>
<div style="claer:both"></div>
<div id="layout_03" style="background:#ee1c25;width:100%;height:150px;float:left;">
</div>
</div>
이 코드로 하세요. 위에 적은 코드는 그냥 작업한 내용에서 복사 붙여 넣기 했더니 내용이 이상하게 나오네요.
답변을 작성하시기 전에 로그인 해주세요.