반응형 css 도와주세요!! 채택완료

꾸러기웅 6년 전 조회 3,899

#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

피크는 고객의 니즈를 생각하고 실현해갑니다

인데 반응형으로 할려면 어떻게 해야할까요 ?..

#그누보드5 #css3 #css #jquery #jsp

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

답변 2개

정렬:

채택된 답변

+20 포인트

비펫3

6년 전

위 소스의 스타일 부분을 보면

섹션 클래스에 폭이 지정되어 있기 때문에 그 부분에서 반응이되지 않습니다.

section { ... width:1300px; ... }

섹센클래스 부분을 width:100% 로 하시면 될것 같네요.

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

답변에 대한 댓글 2개

�

꾸러기웅

6년 전

width:100% 섹션 부분에 변경 처리 하면 html에 출력되는 글내용들이 하단으로 정렬되버리네요 ㅠㅠ

�

팻시

6년 전

위 꾸러기움님 댓글 이요 >>
width:100% 섹션 부분에 변경 처리 하면 html에 출력되는 글내용들이 하단으로 정렬되버리네요 ㅠㅠ
이 부분요
하단 정렬 되는 것이 아니고
.main_img 의 폭과
.main_text 의 공간을 더하면 가로폭 100% 보다 커져서
한줄 내려가서 정렬된 것입니다. 정상적인 반응입니다.
더구나 텍스트 쓰는 곳은 좌측 마진이 200px 나 되다 보니
화면크기에 따라선 글씨도 세로로 길게 쓰여질수 있겠네요

.main_text 나 .main_img 부분에 보더나 배경색을 넣어서 확인해보세요.

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

이이비

6년 전

@media screen and (min-width: 1080px) {

#main{background:#efdbba; width:100%; height:(사이즈 변경);} .section{overflow:hidden; width: (사이즈 변경) px; margin:0 auto;}

}

반응형으로하려면 다 사이즈 만져야합니다 위에소스대로요

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

답변에 대한 댓글 1개

�

꾸러기웅

6년 전

그렇게 수정을 하면 버튼이랑 글씨들이 다 깨지고,백그라운드 컬러를 #efdbba; 지정해놨는데 FFF 색으로 하얀색으로 바뀝니다.

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

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

로그인

반응형 css 도와주세요!! 채택완료

답변 2개

답변에 대한 댓글 2개

답변에 대한 댓글 1개

공유하기