[JavaScript] DOM 모바일앱 흉내내기

DOM을 이용해서 동적인 웹 화면을 만들어보았다.

엄청 재미있었다. 이제좀 querySelector 개념을 이해했다.

모바일앱 흉내내기

• 윤은채 모바일흉내내기

  1. 메인페이지 width를 200%(화면에 넘치게)로 만든다

  2. body 를 overflow: hidden 을 하면 스크롤이 없어진다.

  3. 보여지는 곳 width를 50%로 만든다.

  4. 메인페이지에 클래스 지정을 page1로 해놓고

  5. 아메리카노 버튼을 눌렀을 때 page1이 지워지고 page2로 바뀌게 한다.(js에서작성)

.page1 {
  transform: translateX(0); // 화면의 시작이 x축 0에서 시작한다.
}

.page2 {
  transform: translateX(-50%); // 화면의 시작이 x축 -50으로 시작한다.(왼쪽으로 화면이 당겨진다)
} 

#container {
transition .5s; //넘어갈때 스무쓰하게 넘어간다.
}

body {
  overflow: hidden; //스크롤을 없애준다.
}

document.querySelector(".menu-item").onclick = function() {
  document.querySelector("#container").classList.remove("page1");
  document.querySelector("#container").classList.add("page2");
}

document.querySelector(".back").onclick = function() {
  document.querySelector("#container").classList.remove("page2");
  document.querySelector("#container").classList.add("page1");
}

이번 연습의 핵심은 transform, transition, overflow, querySelector 에 있다.