html,css, javascript(jquery) 기초가 있으신가요? 그런데 전체 웹사이트 전체를 어떻게 만들지 잘 모르시나요? 그렇다면 디자인을 참조해서 쇼핑몰 메인페이지 구현을 도전해보세요. 완성된 디자인을 참조하고 기획 의도와 디자인의 상세한 사항들을 파악하여 웹사이트를 구현하는 노하우를 알려드립니다.
javascript에서 브라우저(userAgent)를 구분하는 방식을 이용하여 아래와 같이 작성하여 모바일이라면 특정 폴더 및 파일로 연결할 수 있다.
/**
* 모바일 페이지 강제 이동
*/
//Mobile여부를 구분하기 위함
var uAgent = navigator.userAgent.toLowerCase();
// 아래는 모바일 장치들의 모바일 페이지 접속을위한 스크립트
var mobilePhones = new Array('iphone', 'ipod', 'ipad', 'android', 'blackberry', 'windows ce','nokia', 'webos', 'opera mini', 'sonyericsson', 'opera mobi', 'iemobile');
for (var i = 0; i < mobilePhones.length; i++){
if (uAgent.indexOf(mobilePhones[i]) != -1){
location.href="/mobile/home/main.do";
}
};
일단 중요한 것은 HTML, BODY가 화면의 높이를 모두 사용하고 있어야 한다는 것이다.
HTML에서 WRAPPER의 높이를 아무리 100%를 주어도 WRAPPER의 부모인 HTML, BODY의 높이가 없으면 화면 높이를 모두 사용하지 못하게 된다. 이때 위와 같이 html, body에 height를 100%를 주면 클래스명 wrapper에서 height를 100%로 하면 높이를 브라우저 화면 높이를 모두 사용한다. 만약 html, body에 높이를 주지 않고 하고 싶다면 아래와 같이 wrapper에서 height를 화면(viewport)의 단위인 100vh를 사용하면 된다.
