SIR
목록으로

레이아웃 질문 채택완료

따따라하기
프로필 보기이 회원 글보기이 회원의 댓글보기
 10년 전 조회 3,859
답변 3
목록
5c7fc11d3a76f4494acd4584cb1967d8_1424920519_4038.jpg

그누보드 tail 부분을

이런 레이아웃 으로 만들고 싶습니다.

#그누보드5 #영카트5 #css #레이아웃

답변 3개

채택된 답변
+20 포인트

Copy 
<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>​

이런 레이아웃 형식으로 하시면 되지 않을까.. 싶네요. 스타일시트는 내용 설명 편의상 인라인으로 지정했습니다. 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Copy 
<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>​

이 코드로 하세요. 위에 적은 코드는 그냥 작업한 내용에서 복사 붙여 넣기 했더니 내용이 이상하게 나오네요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

᠋᠋᠋᠋᠋익명닉네임
프로필 보기이 회원 글보기이 회원의 댓글보기
10년 전

Copy 
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}

HTML Code
Copy 
<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>

이런 레이아웃을 말하시는건가요??               출처 : 네이버 널리
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고