Gentleman'study 젠틀맨

테이블 수정 필드 추가하기 ALTER TABLE 테이블명 ADD 추가할 필드명 AFTER 필드명 위치; ALTER TABLE myMember ADD youGender enum('m','w','x') default 'x' comment "남성은 m, 여성은 w" AFTER youBirth; mysql> desc myMember; +------------+-------------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +------------+-------------------+------+-----+---------+----------------+ | myMemberID | i..

테이블 테이블 만들기 create table 테이블 이름; CREATE TABLE myMember ( memberID int(10) unsigned auto_increment, youEmail varchar(40) NOT NULL, youName varchar(20) NOT NULL, youPass varchar(20) NOT NULL, youBirth varchar(12) NOT NULL, youAge varchar(20) NOT NULL, youPhone int(20) NOT NULL, regTime int(11) NOT NULL, PRIMARY KEY (memberID) ) charset=utf8; 테이블 전체 보기 show tables; mysql> show tables; +------------..

데이터베이스 데이터베이스 만들기 create database 데이터베이스 이름; mysql> create database sample01; Query OK, 1 row affected (0.00 sec) 데이터베이스 보기 show databases; mysql> show databases; +--------------------+ | Database | +--------------------+ | information_schema | | mysql | | performance_schema | | sample01 | | sys | +--------------------+ 5 rows in set (0.00 sec) 데이터베이스 사용 use 데이터베이스 이름; mysql> use sample01; Datab..

MySQL 설치 MAMP 설치 MySQL 실행 윈도우 : cd MAMP/bin/mysql/bin 로그인 : mysql -uroot -proot C:\MAMP\bin\mysql\bin>mysql -uroot -proot mysql: [Warning] Using a password on the command line interface can be insecure. Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 6 Server version: 5.7.24 MySQL Community Server (GPL) Copyright (c) 2000, 2018, Oracle and/or its affiliates. ..

