모바일 페이지 코딩할 때 질문
본문
웹 에이전시에서 일하시는 분들은 아실건데요..
640px로 디자인 된 웹 페이지가 있으면
이미지같은 건 width값은 50%로 주는게 맞는건가요?
font-size도 반 값으로 주는 게 맞는건가요?
16px이면 0.5em이런 식으로
헷갈리네요 ㅠㅠ
답변 1
모바일은 모바일기기 각각이 가지고 있는 ratio에 따라 이미지의 해상도가 결정됩니다.
최근까진 거의 1:2비율이였기때문에 2배로 제작하는 것이였고 그것은 PC용 너비를 기준으로 하기 보다는 보여질 모바일 해상도 기준입니다. 가령 320px 의 1:2비율이면 640px로 이미지를 만들어놓으면 최대 1:2비율의 모바일기기에서는 해상도가 맞아서 뿌옇게 보이는 현상이 없어지는 것이죠.
당연히 이미지의 너비는 모바일에서 차지할 너비입니다. 320px의 모바일기기에서 이미지 너비가 100%이면 가로너비 320px 로 맞춰지겠죠. 너비 50%면 160px뿐이 안되겠죠.
답변 감사합니다.
폰트 사이즈같은 경우는 psd디자인 시안 그대로 사용하는게 맞나요?
모바일 평균 폰트크기는 16px이 기준입니다. 물론 이는 서구권기준인데 국내에서는 14~16px 정도가 기본폰트크기의 주류입니다.
이미지에 삽입되는 이미지형폰트의 경우는 직접 모바일기기에서 테스트를 해보셔야합니다. 2배율의 이미지인 640px에서는 적당해보이는 폰트크기도 모바일에서는 가로너비 기준으로 줄어들다보면 매우 작은 경우도 있으니까요.
감사합니다.
마지막으로 질문 하나만 더 드려도 될까요?
저 같은 경우는 PC에서 이미지가 드래그 되는게 싫어 이미지 코딩할 때
background-image:url(); 형식으로 합니다.
모바일 같은 경우도 위처럼 해도 될까요?
드래그때문에 그렇다면 다른 방법을 사용하셔요.
CSS 이벤트 제어(pointer-events ) 속성(http://webdir.tistory.com/506?category=607031) 참고하시어서 드래그를 제거할수 있을겁니다.
모바일에서는 실제원본이미지인 640px를 기준으로 배경이 깔리기때문에 보여지는 구간이 모바일 기기마다 다 달라지겠죠?
기본적으로 모바일에서의 이미지들은 반응형처리 img {max-width: 100%;height: auto;)와 같이 처리되야 합니다.
자세한 답변 정말 감사합니다.
조금 이르지만 즐거운 설 보내세요
