끄적끄적

버튼 기존속성 한방에 지우기 button { all: unset; }

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 8. 7. 22:50

0. Adding Images 1.filt input html 추가 & const & eventListener추가 ============================ const fileInput = document.getElementById("file"); fileInput.addEventListener("change", onFileChange); 브라우저의 자바스크립트는 파일을 읽을 수 없음 유저가 파일을 선택했을때만 자바스크립트에게 보이게 됨 (브라우저의 메모리에 존재) 2. 파일에 접근가능한 방법 : 파일의 url을 사용 (브라우저 메모리의 해당부분의 url이 필요) createObjectURL function onFileChange(event) { const file = event.target.f..

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 8. 7. 17:08

2. Painting Board 2.0 painting Lines 좀바꿧음 . 맨처음moveTo(0,0) or 주석풀면 으로하면 선으로 그려짐 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // context : brush임 canvas.width = 800; canvas.height = 800; let x = 0; let y = 0; ctx.lineWidth = 2; const colors = [ "#ffeaa7", "#e84393", "#fab1a0", "#ff7675", "#fd79a8", "#e17055", "#d63031", ]; function onMousemove(event) { ctx..

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 8. 3. 21:58

1.1 power of Canvas html엔 이거한줄만 넣음

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 8. 1. 22:19

setInterval(function, time); setTimeout(function, time); const date = new Date(); console.log(date.getDate()); //25 console.log(date.getFullYear()); //2022 console.log(date.getHours()); //16 console.log(date.getMinutes()); //56 console.log(date.getSeconds()); //25 5.2 PadStart (method) String.padStart(maxLength: number, fillString?: string | undefined): string Pads the current string with a give..

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 7. 25. 20:33

기본셋팅 Blocks, Element Modifiers (BEM) /* Block component */ .btn {} /* Element that depends upon the block */ .btn__price {} /* Modifier that changes the style of the block */ .btn--orange {} .btn--big {} ==================================== $9.99 Subscribe https://css-tricks.com/bem-101/ BEM 101 | CSS-Tricks The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch..

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 7. 11. 13:04

div 와 유사한 semantic태그 (content sectioning) header main footer ElementDescription HTML 요소는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다. HTML 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. HTML 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다. HTML 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다. HTML 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니..

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 7. 5. 16:44

과제필기 일부 https://replit.com/@YoungjuJang/8NotableInvolvedBackslash#style.css footer div:first-child span { display:block; transform:rotateZ(90deg); } footer div:last-child span { display:block; transform:rotateZ(-90deg) translateX(110px); } To Clone: https://besthorrorscenes.com/ https://paint-box.com/ http://10x19.co/ http://www.z-o-o.fr/ https://schwartzmedia.com.au/ https://tolv.dk/ https://ro..

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 6. 29. 10:39

variables nesting partials mixins extend responsive mixins content gulp : compile, transform 하는 nodeJS package임 새코드를 오래된 코드로 or scss, sass 를 평범한 css로 바꾸는 것 깃 copy ( https://github.com/nomadcoders/scss-masterclass.git )하고 npm i && npm run dev (or) yarn &&yarn dev npm install --global yarn gulpfile.babel.js >> 이 파일의 import sass from "gulp-sass"; >> sass.compiler = require("node-sass"); >>두줄 지우고 co..

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 6. 25. 23:09

Grid Garden - CSS grid 속성 배우기 게임 (cssgridgarden.com) Grid Garden A game for learning CSS grid layout cssgridgarden.com grid-template-columns grid-template-rows column-gap row-gap gap grid-template-areas grid-column-start grid-column-end grid-row-start grid-row-end grid-column grid-row grid-template justify-items align-items place-items justify-content align-content place-content justify-self ali..

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 6. 17. 12:59

Flexbox Froggy - CSS flexbox 속성 배우기 게임 Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com justify-content align-items : 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정 order (개별용) align-self (개별용) flex-direction flex-wrap flex-flow : flex-direction + flex-wrap align-content : 여러 줄들 사이의 간격을 지정 0. 적용할 부모속성에 아래요소 기본으로 들어가야함 display: flex; 1. flexbox axis - 기본 flex direction의 main axis : 수평방향임 (== flex..

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 6. 16. 18:08

함수 parseInt("15") >> 숫자아닌거 들어오면 NaN return isNaN(agr) >> true / false : 숫자아니면 true (not a number) a && b // a || b 객체접근방법 2가지 https://medium.com/sjk5766/javascript-object-key-vs-object-key-%EC%B0%A8%EC%9D%B4-3c21eb49b763 const player = { name: "nico", points: 10, fat: true, }; console.log(player.name); console.log(player["name"]); ------------------------------- var a = { b : 1, c : 2 } for (key..

노마드/바닐라&csslayout & 코코아톡 & 그림앱 2022. 6. 15. 18:05