Front/JS

코드로 배우는 JavaScript

HTML 계층구조 파악 전체를 animation_canvas로 묶고 있고, 이미지를 담당하는 slider_panel, text를 담당하는 slider_text_panel, 버튼을 담당하는 control_panel로 나뉘어져 있다. 슬라이딩 적용 방식 전체 이미지를 연결하여 width = 3000 ,height = 400으로 한 이미지 처럼 만든다. 출력창(animation_canvas)을 width = 600 , height = 400으로 설정하여 보이는 부분을 만든다. 1번의 이미지를 이동시켜 2번의 출력창에 보이게 하기 위해 600px단위로 묶어서 이동하도록 만든다. button 적용 방식 아래 사진처럼 클릭할 때 마다 적용되도록 보이게 하기 위해서 버튼 이미지 5개를 세로로 새워서 한칸씩 만 사용한..