모바일웹 썸네일형 리스트형 모바일웹 브라우저 주소창 감주기 모바일기기에서 브라우저 상단은 화면크기를 많이 깍아먹는 결과를 가져옵니다.가능하면 주소입력창을 보이지 않게 해 주면 예쁜 페이지가 됩니다.이렇게 만드는 코드는 다음과 같습니다. 태그 사이에 다음의 자바스크립트 코드를 넣어주면 페이지가 로드를 완료했을 때 문서의 최상단이 화면의 처음부분으로 가기때문에 브라우저의 주소창이 사라진것처럼 보입니다. 더보기 모바일웹 meta 태그를 사용한 페이지 크기 제어 모바일 웹의 기본해상도는 각 모바일 기기의 화면크기에 맞게 나와야 하기 때문에 가로 크기를 device-width 속성을 사용합니다.웹페이지의 크기를 제어하는 태그 속성입니다.---------------------------------------------------------------------------------width=device-width 각 모바일 기기의 해상도에 맞춰서 보일 수 있도록 설정initial-scale= 페이지가 보이는 기본 비율을 설정 ( 아이폰은 scale이 1이면 가로 320px에 맞춰집니다.)maximun-scale= 페이지가 보이는 최대 비율minimum-scale= 페이지가 보이는 최소 비율user-scalable= 모바일 기기에서 웹 페이지의 확대 가능 여부 지정-.. 더보기 미디어쿼리 이미지를 기기별로 다르게 크기를 교체해서 보여주기 해상도가 큰 기기에서는 이미지 사이즈를 크게 해 줘도 되지만 모바일기기에서는 해상도가 큰 이미지는 화면 밖으로 나가게 되어 아주 보기 흉하게 됩니다.이런 현상에 대응하기 위한 방법이 있습니다. 이미지를 640사이즈에 맞추어서 제작하고 2배 축소하면 아이폰사이즈가 되고1.5배 축소하면 안드로이드 사이즈가 되도록 하는 것입니다. 이것은 아주 멋진 방법이 될 것입니다. 다음의 코드를 실행해 봅시다. 이미지 이렇게 하면 pc에서는 640x960이미지가 화면에 뜨는데 아이폰에서는 320x480이미지가 뜨고안드로이드 폰에서는 480x720이미지가 뜹니다. 더보기 이전 1 다음