코딩일기장 코딩일기장

[코딩애플] part1 세팅방법 1.node js 설치 2.폴더에서 오른클릭 -> Shift + 클릭으로 powershell 오픈 3.npx create-react-app (프로젝트명) 4.src폴더 안에서 App.js에서 코딩 5.터미널 열고 npm start 누르면 실시간 보기 가능 JSX -자바스크립트 안에서 html문법으로 작성할수 있게 해주는 "언어" 데이터 바인딩 : 데이터값을 바로 넣는 문법 중괄호{} -{변수} 이렇게 하면 변수값이 바로 들어감 -id값에도 {}를 활용가능 -인라인 style 문법을 활용할땐 따옴표가 아니라 중괄호{}로 해야함 : {{스타일명:'값'}} function App() { let post = "강남 우동 맛집"; return ( 블로그임 //id값을 데이터바인딩으..

input 박스에 선을 그라데이션으로 넣기(border-radius도 할 수 있는 방법) border: 1px solid transparent; border-radius: 5px; background-image: linear-gradient(white, white), linear-gradient(to right, #A29BFE,#FD79A8); background-origin: border-box; background-clip: content-box, border-box; 1.background-image: linear-gradient(white, white), linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa); : 요소의 배경 이미지를 설정합니다...

1. 텍스트에 그라데이션 넣기 background: linear-gradient(90deg, #A29BFE 1.06%, #FD79A8 78.98%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; "background-clip: text;"와 "-webkit-background-clip: text;"는 CSS에서 사용하는 속성입니다. 이 속성들은 배경 스타일이 텍스트의 전경 대신 텍스트 자체에 적용되도록 하는 역할을 합니다. 다시 말해, 이 속성을 사용하면 텍스트의 색상이 아닌, 텍스트 배경의 이미지나 그라데이션 등이 텍스트 색상으로 보이게 됩니다. 그러나, 이 속성은 모든 브라우저에서 ..

(23.11.26) 목적 : 주식, 코인 자산의 포트폴리오 관리 -내가 가진 주식, 코인의 총 합계, 가격, 수량, 평단가, 현재가, 수익률, 실시간 그래프 표시 -나의 포트폴리오 자산 그래프 표시 1. 로그인 기능 https://velog.io/@910/PHP-MySQL-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0 PHP 로그인/로그아웃 구현하기 세션을 확인해서 로그인이 되어있다면 유저의 아이디와 로그아웃 버튼을 보여주고로그인이 되어있지 않다면 login.php로 이동합니다.login.php에서 입력받은 id, passward으로 쿼리문을 실행해 결과가 velog.io 2. 주식가격, 그래프 불러오..

삭제버튼을 누르면 image테이블에서의 id값에 해당하는 행과 comment테이블에서 해당하는 image_id행들을 모두 제거해야함 image.id = comment.image_id process_image_delete.php

JS let photoAmount = 12; window.addEventListener("scroll",async ()=> { let sh = document.querySelector('html').scrollHeight // 총높이(실제html박스높이) let ch = document.querySelector('html').clientHeight // 브라우저 크기(뷰포트높이) let st = document.querySelector('html').scrollTop // 스크롤위치(스크롤맨위부터 스크롤막대바로위까지) //이미지 채워넣기. if(ch+st >= sh) { for(let i=0; i < 6; i++) { await fetch(`get_image.php?photoAmount=${photoAm..

[코딩애플] Part 3 게임만드는법 1.화면에 네모,원 그릴수 있어야함 2.프레임마다 코드실행이 가능해야함(1초에 60번) : requestAnimationFrame() 3.collision check할수있어야함(충돌시 코드실행 -JS로 간단한 게임만드는 코드 const canvas = document.querySelector('#canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth - 100; canvas.height = window.innerHeight - 100; const img1 = new Image(); const img2 = new Image(); img1.src = 'dinosaur.png' img2..

[코딩애플] Part3 -커스텀 태그 Web Components : JS문법으로 구현할 수 있는 브라우저 기본 기능 의 장점 -html중복제거, 다른 페이지에서 재활용가능 class 클래스 extends HTMLElement { connectedCallback() { this.innerHTML = `이메일인풋이에요` //만든 태그가 HTML에 장착될때 실행할 코드 적는곳 } } customElements.define('custom-input', 클래스); //첫번째 자리에는 만들 태그이름, 두번째에는 클래스 *this는 여기서 새로 생성될 의 요소. -this.innerHTML대신에 document.createElement();를 쓰는게 더 빠름 let element = document.createEle..