코딩기록

input range를 커스텀 하려고 한다.인풋 버튼이 인풋 밖으로 튀어나오지 않으면 css만으로도 가능하지만여차저차해서 테스트로 만들어봤다. 이미지 보통  .range_fill 인풋 색깔 채워주기 위해 만들었다. .state_image { transition: .2s all; background: salmon; width: 40px; height: 40px; text-indent: 100%; white-space: nowrap; overflow: hidden;}.emotion_state.bad .state_image {background: skyblue;}.emotion_state.good .state_i..

- 타입 스크립트는 타입을 정확히! 명시해주어야함. - 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같은 경우엔 새로운 타입을..

프로젝트 완성하고 얼른 회고록 쓰고싶어서 쓰는 기록 ㅎㅎ 프로젝트 링크 주소입니다! 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 🎨 디자인 💡 그림판이 픽셀아트인 만큼 배경도 그와 어울리는 배경으로 하고싶었습니다...

*생성자 함수 function Item(title, price) { // this = {}; this.title = title; this.price = price; this.showPrice = function() { console.log(`가격은 ${price}원 입니다.`); } //return this; } //new를 안붙이면 그냥 함수실행 const item1 = new Item('인형', 1000); const item2 = new Item('인형2', 2000); const item3 = new Item('인형3', 3000); item3.showPrice(); // => 가격은 3000원 입니다. - 생성자 함수를 사용하면 주석으로 돌린 코드와 같이 실행됨. - new를 안붙이면 그냥 함수..

홈화면 메인 이미지는 인기 1순위의 영화로 해놨지만 지금 1위 포스터가 무서워서 잠시 바비로 바꿔놨다,, 그리고 귀여운 엘리멘탈 노마드 코더 리액트 강의를 듣고 페이지를 좀 더 꾸며보려다가 https://www.youtube.com/watch?v=e8xMcMXqYGw&list=PL9a7QRYt5fqkowXUgTj_tbkFClsPhO5XV 강의를 발견해서 참고하면서 만드는 중이다. 나름 재밌음 ㅎㅎ

우선 두 강의 다 처음부터 끝까지 학습한건 아니고 중간의 백 부분은 학습하지 않은 상태입니다..흑,, javascript 완벽 가이드 : 초급 + 고급 마스터 과정 the web developer 부트캠프 2023 두 강의 다 유명하고 후기도 많은 강의입니다. 처음에 javascript 완벽 가이드를 듣다가 부트캠프 2023을 추가로 들었는데요. 저 같은 경우엔 자바스크립트 이해도가 낮은 상태여서 자바스크립트를 이해하고 제가 사용할 수 있는 것이 중요했습니다. 자바스크립트 실력 마이너스 천만점이었는데 지금은 마이너스 백만점 정도로 조금 성장한 것 같아요. 나름 결과가 있습니다,, 우선 저처럼 비전공자이면서 자바스크립트의 이해도가 낮다! 고 하면 부트캠프 2023을 추천 드립니다. 앞에 html, css강..

$('.date_week').datepicker({ language: 'ko', autoClose: true, startDate:new Date(), navTitles:{ days: 'yyyy년 mm월', /* 일별 달력 타이틀 */ months: 'yyyy년', /* 월별 달력 타이틀 */ years: 'yyyy1 - yyyy2' /* 년별 달력 타이틀 */ } }) const swiperDate = new Swiper('.swiper-container',{ slidesPerView: 1, spaceBetween: 0, allowTouchMove:false, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on..

제목 쓰기가 난감했다. 프로그레스바,, 색깔 나누기,,? 분할,,? 여튼 내가 만들고 싶었던 것은 저런 프로그레스 바 css로 만들려면 만들수야 있겠지만 만약 수치가 바뀔 때마다 조절하는 건 귀찮은 것 같아서 data를 이용했다. //html red % pink % blue % //css .progress-bar { width: 300px; height: 20px; border: 1px solid #ccc; font-size: 0; border-radius: 20px; padding: 2px;} .progress-bar div { height: 100%; display: inline-block; position: relative; } .progress-bar div:first-child{border-ra..

https://codepen.io/hongshii0i0i/pen/LYXRBgL javascript30 scroll event ... codepen.io function debounce(func, wait = 20, immediate = true) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (c..

Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion //css css는 기존에 있던 거에 flex로 배열을 맞춰주었다. .panel p:nth-child(1) {transform: translateY(-100%);} .panel p:nth-child(3) {transform: translateY(100%);} .panel.open { flex: 5; font-size: 40px;} .panel.open p:nth-child(1), .panel.open p:nth-child(3) {transform: translateY(0);} 글자 효과는 transform으로 위치를 바꿔주었고 panel에 flex:5를..