![]()
슬라이드 효과 슬라이드 효과를 만들어 보았습니다. CSS Javascript 입니다. setInterval() 메서드를 사용하여 작업하였습니다. currentIndex를 변수로 만들어 카운트를 해주는 방식을 사용하였습니다. 총 이미지는 5장이고 카운트 해서 5가 넘어가면 첫번째 이미지부터 다시 시작하도록 만들었습니다. setInterval은 시간을 1000 = 1초 이고 시간을 설정해 이미지가 넘어가는 시간을 설정할 수 있습니다. javascript 보기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = slider..
![]()
미디어 쿼리(media query) 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로톡이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결하는는 뜻입니다. 태블렛이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbsr를 누르면 기기마다의 해상도도 확인할 수 있고 기기모델도 추가할 수 있습니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 6,7,8 plus 414 736 iPhone 5 320 568 Galaxy S5,S8 360 640 Galaxy Note 8 360 640 iPad Pro..
