Mouse Effect 05 Mouse Effect 05 마우스를 움직일 때 가운데에 있는 사진과 글귀가 3D 처럼 움직이는 이펙트를 공부해보았습니다. 01. HTML 사진을 넣을 figure 와 글귀를 감쌀 figcaption을 mouse img 로 감싸 줍니다. 🦢 HTML 코드 We never know the worth of water till the well is dry. 우물이 마르기까지는 물의 가치를 모른다 mousePageX : 0 px mousePageY : 0 px centerPageX : 0 px centerPageY : 0 px maxPageX : 0 px maxPageY : 0 px anglePageX : 0 px anglePageY : 0 px 02. Css 이미지를 고정해주고 애니메이션을 지정해 움직임에 부.. 2022. 9. 28. search Effect 04 search Effect 04 find() 와 map()을 이용하여 검색도 가능하지만, 속성을 클릭 했을 때 설명이 나오는 이펙트를 공부해보았습니다. 01. HTML 설명이 나오는 곳과 검색하는 곳을 구분해줍니다. 🦢 HTML 코드 검색하기 속성을 검색하시면 설명이 표시 됩니다. 전체 속성 갯수 : 0 02. Css 구분하기 위해 본래의 디자인과 잘 어울리도록 작성해줍니다. 🦢 css 코드 .search__desc { border: 2px solid var(--htmlColor); padding: 20px 40px 20px 60px; border-radius: 50px; background-color: var(--htmlColor); width: 80%; margin-bottom: 20px; displa.. 2022. 9. 28. Mouse Effect 04 Mouse Effect 04 마우스를 움직일 때 가운데에 있는 마우스에 따라 움직이는 이펙트를 공부해보았습니다. 01. HTML 배경 위에 figure로 이미지가 있을 박스와 figcaption으로 글귀를 감싸줍니다. 🐱👤 HTML 코드 In order to succeed, we must first believe that we can. 성공하기 위해서, 우리는 먼저 우리 자신이 할 수 있다는 것을 믿어야 한다. 02. Css 이미지를 고정해주고 애니메이션을 지정해 움직임에 부드러움을 주었습니다. 🐱👤 css 코드 .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; fl.. 2022. 9. 22. Mouse Effect 03 Mouse Effect 03 마우스를 움직일 때 뒤에 있는 이미지가 보이는 착시효과를 공부해보았습니다. 01. HTML 마우스 이펙트 01번 만큼 쉬운 구조로 묶었습니다. 🐱👤 HTML 코드 The way to get started is to quit talking and begin doing. 무언가를 시작하려면 말은 멈추고 행동해야 한다. 02. Css 이미지가 사실은 두개 이므로, 배경 말고 보여지는 이미지는 필터를 넣어 밝아지게 만들어줍니다. 또한 background-position 과 background-attachment 으로 이미지가 정중앙에 있게 만듭니다. 🐱👤 css 코드 .mouse__cursor { position: absolute; left: 0; top: 0; width: 20.. 2022. 9. 22. Parallax Effect05 Parallax Effect05 스크롤을 내렸을 때 숫자나, 이미지, 안의 글귀등에게 이질감을 주는 이펙트를 공부하였습니다. 01. HTML 기본적으로는 4번 유형과 같지만, 이해를 돕기 위해 스크롤 탑을 추가하였습니다. 🐇 HTML 코드 01 section1 인간은 패배하도록 만들어진 것은 아니다. 인간은 파괴될 지언정 패배할 수는 없다. 02 section2 사막이 아름다운 것은, 어디엔가 샘을 숨기고 있기 때문이야 03 section3 성공 그 자체에 파멸의 불씨가 들어 있을지도 모른다 04 section4 삶에 후회를 남기지말고, 사랑하는 데 이유를 달지 마세요 05 section5 우리는 인생의 날들을 늘릴수는 없지만, 그 날들에 생기를 불어 넣을 수는 있다. 06 section6 반복되는 하루.. 2022. 9. 20. Parallax Effect04 Parallax Effect04 버튼으로 활용되는 페럴렉스 이펙트 대신 스크롤을 내릴때마다 애니메이션이 보여지는 이펙트 유형을 공부해보았습니다. 01. HTML 이번에는 클릭하여 올라가는 TOP 버튼이나, 메뉴버튼은 사라졌습니다. 보여질때 애니메이션을 활용하는 페럴렉스 이펙트 유형입니다. 💀 HTML 코드 01 section1 인간은 패배하도록 만들어진 것은 아니다. 인간은 파괴될 지언정 패배할 수는 없다. 02 section2 사막이 아름다운 것은, 어디엔가 샘을 숨기고 있기 때문이야 03 section3 성공 그 자체에 파멸의 불씨가 들어 있을지도 모른다 04 section4 삶에 후회를 남기지말고, 사랑하는 데 이유를 달지 마세요 05 section5 우리는 인생의 날들을 늘릴수는 없지만, 그 날들.. 2022. 9. 19. Slider Effect 04 Slider Effect 04 버튼을 눌렀을 때 좌우로 움직일 수 있게 만드는 슬라이트 이펙트를 공부해보았습니다. 첫번째에서 왼쪽을 누른다면 마지막 이미지로 이동할 수 있도록 연결도 해야합니다. 01. HTML HTML에서는 버튼을 추가해줍니다. 💀 HTML 코드 prev next 02. Css Css는 버튼만 추가로 만들었기 때문에, 기본은 sliderEffect03 와 똑같습니다. 💀 CSS 코드 .slider__btn a { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(0,0,0,0.4); text-align: center; transition: all 0.2s.. 2022. 9. 19. mouse Effect 01 mouse Effect 01 마우스를 hover 했을 때, 지정한 위치에 따라 마우스 커서가 변화하는 이펙트를 공부해보았습니다. 01. HTML 마우스를 올렸을 때 변화하는 글귀를 작성했습니다. 👾 HTML 의 코드 보기 Javascript Mouse Effect 01 마우스 이펙트 - 트랜지션 효과 1 2 3 4 5 6 7 Numbing the pain for a while will make it worse when you finally feel it. 고통을 잠시라도 모른 척하면, 나중에 정말 고통을 느낄 때 더 악화되는 법이란다. clientX : 0 px clientY : 0 px offsetX : 0 px offsetY : 0 px pageX : 0 px pageY : 0 px screenX :.. 2022. 9. 12. Parallax Effect 03 Parallax Effect 03 스크롤을 내릴 때엔 메뉴 버튼들이 위로 올라가지만 스크롤을 위로 올리면 메뉴가 다시 내려오는 법과, 스크롤을 끝까지 내렸을 시, TOP 버튼이 나와 위쪽으로 올라가게 하는 이펙트를 배워보았습니다. 01. HTML 페럴렉스 메뉴들이 다시 돌아왔습니다. 그리고 TOP 버튼이 추가 되었습니다. 👾 HTML 의 코드 보기 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 메뉴 6 메뉴 7 메뉴 8 메뉴 9 Top 02. Css 메뉴는 똑같아, 딱히 추가는 안하며 TOP만 보여드리겠습니다. 👾 CSS의 코드 보기 #parallax__top { position: fixed; left: 50%; bottom: -220px; z-index: 10000; transform: translate.. 2022. 9. 12. Parallax Effect 02 Parallax Effect 02 슬라이드를 할 때 사이드 버튼이 active 되는 것과, 버튼을 눌렀을 시 부드럽게 움직이는 이펙트를 제작하였습니다. 먼저 기본 사이트를 제작하는 법 이후, Parallax 사이트를 만들 때 사용하는 메서드나 스크립트를 알려드리겠습니다. 01. HTML 이름을 가졌던 메뉴들이 이번엔 dot으로 변했습니다. 그것을 span으로 감싸, 텍스트가 나오지 않게 만들어줍니다. 🦠 HTML 의 코드 보기 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 메뉴 6 메뉴 7 메뉴 8 메뉴 9 02. Css dot들이 구조나 active가 되었을 때 어떻게 변하는지 css로 작성했습니다. 또한, 선택되었을 때엔 애니메이션을 줍니다. 🦠 CSS의 코드 보기 #parallax__dot { pos.. 2022. 9. 8. Parallax Effect 01 Parallax Effect 슬라이드를 할 때 버튼이 active 되는 것과, 버튼을 눌렀을 시 부드럽게 움직이는 이펙트를 제작하였습니다. 먼저 기본 사이트를 제작하는 법 이후, Parallax 사이트를 만들 때 사용하는 메서드나 스크립트를 알려드리겠습니다. 01. HTML active를 줄 메뉴 버튼들과, 각 글귀가 적힌 section와 배경으로 사용할 이미지를 감싸는 박스가 필요합니다. 🐟 HTML 의 코드 보기 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 메뉴 6 메뉴 7 메뉴 8 메뉴 9 01 section1 인간은 패배하도록 만들어진 것은 아니다. 인간은 파괴될 지언정 패배할 수는 없다. 02 section2 사막이 아름다운 것은, 어디엔가 샘을 숨기고 있기 때문이야 03 section3 성공 .. 2022. 9. 6. 마우스 이펙트 01 마우스 이펙트 01 마우스의 위치를 알려주며, 특정 위치 위에 마우스를 hover 하였을 때 커서가 변화하는 이펙트를 제작하였습니다. 01. HTML 글귀에 마우스 포인터가 올라가 있을 때, 반응을 주기 위해 span으로 p 태그를 감쌌습니다. Numbing the pain for a while will make it worse when you finally feel it. 고통을 잠시라도 모른 척하면, 나중에 정말 고통을 느낄 때 더 악화되는 법이란다. clientX : 0 px clientY : 0 px offsetX : 0 px offsetY : 0 px pageX : 0 px pageY : 0 px screenX : 0 px screenY : 0 px 02. javascript clientX, c.. 2022. 9. 5. 이미지 슬라이드 유형 03 이미지 슬라이드 유형 03 setInterval()를 이용하여 몇 초마다 5개의 이미지가 변하는 유형을 제작하였습니다. 01. HTML 첫번째 sliderEffect의 HTML과 비슷하지만 이미지를 가로로 연결하여 좌로 움직이는 것이기 때문에, 보이기 위한 박스를 만들어 이미지 위에 감쌌습니다. 02. css width값을 4800으로 늘려 복사 붙여넣기 하였을 때 자연스러우도록 하였습니다.. /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; widt.. 2022. 9. 2. 이미지 슬라이드 02 이미지 슬라이드 유형 01 setInterval()를 이용하여 몇 초마다 5개의 이미지가 변하는 유형을 제작하였습니다. 01. HTML 첫번째 sliderEffect의 HTML과 비슷하지만 이미지를 가로로 연결하여 좌로 움직이는 것이기 때문에, 보이기 위한 박스를 만들어 이미지 위에 감쌌습니다. 02. css 가로로 연결하기 위해 position: relative를 부여하고, 원하는 영역만 보기 위해 overflow: hidden으로 가렸습니다. .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 부분 .. 2022. 8. 29. 이미지 슬라이드 01 이미지 슬라이드 유형 01 setInterval()를 이용하여 몇 초마다 5개의 이미지가 변하는 유형을 제작하였습니다. 01. HTML 이미지 위에 두번의 부모를 감쌌습니다. 첫번째 부모는 모두 같은 class를 주었습니다. 02. javascript 아래는 자바 스크립트 입니다. 선택자를 부여하고 약 3000 = 3초에 slider.length인 이미지의 갯수를 움직이면 됩니다. const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = sliderWrap.querySelector(".slider__img") const slider = sliderWrap.querySelectorAll(".slider") let current.. 2022. 8. 29. 퀴즈 유형 06 06. 퀴즈 유형 객관식 문제로 답을 선택하고 정답을 확인했을 때에 여러 문제 중 정답을 맞춘 갯수가 무엇인지, 또한 정답의 갯수가 합격점인지 확인해보았습니다. 자바스크립트입니다. 확인 버튼을 누르고 정답을 확인하면서 몇 문제가 정답인지 또 36문제 이상을 맞춰서 합격인지 아닌지 스크립트를 짜보았습니다. const quizQuestion = document.querySelector(".quiz_question") //문제 번호와 질문 const quizSelects = document.querySelector(".quiz_selects") //객관식 보기 const quizType = document.querySelector(".quiz_type") //문제타입 const quizResult = docu.. 2022. 8. 24. 퀴즈 유형 05 - 점수 05. 퀴즈 유형 객관식 문제로 답을 선택하고 정답을 확인했을 때에 여러 문제 중 정답을 맞춘 갯수가 무엇인지, 또한 정답의 갯수가 합격점인지 확인해보았습니다. 자바스크립트입니다. 확인 버튼을 누르고 정답을 확인하면서 몇 문제가 정답인지 또 36문제 이상을 맞춰서 합격인지 아닌지 스크립트를 짜보았습니다. //선택자 const quizWrap = document.querySelector(".quiz_wrap") ; let quizScore = ""; //문제 출력 const updateQuiz = () => { const exam = []; quizInfo.forEach((question,number)=>{ exam.push(` ${question.answerType} ${question.answerNum.. 2022. 8. 24. 퀴즈 유형 05 60문제 풀어보기 원본 사이트 달려가기 오답노트 2022. 8. 18. 검색 유형 02 검색 유형 02 includes()를 이용하여 단어를 검색하였을 때 정보가 나오도록 작업하는 방식 입니다. 01. HTML 먼저 HTML 입니다. 정리를 해주는건 리스트로 만드는 것은 같지만 데이터가 어떤 것인지 구별하기 위해 data-name 과 data-type 을 넣어 지정해 줄 수 있도록 하였습니다. includes()를 이용하여 검색하기 HTML 태그 검색하기 검색하기 플렉스, 애니메이션, 애니메이션, 기타 등등 유형 별로 검색해보세요! 전체 속성 갯수 : 0 { const cssName = el.dataset.name; //css 속성 모든 값 const cssType = el.dataset.type; //css 속성 모든 값 // console.log(cssName) // "all".incl.. 2022. 8. 17. 검색 유형 01 검색 유형 01 indexOf()를 이용하여 단어를 검색하였을 때 정보가 나오도록 작업하는 방식 입니다. 01. HTML 먼저 HTML 입니다. 정리를 해주는건 리스트로 만드는 것은 같지만 데이터가 어떤 것인지 구별하기 위해 data-name 을 넣어 지정해 줄 수 있도록 하였습니다. indexOf()를 이용하여 검색하기 HTML 태그 검색하기 검색하기 accent-color : accent-color 태그는 일부 요소에서 생성된 사용자 인터페이스 컨트롤의 강조 색상을 설정 합니다. align-content : align-content 태그는 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : align-items 태그는 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. al.. 2022. 8. 16. 퀴즈 유형 04 04. 퀴즈 유형 객관식 문제로 답을 선택하고 정답을 확인했을 때에 true인지 false인지 구별하였습니다.. 자바스크립트입니다. 객체 안에 객체를 넣어, 여러가지 보기를 보여줄 수 있게 하였습니다. //선택자 const quizType = document.querySelector(".quiz_type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz_question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz_question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz_answer .confirm");.. 2022. 8. 8. 퀴즈 유형 03 03. 퀴즈 유형 여러 갯수의 퀴즈를 스크립트로 퀴즈 질문와 번호, 확인 버튼,결과를 도출해보았습니다. 자바스크립트입니다. const에 문제를 저장하였으며, 여러개의 문제를 객체의 배열안에 저장하여 반복 되는 스크립트를 for문이나 forEach문으로 문제와 정보 숨기기, 답을 출력할 수 있게 하였습니다. //선택자 const quizType = document.querySelectorAll(".quiz_type"); //퀴즈 종류 const quizNumber = document.querySelectorAll(".quiz_question .number"); //퀴즈 번호 const quizAsk = document.querySelectorAll(".quiz_question .ask"); //퀴즈 질문 .. 2022. 8. 5. 퀴즈 유형 02 02. 퀴즈 유형 퀴즈를 스크립트로 퀴즈 질문와 번호, 확인 버튼,결과를 도출해보았다. 이번에는 답을 주관식으로 적어 if문을 사용해 참인지 거짓인지 구별할 수 있습니다. 아래는 HTML입니다. 가지고 있는 애니메이션을 가져와 문제를 맞추면 반응할 수 있도록 제재작 하였으며 따로 구형으로 애니메이션을 넣었습니다. 정답입니다. 틀렸습니다. 정답 확인하기 아래는 자바스크립트입니다. function을 화살표 함수로 생략하였으며, toLowerCase().trim()을 사용하여 소문자로도 정답이라고 나올 수 있게 하였습니다. //선택자 const quizType = document.querySelector(".quiz_type"); //퀴즈 종류 const quizNumber = document.querySel.. 2022. 8. 4. 퀴즈 유형 01 01. 퀴즈 유형 퀴즈를 스크립트로 퀴즈 질문와 번호, 확인 버튼,결과를 도출해보았습니다. 아래는 HTML입니다. 가지고 있는 애니메이션을 가져와 문제를 맞추면 반응할 수 있도록 제재작 하였습니다. 정답 확인하기 아래는 자바스크립트입니다. const로 데이터를 저장하고, innerText로 출력하여, 함수로 반응할 수 있게 만들었습니다. //선택자 const quizType = document.querySelector(".quiz_type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz_question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz_question .ask");.. 2022. 8. 4. 이전 1 다음
