본문 바로가기

슬라이드2

[EFFCET] 이미지 : 슬라이드 유형02 이미지 슬라이드 : 좌측으로 움직이기 이번 시간에는 2초 지날 때마다 좌측으로 이미지가 바뀌는 슬라이드 형식의 페이지를 작업해보겠습니다.😀 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. ✏️ HTML 스크립트 보기 ! CSS TIP ! 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다. ✏️ CSS 스크립트 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: c.. 2022. 8. 30.

[QUIZ] 퀴즈 만들기06 : 슬라이드 형식 퀴즈 객관식 유형 : 슬라이드 형식 이번 시간에는 퀴즈를 슬라이드 형식으로 제작해봅시다! 그 뒤 정답 갯수와 문제의 총 갯수, 총 점수를 구하는 식을 만들어 봅시다. ! 미리 보기 ! #1. 퀴즈 인포 (문제 모음) 만들기 데이터 저장 타입인 배열안 객체를 통해 각각의 퀴즈 문제를 키와 값으로 데이터화 시켜 저장해줍니다. 지난 퀴즈와 달리 객체안에 또 배열을 만들어서 저장해줍니다. const quizInfo = [ { answerType : "웹디자인기능사 2015년 01회", answerNum : "1", answerAsk : "웹 디자인에 대한 설명으로 거리가 먼 것은?", answerChoice : [ "웹 페이지를 디자인하고 제작하는 것을 의미한다.", "웹 디자인은 개인용 홈페이지 이외에 기업용.. 2022. 8. 25.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바