function getTwoDecimal(num) { return parseFloat(num.toFixed(2) + 0.5); } const mouse = { decimal(coord) { return getTwoDecimal(coord / 1000); }, x(e) { return Math.abs(e.clientX - window.innerWidth / 2); }, y(e) { return Math.abs(e.clientY - window.innerHeight / 2); } }; const changeTextAlphaVal = (txt, e) => { const root = document.querySelector(":root"); const cssVar = "--alpha"; const current..

자바스크립트를 통해 타자게임을 만들어 보았다. .split() 을 통해 각 단어단어를 쪼개고 input박스의 밸류값 또한 split()로 쪼갠 뒤 각각의 자리를 비교하여 correct / incorrect 클래스를 붙여주어 처리하였다. 중간 중간 오류가 많아 여러번 수정하였다. 자세한건 소스를 참고! 전체 사이트 보기

자바스크립트를 통해 뮤직플레이어를 만들었다. 태그를 이용하여 mp3파일을 연동시킬 수 있고 element.play(); element.stop();을 통해 오디오를 재생/정지 시킬 수 있다. 수업 중엔 배우지 않았지만 element.volume = 0~1 을 통해서 해당 오디오에 볼륨을 조절 할 수 있어서 기능을 추가하였다. 자세한건 사이트 참고하도록.. 전체 사이트 보기

const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClientRect(); console.log(imageWrapBounds); // console.log(itemBounds); const onMouseEnter = ()=>{ gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0..

function mousemove(e){ let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1 let positionFast = (e.pageX - (window.innerWidth/2)) * 0.2; gsap.to(".spanSlow",{duration: 0.4, x: positionSlow}) gsap.to(".spanFast",{duration: 0.4, x: positionFast}) gsap.to(".cursor", {duration: 0.3, left: e.pageX, top: e.pageY}); } document.addEventListener("mousemove", mousemove); 이번 효과는 CSS적인 부분에서 처리해야 될 게 많다..

function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; const reveal = document.querySelectorAll(".reveal"); reveal.forEach(el => { let revealOffset = el.offsetTop + el.parentElement.offsetTop; let revealDelay = el.dataset.delay; if (scrollTop > revealOffset - window.innerHeight/2){ if(revealDelay == undefined){ el.classList.add("show") } el..

let text = document.querySelectorAll(".content__item__desc"); text.forEach((el,i) => { let splitText = el.innerText;// 글자들을 선택해서 변수로 저장 let splitWrap = splitText.split('').join("span aria-hidden='true'>");// 글자를 하나씩 쪼개고 splitWrap = "" + splitWrap + "";// span으로 묶음 el.innerHTML = splitWrap;// 묶은것을 다시 출력해줌. el.setAttribute("aria-label", splitText) }) function scroll(){ let scrollTop = window.scree..

function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); document.querySelectorAll(".content__item").forEach(item => { let offset1 = (scrollTop - item.offsetTop) * 0.1; let offset2 = (scrollTop - item.offsetTop) * 0.15; const target1 = item.querySelector(".content__i..

function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); let content = document.querySelectorAll(".content__item"); content.forEach(el=>{ if(scrollTop > el.offsetTop - window.innerHeight/2){ el.classList.add("show"); } }) requestAnimationFrame(scroll) } scroll(); 스크롤..

let nowScroll = true; let lastScroll = 0; function scrollProgress(){ nowScroll = true; setInterval(()=>{// 스크롤을 내리는지 올리는지 판단하기 위해 setInterval을 사용한다. if(nowScroll){ nowScroll = false; hasScroll(); } }, 1000) } function hasScroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > lastScroll){ document.querySelector("#parallax__nav").class..

document.querySelectorAll("#parallax__dot a").forEach(el =>{ el.addEventListener("click", e => { e.preventDefault(); document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"}); }) }) window.addEventListener("scroll", ()=>{ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = Mat..

document.querySelectorAll("#parallax__nav li a").forEach(li =>{// 메뉴 탭 li.addEventListener("click", e => { e.preventDefault();// 작동 금지 document.querySelector(li.getAttribute("href")).scrollIntoView({// li의 속성값들을 가져와서 스크롤 됐을때 behavior:"smooth"// 부드럽게 }) }) }) window.addEventListener("scroll", ()=>{// 스크롤 했을 때 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrol..

const circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e){ // 마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; // 마우스 좌표 기준점을 가운데로 설정 let centerPageX = window.innerWidth / 2 - mousePageX let centerPageY = window.innerHeight / 2 - mousePageY // 최소값 : -50, 최대값 : 50 으로 설정 let maxPageX = Math.max(-300, Math.min(300, centerPageX)); let maxPageY = Math..

const circle3 = document.querySelector(".cursor").getBoundingClientRect(); document.querySelector(".mouse__img").addEventListener("mousemove", (e) => { gsap.to(".cursor", {duration: 0.2, left: e.pageX - circle3.width/2, top: e.pageY - circle3.height/2}) // 마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; // 마우스 좌표 값 기준점을 가운데로 초기화 // 전체 길이 / 2 - 마우스 X 좌표값 let centerPageX = window.inne..

const circle3 = document.querySelector(".cursor").getBoundingClientRect(); // 모든 위치정보값 function follow(e){ gsap.to(".cursor", {duration: 0.3, left: e.pageX - (circle3.width / 2), top: e.pageY - (circle3.height / 2)}); //출력용 document.querySelector(".pageX").innerText = e.pageX; document.querySelector(".pageY").innerText = e.pageY; } window.addEventListener("mousemove", follow); 전체 사이트 보기 자바스크립트로 ..

const cursor = document.querySelector(".cursor");// 커서 const follower = document.querySelector(".cursor-follower");// 커서를 따라다니는 요소 window.addEventListener("mousemove", e => {// 화면에 마우스 오버했을 때 // cursor.style.left = (e.pageX - 5) + "px"// 커서 중앙에 요소가 오도록 위치값 조정 // cursor.style.top = (e.pageY - 5)+ "px" // follower.style.left = (e.pageX - 15) + "px" // follower.style.top = (e.pageY - 15) + "px" gsa..