WEB_TECH/모바일웹 썸네일형 리스트형 사이트의 모바일 친화성을 알려면 어떻게 해야 할까요. 내 사이트가 모바일에 적합한지 알수 있는 방법이 있습니다. 아래 경로로 가면 휴대기기 친화성테스트라는 페이지가 뜹니다. https://www.google.com/webmasters/tools/mobile-friendly/ 역시 구글인데요. 경로입력창에 내가 알아보고자 하는 페이지 경로를 입력합니다. 제 블로그 경로를 넣고 분석을 클릭하니 약간의 분석시간을 거친후 다음과 같은 결과를 보여줍니다. 티스토리 블로그는 휴대기기 친화적이라고 나오네요. ^_^ 더보기 모바일 웹 기본페이지 이것을 기본페이지로 설정해 놓고 사용하면 편리할 것 같습니다. DOCUMENT 더보기 모바일웹 브라우저 주소창 감주기 모바일기기에서 브라우저 상단은 화면크기를 많이 깍아먹는 결과를 가져옵니다.가능하면 주소입력창을 보이지 않게 해 주면 예쁜 페이지가 됩니다.이렇게 만드는 코드는 다음과 같습니다. 태그 사이에 다음의 자바스크립트 코드를 넣어주면 페이지가 로드를 완료했을 때 문서의 최상단이 화면의 처음부분으로 가기때문에 브라우저의 주소창이 사라진것처럼 보입니다. 더보기 모바일웹 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 다음
