반응형 메서드9 패럴랙스 이펙트(Parallax Effect) : 메뉴 효과 패럴랙스 이펙트(Parallax Effect) : 메뉴 효과 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면 코드 블럭 Javascript parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section01 삶이 있는 한 희망은 있다. 02 Section02 산다는것 그것은 치열한 전투이다. 03 Section03 언제나 현재에 집중할수 있다면 행복할것이다. 04 Section04 신은 용기있는자를 결코 버리지 않는다. 05 Section05 먼저 자신을 비웃어라. 다른 사람이 당신을 비웃기 전에 06 Section0.. 2023. 4. 18. 슬라이드 이펙트 : 이미지 슬라이드(썸네일) 슬라이드 이펙트 : 이미지 슬라이드(썸네일) 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면 코드 블럭 Javascript slider Effect06 슬라이드 이펙트 : 이미지 슬라이드(썸네일) 1 2 3 4 5 6 7 prev next dongjin6539@naver.com 구성 코드는 간단하게 header 구역 부분에 제목 태그, 목록 태그를 사용해서 텍스트를 입력해줍니다. main 구역에는 이미지가 들어갈 구역, 썸네일 이미지가 들어갈 구역, 화살표 버튼을 class 명을 사용해서 만들어줍니다. css는 유형별로 공통으로 사용될 스타일은 파일로 따로 만들어서 링크 태그를 사용해 가지고 와서 입력해주고 유형별로 다르게.. 2023. 4. 14. 퀴즈 이펙트 : 객관식 확인하기 : CBT 유형(json) 보충2 퀴즈 이펙트 : 객관식 확인하기 : CBT 유형(json) 보충2 https://dongjin6539.tistory.com/64, https://dongjin6539.tistory.com/65 블로그 보충 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2 / JSON) / 완성화면 코드 추가 구성 기능사 시험 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 4회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 200.. 2023. 4. 5. 퀴즈 이펙트 : 객관식 확인하기 : CBT 유형(json) 보충 퀴즈 이펙트 : 객관식 확인하기 : CBT 유형(json) 보충 https://dongjin6539.tistory.com/64 블로그 보충 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2 / JSON) / 완성화면 코드 블럭 추가 기능사 시험 정보처리기능사 2010년 2회 웹디자인기능사 2011년 2회 시작하기 구성 모달 창을 만들어줍니다. 모달 창에 문제 유형을 선택하는 것을 만들어줍니다. 시험을 시작하는 버튼을 만들어줍니다. CSS 추가 .cbt__start { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 0.4); z-index: 10000; bac.. 2023. 4. 4. 자바스크립트 이벤트 마무리 문제(2) 자바스크립트 이벤트 마무리 문제(2) 책 : 모던 자바스크립트 프로그래밍의 정석 221페이지 참고 마무리 문제 2 이벤트를 활용해 필요에 따라 표시했다가 감추는 메뉴를 만들어 보겠습니다. 메뉴 아이콘을 클릭하면 메뉴가 표시되고, 다시 클릭하면 메뉴가 숨겨지는 예제를 만들 것입니다. 버튼을 클릭할 때마다 변수와 메뉴에 .active 스타일을 토글하는 소스를 작성해 보세요. 길라잡이 버튼과 메뉴를 가져와서 각각 변수로 저장합니다. 버튼에 click 이벤트가 발생했을 때 실행할 함수를 연결하는데, 이 함수에서는 버튼과 메뉴에 active 클래스 스타일을 토글합니다. 코드 보기 / 완성화면 코드 블럭 📋 Javascript Typerscript Node.js 구성 body 태그에 button 태그와 nav 태그.. 2023. 3. 30. 자바스크립트 이벤트 마무리 문제(1) 자바스크립트 이벤트 마무리 문제(1) 책 : 모던 자바스크립트 프로그래밍의 정석 220페이지 참고 마무리 문제 1 문서에는 하나의 이미지가 삽입되어 있습니다. 이 이미지의 위에 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌었다가 이미지에서 마우스 포인터를 다른 곳으로 이동하면 다시 원래의 이미지로 바뀌는 소스를 작석해 보세요. 길라잡이 문서에서 태그에는 id나 class가 없습니다. 태그 이름을 사용하거나 2개 이상의 선택자를 연결한 후 이미지를 가져와서 변수에 저장합니다. 마우스 포인터를 이미지의 위에 올려놓을 때는 mouseover 이벤트가, 마우스 포인터를 다른 곳으로 이동할 때는 mouseout 이벤트가 발생합니다. 이벤트가 발생했을 때 이미지의 src 속성값을 바꿉니다. 코드 보기 / 완성화.. 2023. 3. 30. 이전 1 2 다음 반응형
