본문 바로가기

이펙트2

[EFFCET] 이미지 : 슬라이드 유형03 이미지 슬라이드 : 연속적으로 움직이기 지난 시간에는 슬라이드가 좌측으로 이동하는 타입으로 마지막에서 슈루룩~ 첫번째로 돌아갔다면 이번 시간에는 이미지가 자연스럽게 넘어가도록 2초 지날 때마다 이미지가 연속적으로 바뀌는 슬라이드 형식의 페이지를 작업해보겠습니다.😀 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. ✏️ HTML 스크립트 보기 ! CSS TIP ! 1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다. 2. 이미지가 연속적으로 움직일 수 있도록 첫번째 이미지를 6번째에 추가로 넣습니다. (애니메이.. 2022. 9. 2.

퀴즈 문제 만들기04 퀴즈 객관식 유형 자바스크립트를 이용하여 웹디자인기능사 필기문제를 객관식 유형 퀴즈로 여러개 제작해보기 하나의 객관식 문제를 자바스크립트를 이용하여 만들어보자! #1. 선택자 자바스크립트 소스 상수에게 해당명칭(ex: quizType)을 선언해주고 쿼리셀랙터(태그, 아이디, 클래스를 선택할 수 있는 것)로 선택한 요소를 찾아서 넣어보자! //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask".. 2022. 8. 8.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바