파송송의 코딩테스트 공부

[따라만들기] 공룡게임

https://youtu.be/qkTtmgCjHhM const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const dinoImg = new Image(); const cactusImg = new Image(); dinoImg.src = "dino.png"; cactusImg.src = "cuctus_big1.png"; canvas.width = window.innerWidth - 100; //캔버스의 사이즈는 윈도우 사이즈 -100 canvas.height = window.innerHeight - 100; //등장 캐릭터의 속성 object 자료에 저장 const dino = { x : 10, y : ..

[따라만들기] 드롭 다운 메뉴

https://youtu.be/nrd9xjHbIjE 1st menu 2nd menu 2nd menu 2nd menu 2nd menu menu 2nd menu 2nd menu 2nd menu 3rd menu 2nd menu 2nd menu 4th menu 2nd menu 2nd menu 2nd menu Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, voluptatem delectus. Molestias corrupti veniam consequatur et, dolorem quaerat qui quod doloribus, tempore perspiciatis debitis! Quas, nam. Eius voluptas provident iu..

[따라만들기] 간트 차트

https://youtu.be/6-bGYmRSnYI sun mon tue wed thu fri sat Task Task Task Task Task Task Task Task Task /* reset */ :root { --white : #fff; --divider : lightgray; --body : #f5f7f9; } * { padding: 0; margin: 0; box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; color: inherit; } body { background: var(--body); font-size: 16px; font-family: sans-serif; padding-top: 40px; }..

[따라만들기] menu hover animation

https://youtu.be/6-bGYmRSnYI Hover over the links Home About Company Work Clients Contact body { background: #ededed; padding: 0 20px; margin: 0; font-family: 'Open Sans', Arial, sans-serif; } h1 { text-align: center; margin: 80px 0; } .mynav ul { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; flex-wrap: wrap; list-style-type: none; padding: 0; } /* .myna..

[따라만들기] number auto animation

https://youtu.be/pwV40r8IGWQ 0 0 0 0 .num_animation { width: 100px; padding: 20px; background-color: #efca66; font-size: 3em; margin: 0 auto; /* border: 1px solid white; */ text-align: center; color: white; } .num_animation:nth-child(2) { background-color: #ecdab9; } .num_animation:nth-child(3) { background-color: #cec3c8; } .num_animation:nth-child(4) { background-color: #909cac; } const numAni..

[따라만들기] multiple slider

https://youtu.be/ZRCYz0VkNn4 prev next * { margin: 0; padding: 0; } li { list-style: none; } .slide_wrapper { position: relative; width: 960px; /*300*3*60*/ margin: 0 auto; height: 300px; top: 20px; overflow: hidden; } .slides { position: absolute; left : 0; top : 0; /*width: 2610px;*/ /*일단은 슬라이드 개수만큼 넣음*/ transition: left 0.5s ease-out; } .slides li:not(:last-child) { /*막네 빼고 float 넣음*/ float: ..

[따라만들기] cookie popup

https://youtu.be/XtzoyhirKcQ Notice PopUp 쿠키 지우기

[따라만들기] Hover Animation

https://youtu.be/4yUZF7CTpiI Hover over the links But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will freedom you a account of the system, and expound the actual teachings of the great of the truth, travel master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is, but explore those who do no..

[따라만들기] lightbox

https://youtu.be/xKr8OVOqs00 HTML에서 "data-*" 어트리뷰트로 표기하여 데이터셋 속성을 정의합니다. 자바스크립트는 DOM 생성 시점에 "data-" 로 시작하는 속성들을 하나로 모아 "dataset" 맵(Map)으로 따로 모아서 관리합니다. 자바스크립트에서 getAttribute("data-")를 통해서 HTML 어트리뷰트에 접근합니다. 데이터셋 속성 추가 HTML 어트립뷰트 추가 메서드를 사용해 엘리먼트노드.setAttribute("속성명", "속성값"); 방식으로 노드에 데이터셋 속성을 추가합니다. 또는, DOM 프로퍼티 접근 방식으로 엘리먼트노드.dataset.새데이터셋속성이름 = "속성값"; 방법으로도 데이터셋 속성을 추가할 수 있습니다. const img = doc..

[따라만들기] tabs menu

https://youtu.be/T4I5psIHOVA //1. 탭 메뉴를 클릭하면 속성이 href인데 이는 #이 붙어있음 //2. #을 때주고 그 속성명이 있는 클래스를 찾아간다. //3. 그 클래스를 display = "block"으로 해서 보여지게 한다. //4. 그런데 그 전에 기존에 보여졌던건 안보이게 한다. const targetLink = document.querySelectorAll(".tab-menu a"); const tabConten = document.querySelectorAll("#tab-content > div"); for (let i = 0; i < targetLink.length; i++) { targetLink[i].addEventListener("click", (event)..

[따라만들기] Accodion menu

https://youtu.be/T4I5psIHOVA const btnCollapse = document.querySelector("#btn-collapse"); const question = document.querySelectorAll(".panel-question"); const heading = document.querySelectorAll(".panel-heading"); const answer = document.querySelectorAll(".panel-body"); let flag = false //제목을 클릭하면 할 일 heading[0], heading[1] ... //heading 등은 클래스가 다수이므로 반복문으로 여러개는 반복문으로 접근해야한다. for (let i = 0; i <..

[따라만들기] content slider upgrade(auto move)

https://youtu.be/aIq26CBdiaM //문서의 내용이 모두 로드되면 할 일 //대상. // 변수 지정 const slidrWeaper = document.querySelector(".container"); const slideContainer = document.querySelector(".slider-container"); const slide = document.querySelectorAll(".slide"); //li slide const navPrev = document.getElementById("prev"); const navNext = document.getElementById("next"); let slideHight = 0; let currentIndex = 0; let ..

[따라만들기] content slider upgrade(click back)

https://youtu.be/ny-oNKwj2Zk //문서의 내용이 모두 로드되면 할 일 //대상. // 변수 지정 const slidrWeaper = document.querySelector(".container"); const slideContainer = document.querySelector(".slider-container"); const slide = document.querySelectorAll(".slide"); //li slide const navPrev = document.getElementById("prev"); const navNext = document.getElementById("next"); let slideHight = 0; let currentIndex = 0; //높이..

[따라만들기] content_slider(개선전)

https://youtu.be/zBVI-SKRakQ // 변수 지정 const sliderWeaper = document.getElementsByClassName("container"); const sliderContainer = document.getElementsByClassName("slider-container"); const slides = document.getElementsByClassName("slide"); //li slide let currentIndex = 0; let topHeihgt = 0; const navPrev = document.getElementById("prev"); const navNext = document.getElementById("next"); //슬라이드의 높..

[따라만들기] back to top 버튼

https://youtu.be/Vm9ZDyNiq7g 흐름 1. 스크롤의 현재 위치 찾기 2. 스크롤이 맨 위가 아니라면 backTop 버튼 활성화합니다. 3. backTop 버튼을 클릭하면 스크롤바가 천천히 위로 올라갑니다. scrollTop scrollTop을 이용해서 현재 스크롤 위치를 알아옵니다. scrollPos = document.documentElement.scrollTop; className scrollTop이 0이면 맨 위가 아니면 backTop 버튼에 "visible" 클래스 이름 추가합니다. 이렇게 하면 visible 클래스 이름이 활성화 되어 CSS에서 설정한 display 속성이 활성화 되어 보여지게 됩니다. backTop.className = "visible"; document.g..

[따라만들기] modal popup

https://youtu.be/V08wXKHF_Xw Open Modal I'm modal ❌