파송송의 코딩테스트 공부

[따라만들기] 공룡게임

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..

HTML 태그 : form

input 태그 앞에 라벨링을 해줄 수 있습니다. 따로 쓸 경우 태그 안에는 for=""를 통해서 태그는 id=""를 통해서 연결시켜줍니다. 한꺼번에 쓸 경우에는 태그 안에 태그를 넣어줍니다. 과 으로 버튼 만들수 있고, 도 버튼을 만들수 있습니다. 이 두개의 차이점은 태그의 value 특성에는 텍스트만 입력해야 하지만, 태그에는 다른 컨텐츠(, 등)를 추가할 수 있습니다. 를 통해서 선택 리스트를 만들 수 있습니다. 또한 을 통해서 묶어서 표현 가능합니다. HTML 태그 한눈에 보기 좋은 사이트 https://heropy.blog/2019/05/26/html-elements/

HTML 태그 : img의 srcset, size

반응형 이미지(Responsive images) srcset은 브라우저에게 제시할 이미지 목록과 그 크기를 정의한다. 각 쉼표 앞에 이렇게 적는다. 이미지 파일명 (elva-fairy-480w.jpg.) 공백 이미지 고유 픽셀 너비 (480w) — px이 아니라 w 단위를 사용한다는 데 주의하라. 이것은 이미지의 실제 사이즈인데, 컴퓨터에서 이미지를 확인하면 찾을 수 있다. (예컨대, 맥에서는 파인더에서 이미지를 선택하고 Cmd + I를 눌러 정보를 표시 할 수 있다). sizes는 미디어 조건문들을 정의하고(예를 들면, 화면 크기) 특정 미디어 조건문이 참일 때 어떤 이미지 크기가 최적인지 나타낸다(앞서 언급한 힌트). 이 경우, 각 쉼표 전에 이렇게 쓴다. 미디어 조건문 ((max-width:480p..

HTML 태그 : ol, ul, li

HTML 요소는 순서가 있는 목록(order list)을 나타냅니다. Mix flour, baking powder, sugar, and salt. In another bowl, mix eggs, milk, and oil. Stir both mixtures together. Fill muffin tray 3/4 full. Bake for 20 minutes. type항목을 셀 때 사용할 카운터 유형. 'a'는 소문자 알파벳, 'A'는 대문자 알파벳, 'i'는 소문자 로마 숫자, 'I'는 대문자 로마 숫자, '1' 는 숫자(기본값)을 나타냅니다. Introduction List of Greivances Conclusion 결과 Introduction List of Greivances Conclusion st..

HTML 태그 : 가끔 사용

언젠가는 사용할법한 HTML 태그의 종류의 일부를 정리해보도록 하겠습니다. HTML 요소는 하나의 문단을 나타냅니다. : 인라인 인용문 요소 HTML 요소는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. 는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인용문은 요소를 사용하세요. HTML 요소는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. 결과 미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용합니다. ** ** * * * * * ** * * * * 결과 ** ** * * * * * ** * * * * 아래첨자를 넣고 싶을 때 사용합니다. subscript를 의미합니다. 이것은 ..

[따라만들기] 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 ..