whatisthis?

Unit Converter (수정) React) React JS - practice. 단위변환기 (Unit Conversion) React JS 기초 예제 실습 - 단위 변환기 (Unit Conversion) 분(M) - 시간(H) M = H * 60 H = M / 60 function App() { return ( Unit Converter Minutes Hours ); } ❗❗ 주의 우리는 jsx를 사용중인 것이지 H.. mywebproject.tistory.com index.html style.css @import "./reset.css"; * { margin: 0; box-sizing: border-box; font-family: "Noto Sans KR", sans-serif; } html { ..

React JS 기초 예제 실습 - 단위 변환기 (Unit Conversion) 분(M) - 시간(H) M = H * 60 H = M / 60 function App() { return ( Unit Converter Minutes Hours ); } ❗❗ 주의 우리는 jsx를 사용중인 것이지 HTML을 작성하는게 아니므로 몇가지 주의할 점이 있다. 예를 들면 의 경우에는 자바스크립트에 for이라는 예약어가 이미 존재하므로 에러가 발생하게 된다. BUT > 우리가 지금 import한 react파일은 production용이라 에러는 안뜸. 만약 이걸 development로 바꿔주면 에러가 바로 발생함. class도 마찬가지.(js에 이미 class가 존재하기때문.) >> 따라서 className=""으로 작..

이번 예제는 모달창을 제작하는 position 연습 예제이다. index.html Manage Subscriptions You can follow the discussion on @kimbug without to leave a comment. Cool, huh? Just enter your email address in the form here below and you are all set. Subscribe style.css * { box-sizing: border-box; margin: 0; } body { width: 100%; height: 100vh; font-family: "Nunito Sans", sans-serif; color: #273444; background-color: #e5e5e5..

CSS - Position prac.02 CSS의 포지션 속성으로 아래와 같은 product card를 만드는 예제이다. index.html 그랜드캐년+앤텔롭+홀슈밴드 자유일정 김버그트래블 1인 180,000원 - 처음에는 svg파일을 img태그>a태그로 하려고 했는데 그냥 어떤 기능을 할지 몰라 button으로 마크업한 후에 css로 백그라운드이미지를 입히기로 하였다. style.css * { box-sizing: border-box; margin: 0; } body { font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.02em; background-color: #7d858f; } h1 { font-size: 22px; font-weight: 5..

보호되어 있는 글입니다.

index.html undo redo pencil app.js (function($) { var tool; var canvas = $('paint'); var ctx = canvas.getContext('2d'); var history = { redo_list: [], undo_list: [], saveState: function(canvas, list, keep_redo) { keep_redo = keep_redo || false; if(!keep_redo) { this.redo_list = []; } (list || this.undo_list).push(canvas.toDataURL()); }, undo: function(canvas, ctx) { this.restoreState(canvas, ctx..

map 태그 - name 속성(필수) 맵 참조시 사용할 수 있는 이름. / 공백문자 포함 X / id가 존재할시 name과 동일해야함. index.html Ref. - HTML: Hypertext Markup Language | MDN HTML 요소는 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다. developer.mozilla.org

GitHub - thisisyjin/paintJS: Painting Board made with vanila JS (ref. NomadCoder) Painting Board made with vanila JS (ref. NomadCoder) - GitHub - thisisyjin/paintJS: Painting Board made with vanila JS (ref. NomadCoder) github.com ** 깃헙에 업로드 해두었다. index.html Fill Save style.css @import "./reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Rob..

color.addEventListener("click", handleColorClick)); if (range) { range.addEventListener('input', handleRangeChange); } mode.addEventListener('click', handleModeClick); canvas에 그림을 그리고, 우클릭을 눌러보면 아래와 같이 뜬다. 이미지를 다른 이름으로 저장을 클릭하면 >>위와 같이 이름을 지정해서 저장 가능하다. 이때, 우리가 캔버스의 백그라운드를 설정 안해서 배경색이 투명으로 저장되는 버그가 있다. 따라서, 초기화 부분에 다음과 같은 코드를 추가한다. ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas..

javaScript. Painting App 구현 - (5) Brush Size javaScript. Painting App 구현 - (4) Change Color javaScript. Painting App 구현 - (3) 2D context controls__r.." data-og-host="mywebproject.tistory.com" data-og-source-url="htt.." data-og-host="mywebp.. mywebproject.tistory.com 지난 회차 진행사항 - 브러시 사이즈 조절 function changeSize(event) { // const size = range.value; const size = event.target.value; ctx.lineWidth = ..