100S00

슬라이드 이펙트 03 2번은 이미지가 오른쪽에서 왼쪽으로 넘어가게 해주는 슬라이드 효과입니다. htnl에 이미지를 담는 박스 하나가 더 추가 되었고 css와 script 부분이 조금 수정되었습니다. 이미지 전체를 움직이기 위해 inner 박스로 이미지를 감싸 주었습니다. .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /*이미지가 보이는 영역*/ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /*전체 이미지를 감싸고 있는 부모 : ..

슬라이드 이펙트 02 2번은 이미지가 오른쪽에서 왼쪽으로 넘어가게 해주는 슬라이드 효과입니다. htnl에 이미지를 담는 박스 하나가 더 추가 되었고 css와 script 부분이 조금 수정되었습니다. 이미지 전체를 움직이기 위해 inner 박스로 이미지를 감싸 주었습니다. .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /*이미지가 보이는 영역*/ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /*전체 이미지를 감싸고 있는 부모 : ..

슬라이드 이펙트 01 html 코드 이미지를 5개를 넣기 위해 div박스 5개를 만들어 줍니다. .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; width: 800px; height: 450px; overflow: hidden; } .slider { position: absolute; left: 0; top: 0; transition: all 0.4s; } .slider::before { position: absolute; left: 5px; top: 5px; background: rgba(0,0,0,..

오늘은 일러스트를 하루죙일 사용해 그림을 그려 보았다. 펜툴로 이지미를 그리고 shift+w를 사용하여 선으 굵기를 조정해주면 퀄리티가 up !! 그 후 Expan, Expand Appearance를 사용해 이미지를 확장 시킨후 수정 할 수있도록 해줍니다. 채색은 라이브 페인트를 사용하여 이미지에 색을 입혔으며 k를 누르면 단축키로 사용할수있습니다.

마무리 문제 원 투! 원 투! 이벤트 객체를 이용하여 마무리 문제를 풀어보았습니다! 첫 번째 예제 마우스 오버하면 이미지 바꾸기 이미지에 마우스를 오버하면 이미지가 바뀌고 아웃해도 바뀌고 클릭해도 바뀌는 효과를 주어 보았습니다! 첫 째 container img를 선택자로 설정해 변수를 만들어 줍니다. 그 변수 cover에 src를 바꿔줄건데 언제 바꾸냐를 이벤트로 설정해줍니다. addEventListener("mouseover”) 에드이벤트 리스너를 주어 이벤트를 추가 시킨뒤 효과는 마우스 오버 로 줍니다. 오버했을때 이미지의 src를 "img/pc2.jpg” 로 변경해준다~ 로 설정해 주었습니다. 밑에 addEventListener("mouseout”) ,addEventListener("click”)도..

t만들어 온 사이트 완성하기! 사이트 만들기1 여태까지 만들어 온 사이트를 모아 한 페이지로 만들어보았다. 처음엔 head에 메타 태그를 넣어 검색에 노출 되게 해주었다. meta태그란? 태그는 웹 페이지의 HTML 코드에서 사용되며, 웹 브라우저나 검색 엔진 등에게 해당 페이지의 정보를 제공하는 역할을 합니다. 일반적으로 태그 안에 위치하며, 다양한 속성을 사용하여 다양한 정보를 제공할 수 있습니다. 가장 일반적인 태그의 속성으로는 다음과 같은 것들이 있습니다. charset: 페이지의 문자 인코딩 방식을 지정합니다. name: 페이지의 정보의 유형을 지정합니다. 예를 들어, "description"은 페이지의 간단한 요약을 제공합니다. content: name 속성에서 지정한 정보의 내용을 지정합니다..

다음문제로 넘어가보자! Quiz 주관식 확인하기 유형 1 2 3 4 5 6 d w 정답입니다! 오답입니다! 다음 문제 ??점 정답 확인! esansi@naver.com 퀴즈유형 6번은 보기를 선택하고 다음문제 버튼을 누르면 다음 문제로 넘어가는 효과로 만들어 보았다. const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title") const quizQusetion = quizWrap.querySelector(".quiz__question") const quizChoice = quizWrap.querySelector(".quiz__choice") const dogWrap..

See the Pen Untitled by dkdlelw (@dkdlelw) on CodePen.

객관식을 선택하면 정답을 확인하는 유형. Quiz 주관식 확인하기 유형 1 2 3 4 5 d w esansi@naver.com 퀴즈효과5번은 앞의 퀴즈 효과들과는 다르게 메인 내용을 html이 아닌 javascript를 이용하여 넣었다. quiz__wrap안의 내용들을 주석 처리를 하고 자바스크립트로 넣을 것이기 때문에 quiz__wrap을 선택자로 선택한다 const quizWrap = document.querySelector(".quiz__wrap"); 그 뒤로 출력을 updataQuiz로 할 것이기 때문에 안에 문제를 넣어줘야한다. updataQuiz 안에 exam이란 변수를 설정해준다. const updateQuiz = () => { const exam = []; 문제가 들어있는 quizInfo를..

See the Pen Untitled by dkdlelw (@dkdlelw) on CodePen.