모바일웹에서 이미지 사이즈는 어떻게 잡아야하나요?
본문
모바일웹 제작을 시도해볼려고하는데요.
전체 모바일웹 레이아웃 제작의 이미지 사이즈들은 얼마로 잡아야하나요?
그리고 img 에 들어갈 이미지 사이들 얼마로 해야하나요?
답변 5
이미지 태그에 따로 사이즈는 주지 않으며
<style>
img { max-width:100%; height:auto }
</style>
와 같이 사이트 전체 이미지 사이즈는 css 를 통해서 잡아주면 됩니다.
그럼 흔히 말하는 반응형 이미지가 되며 해상도에 따라 사이즈 조절이 자동으로 됩니다.
다만 이미지 작업을 할 때 사이즈는 가로는 640px 로 맞추는게 좋습니다.
이유는 모바일을 가로형으로 화면으로 볼 때 사이즈가 640px 이기 때문에 그걸 감안해서
640px 의 이미지로 제작을 하면 좋습니다.
그럼 당연히 세로형 화면일 때는 640px 에서 비율적으로 줄어들어 보이기 때문입니다.
물론 가로로 꽉 차는 배너이미지 같은 경우입니다.
---------------
레이아웃 자체의 사이즈는 px 는 주면 안됩니다.
모바일에서 가로 사이즈는 % 으로 잡혀야 하며,
시안 작업을 할 때 가로 640px 에 맞춰서 시안 및 이미지 작업을 해야 세로형 즉 320px 360px 등 일 때도 잘 보입니다.
<style>
#warp { width:100%; max-width:640px }
</style>
<div id="warp">
....
</div>
저는 최소 넓이 320px에 맞추고 이미지는 1.5~2배 큰 사이즈 이미지를 서버에 저장해서 css에서 width 값 조정해서 씁니다. 그럼 폰으로 보면 깔끔해 보입니다.
요즘 나오는 디바이스의 비율과 해상도는 천차 만별입니다.
아래의 해상도와 화면비율 위키자료를 참고하시고 최대해상도 에서 작업을 시작
실제 퍼블리싱때는 미디어쿼리를 활용해 각각 분기점별로 체크를 해주셔야 합니다.
<style>
#ex_page {width:100%; max-width:1200px; margin:0 auto; }
@media screen and (max-width: 768px){
#ex_page .img01 {width:100%; }
#ex_page .img01 img {width:100%; height:auto; }
}
</style>
<section id="ex_page">
<div class="img01"><img src="000.jpg" /></div>
</section>
<style type="text/css">
.position{position:relative;width:100%;overflow:hidden}
.position .img-area{display:block;padding:5%}
.position .img-area img{max-width: 100%;}
</style>
<div class="position"><div class="img-area"><img src="이미지" /></div></div>
