당최 모바일 인덱스 페이지에서 백그라운드 넓이가 증가될기미가 보이지가 않습니다.
본문
http://bbuldduk.com/inmody.php
위의 주소로 가시면 PC에서는 잘나오고 있습니다.
모바일에서 보면은 메인메뉴 아래 index부분 백그라운드 이미지 두개가 잘려 있습니다.
당최 어떻게 맞춰야 할지 모르겠습니다. 모바일에서는 어쨰서 백그라운드 이미지가 잘려서 나오는건지..
혹시나 하고 백그라운드 width를 늘려줬더니 이미지가 점점 늘어나기 시작했습니다. 아이고 잘됫다 이러고
컴퓨터로 보니까 화면 사이즈도 같이 넓어져서 홈페이지아래 가로 스크롤바가 생기지 않겠습니까?
일부러 백그라운드 가로2000px로 잡아서 넣었는데도 모바일에선 짤려서 나옵니다. ㅠ.ㅠ
크롬에서 웹개발자 도구로 수치들을 이리저리 조정해봐도 답이 안나옵니다. 아직 많이 부족한가 봅니다.
HELP ME~!! ㅠ.ㅠ. 감사합니다.
답변 2
.aaa { width:100%; text-align:center; }
.aaa>.bbb { width:25%; display:inline-block; float:left; }
.aaa>.bbb>.ccc { display:block; margin:10px; }
.aaa>.bbb>.ccc>.ddd {display:block; padding:10px; }
<div class="aaa">
<div class="bbb"><div class="ccc"><div class="ddd"><div>text</div></div></div></div>
<div class="bbb"><div class="ccc"><div class="ddd"><div>text</div></div></div></div>
<div class="bbb"><div class="ccc"><div class="ddd"><div>text</div></div></div></div>
<div class="bbb"><div class="ccc"><div class="ddd"><div>text</div></div></div></div>
<div class="bbb"><div class="ccc"><div class="ddd"><div>text</div></div></div></div>
</div>
전 유동적으로 변해야 할때 이런식으로 씁니다.
코드 줄여 쓴다고 bbb 에서 넓이 주고 패딩이나 마진 줄 경우 넓이+패딩 마진 이 총 넓이가 되요
그래서 bbb 안에 ccc를 꽉채우는 display:block 설정 하시고 여기에서 마진 따로 패딩따로 설정을 하구요
여기서 넓이 주면 개털이에요 인라인 속성과 블럭 속성을 이해를 하신다면 쉬울꺼에요
bbb가 넓이를 준 인라인 속성이고 그래서 총 넓이의 25% 만큼 5개가 옆으로 플로팅 되고
또 모바일 브라우저가 얼마든지 상관없이 그 넓이 100% 기준으로 25%의 영역이 5개가 옆으로 플로팅 됩니다.
bbb 안에 div 들은 전부 넓이를 주지 안아도 꽉 차는 블럭 입니다 여기다 넓이 주면 안됩니다!!
여기에 마진이나 패딩을 주면 마진이나 패딩을 포함한 100% 넓이가 나옵니다.
여기서 넓이가 100% 가 넙게 되면 즉 모바일 사이즈 100% 를 넘게 된다면 BG가 짤려 나옵니다.
감사합니당^^ 이렇게 관심을 가져주시다니..ㅜ.ㅜ 흑흑흑..
우리 퍼블리셔가 아래의 소스를 이용해 해결하였습니다. 설명을 들어보니
해상도에 따라 다른게 스타일을 입혔더라구요. 이런 방법도 있었다니 야~!!참으로 갈수록 점점 지능화 되어가는구나
느꼇습니다. 하하하^^;;
@media all and (max-width:1260px){
#sub_area {width:1260px;}
#sub_area .top_area {width:100%;}
li .mai { position:relative; right:500px; margin:0 -500px 0 0;}
li .maie { position:relative; right:400px; margin:0 -400px 0 0;}
}
으.. 아직도 수정 중이시구나.
위 스타일론 내부컨테이너들이 뚫고 나온거구요
테스트 페이지를 만들어서 실행해 보세요
<style>
html,body { height:100%; border:0px; padding:0px; }
* { padding:0px; margin:0px; }
body>div { background:#efefef; width:100%; height:100%; }
body>div>div { background:#000; width:100%; min-height:50px; }
</style>
<div>
<div>header</div>
<div>section</div>
<div>footer</div>
</div>
이렇게 하면 넓이에 맞춰 헤더 섹션 푸터가 유동적으로 움직이면서 딱 맞게 나오는데요
헤더 섹션 푸터에 마진, 페딩, 보더등이 설정되면서 100%+가 됩니다.
이 영역들에서 + 된것이 누적되면서 저만큼 삐져 나온거구요
실 영역은 BG 짤린 부분이 모바일 브라우저 100% 넓이 입니다.
이 영역들을 수정하면서 넓이를 %로 설정하다 어느정도 잡을수가 있구요
보니까 네비영역 이미지들 이 부분이 더 작은 모바일 브라우저에선 또 같은 현상이 나올거에요
이 부분을 미디어 쿼리로 다시 마춰보세요
영역 하나씩 쌓을때 마다 어느 부분이 틀어지나 체크 하시고
틀어질때마다 해결하고 다음으로 넘어가야지
잔득 쌓아 놓고 원인을 찾을고 하면 고혈압으로 쓰러 집니다.
