전체 글 172

[Chart.js]x라벨 클릭하면 툴팁 나오게 하기(v4.2.1)

링크에서 조금만 바꿨음 x라벨 위치값 찾았으니까 툴팁도 나오게 할 수 있을 것 같아서 바꿔 봄 html css .chartBox { width: 700px; position: relative; border-radius: 20px; border: solid 3px rgba(54, 162, 235, 1); background: white; } .x_label_tooltip { display: none; position: absolute; bottom: -20px; background:#fff; border: 1px solid red; } .x_label_tooltip.active { display: block; } const data = { labels: ['Mon', 'Tue', 'Wed', 'Thu', ..

언어/Chart.js 2024.01.16

[TypeScript] 기본

- 타입 스크립트는 타입을 정확히! 명시해주어야함. - string, number, boolean, null, undefined ...등 만약 이런 객체를 써야한다면? let data:Restaurant = { name: '식당', category: 'western', address: { city: 'incheon', detail: 'somewhere', zipCode: 123123 }, menu:[ { name: 'rose pasta', price:2000, category: 'pasta' }, { name: '갈릭', price:2000, category: '스테이크' } ] } Restaurant.ts 새 페이지로 만들어서 객체마다 타입을 명시해주고 address와 menu같은 경우엔 새로운 타입을..

언어/TypeScript 2023.12.14

[javascript 토이프로젝트] 픽셀아트 그림판 만들기 회고록

프로젝트 완성하고 얼른 회고록 쓰고싶어서 쓰는 기록 ㅎㅎ 프로젝트 링크 주소입니다! https://yyeojung.github.io/pixel_art_maker/html/paintBoard.html Pixel Art Maker Grid Width Reset Eraser yyeojung.github.io ❤️ 개발 의도 간단하게 그림판을 만들어보고 싶어서 찾아보던 중 픽셀아트로 만들면 좀 더 특별하게 만들 수 있을 것 같아 선정하게 되었습니다. 📅 개발 기간 총 1일(디자인, 개발) 🖥️ 사용 기술 Design tool: Figma Editor: VScode Lang: css, javascript 배포: Github.io 🎨 디자인 💡 그림판이 픽셀아트인 만큼 배경도 그와 어울리는 배경으로 하고싶었습니다...

토이프로젝트 2023.11.11

[React 토이프로젝트] 메모장 회고록

메모장 만들기2 를 만들려다가 회고록을 쓴 김에 퉁치는 포스팅 프로젝트 링크: https://yyeojung.github.io/react_memo MEMO yyeojung.github.io ❤️ 개발 의도 자바스크립트와 리액트 강의를 들은 후 기술 습득을 위해 만들었습니다. 📅 개발 기간 총 4일(디자인 1일, 개발 3일) 🖥️ 사용 기술 Design tool: Figma Editor: VScode Lang: css, React.js, styled-component 배포: Github.io 🎨 디자인 간단한 메모 기능을 할 수 있는 메모장을 만들고 싶었고 그에 맞게 레트로라는 컨셉으로 배경화면까지 디자인하였습니다. 저는 주로 다크모드로만 사용을 하는터라 제가 만드는 프로젝트에도 다크모드 기능을 넣고 싶었..

토이프로젝트 2023.11.11

[React 메모장] 메모장 만들기 1

모양은 이래저래 만들었는데 1. 다크모드 import BgLightMode from '../image/lightmode.png'; import BgDarkMode from '../image/darkmode.png'; import AddMemoLight from '../image/addMemo.png'; import AddMemoDark from '../image/addMemoDark.png'; import backLight from '../image/backLight.png' import backDark from '../image/backDark.png' export const lightTheme = { textColor: '#000', subTextColor: '#000', bgImg: `url(${B..

토이프로젝트 2023.11.08