그누보드 QA - 그누보드 수정중에 css 관련해서 문의좀 드립니다.

그누보드 수정중에 css 관련해서 문의좀 드립니다.

초심자 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2017.06.14 19:17:32 조회 2834 (125.♡.♡.157)

본문

<!doctype html>
<head>
<style>
#wrap {max-width:800px; margin:0 auto;}
.banner1, .banner2, .banner3 { float:left; text-align:center;}
.banner1 {width:200px; background-color:red;}
.banner2 {width:300px; background-color:green;}
.banner3 {width:300px; background-color:yellow;}
</style>
</head>

</body>
</html>
위의 소스로 배너3개가 한줄로 가운데 정열되있는데요. 배너1,배너2,배너3

float:left; 영향으로 가로줄로 붙어있으니, 줄어들어도 왼쪽으로붙어서 쌓이는데요...

브라우저폭이 최소로 줄어들수록, 아래처럼 화면 가운데로 정렬된 상태로 쌓이도록 하고싶습니다.

어떻게 css 를 만들어야 될지...질문드립니다.

배너1

배너2

배너3

#css #css정렬 #레이아웃

답변 2

지운아빠 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2017-06-14 22:47:27 112.♡.♡.239

http://minsup.kr/study/170614/189291.html


<!doctype html>
<html lang="ko">
 
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="MINSUP.KR">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
 
<style>
body, p {margin:0}
 
#wrap {max-width:800px;margin:0 auto 30px}
#wrap:after {display:block;visibility:hidden;clear:both;content:''}
.banner { text-align:center;}
.banner1 {width:200px; background-color:red;}
.banner2 {width:300px; background-color:green;}
.banner3 {width:300px; background-color:yellow;}
 
@media all and (min-width:800px) {
/* 800px 이상일 때 적용되는 스타일 */
.banner {float:left}
}
 
@media all and (max-width:799px) {
/* 799px 이하일 때 적용되는 스타일 */
.banner {margin:0 auto}
}
</style>
</head>
 
<body>
 
<div id="wrap">
    <div class="banner banner1">배너1</div>
    <div class="banner banner2">배너2</div>
    <div class="banner banner3">배너3</div>
</div>
 
<p>
    아래에 따라올 컨텐츠
</p>
 
</body>
</html>