반응형 css 도와주세요!!
본문
#main{background:#efdbba; width:100%; height:400px;}
.section{overflow:hidden; width:1300px; margin:0 auto;}
.main_img{float:left;}
.main_text{float:left;margin:50px 0 0 200px;}
.main_text p{color:#fff; line-height:130%; font-size:35px;}
.main_text p strong{font-size:40px; font-weight:200;}
.main_btn{
background:none;
border:1px solid #fff;
margin-top:20px;
padding:15px 32px;
text-align:center;
text-decoration: none;
font-size: 16px;
color:#fff;
cursor:pointer;
}
.main_btn:hover{background:#fff; color:#000;}
}
위에 부분은 css 소스입니다
밑에는 html
<div id="main">
<div class="section">
<div class="main_img">
<img src="<?php echo G5_THEME_IMG_URL;?>/main3.png" alt="메인슬라이드1"></div>
<div>
<div class="main_text">
<p><strong>피크는</strong><br>고객의 니즈를 생각하고<br>실현해갑니다</p>
<button class="main_btn"> 자세히 </button>
</div>
</div>
</div>
</div>
</body>
인데 반응형으로 할려면 어떻게 해야할까요 ?..
답변 2
위 소스의 스타일 부분을 보면
섹션 클래스에 폭이 지정되어 있기 때문에 그 부분에서 반응이되지 않습니다.
section { ... width:1300px; ... }
섹센클래스 부분을 width:100% 로 하시면 될것 같네요.
width:100% 섹션 부분에 변경 처리 하면 html에 출력되는 글내용들이 하단으로 정렬되버리네요 ㅠㅠ
위 꾸러기움님 댓글 이요 >>
width:100% 섹션 부분에 변경 처리 하면 html에 출력되는 글내용들이 하단으로 정렬되버리네요 ㅠㅠ
이 부분요
하단 정렬 되는 것이 아니고
.main_img 의 폭과
.main_text 의 공간을 더하면 가로폭 100% 보다 커져서
한줄 내려가서 정렬된 것입니다. 정상적인 반응입니다.
더구나 텍스트 쓰는 곳은 좌측 마진이 200px 나 되다 보니
화면크기에 따라선 글씨도 세로로 길게 쓰여질수 있겠네요
.main_text 나 .main_img 부분에 보더나 배경색을 넣어서 확인해보세요.
@media screen and (min-width: 1080px) {
#main{background:#efdbba; width:100%; height:(사이즈 변경);}
.section{overflow:hidden; width: (사이즈 변경) px; margin:0 auto;}
}
반응형으로하려면 다 사이즈 만져야합니다 위에소스대로요
그렇게 수정을 하면 버튼이랑 글씨들이 다 깨지고,백그라운드 컬러를 #efdbba; 지정해놨는데 FFF 색으로 하얀색으로 바뀝니다.
