seop's study

CSS - transform

seop8044 — Mon, 18 Apr 2022 09:18:00 +0900

transform - CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

translate	translate()	transform: translate(10px, 20px)	X좌표, Y좌표 이동을 나타냅니다.
	translate3d()	transform: translate3d(10px, 20px, 30px)	X좌표, Y좌표, Z좌표 이동을 나타냅니다.
	translateX()	transform: translateX(10px)	X좌표 이동을 나타냅니다.
	translateY()	transform: translateY(10px)	Y좌표 이동을 나타냅니다.
	translateZ()	transform: translateZ(10px)	Z좌표 이동을 나타냅니다.
scale	scale()	transform: scale(2, 2)	선택한 요소의 X축과 Y축 확대를 설정합니다.
	scale3d()	transform: scale3d(2, 2, 2)	선택한 요소의 X축, Y축, Z축 확대를 설정합니다.
	scaleX()	transform: scaleX(2)	선택한 요소의 X축 확대를 설정합니다.
	scaleY()	transform: scaleY(2)	선택한 요소의 Y축 확대를 설정합니다.
	scaleZ()	transform: scaleZ(2)	선택한 요소의 Z축 확대를 설정합니다.
skew	skew()	transform: skew(10deg, 20deg)	선택한 요소의 X축, Y축 회전을 설정합니다.
	skew3d()	transform: skew3d(10deg, 20deg, 30deg)	선택한 요소의 X축, Y축, Z축 회전을 설정합니다.
	skewX()	transform: skewX(10deg)	선택한 요소의 X축 회전을 설정합니다.
	skewY()	transform: skewY(10deg)	선택한 요소의 Y축 회전을 설정합니다.
	skewZ()	transform: skewZ(10deg)	선택한 요소의 Z축 회전을 설정합니다.
etc	transform-origin	transform-origin: 20%, 30%	선택한 요소의 X축, Y축 기준점을 설정합니다.
	transform-style	transform-style: preserve-3d	선택한 요소 스타일을 3D로 설정합니다.
	perspective	perspective: 500px	선택한 요소의 원근점 거리를 설정합니다.
	perspective-origin	perspective-origin: 500px	선택한 요소의 원근점 뱡향을 설정합니다.
	backface-visibility	backface-visibility: hidden;	선택한 요소의 3D 뒷면의 배경 유무를 설정합니다.

CSS - animation

seop8044 — Fri, 15 Apr 2022 15:30:27 +0900

animation 속성에 대한 설명

transform	transform 속성은 요소의 움직임을 일괄적으로 설정합니다.
transform-orgin	transform-origin 속성은 요소의 움직임 방향을 설정합니다.
transform-style	transform-style 속성은 요소의 움직임 스타일을 설정합니다.
perspective	perspective 속성은 3D 위치 요소에 약간의 원근감을 주기 위해 z=0 평면과 사용자 사이의 거리를 결정합니다.
perspective-orgin	perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다.
backface-visibility	backface-visibility 속성은 요소의 뒷면을 정의합니다.
animation	animation 속성은 애니메이션을 정의합니다.
animation-delay	animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다.
animation-duration	animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.
animation-fill-mode	animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
animation-name	animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.
animation-play-state	animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
animation-timimg-fuction	animation-timing-function 속성은 움직임의 속도를 정의합니다.
@keyframes	@keyframes 속성은 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다.
transition	transition 속성은 요소의 움직임 시간을 일괄적으로 설정합니다.
transition-delay	transition-delay 속성은 요소의 움직임 지연 시간을 설정합니다.
transition-duration	transition-duration 속성은 요소의 움직임 지속 시간을 설정합니다.
transition-property	transition-property 속성은 요소의 움직임 속성을 설정합니다.
transition-timing-function	transition-timing-function 속성은 요소의 움직임 기능을 설정합니다.

PHP - 테이블

seop8044 — Fri, 15 Apr 2022 14:48:08 +0900

테이블

테이블 만들기

create table 테이블 이름;
숫자열은 int( )
문자열은 varchar( )

테이블 전체 보기

show tables;

테이블 보기

desc 테이블 이름;

테이블 삭제

drop table 삭제할 테이블 이름;

테이블 복사

테이블 구조, 데이터 복사

create table 새로운 테이블명 SELECT * FROM 복사할 테이블명;

테이블 구조 복사

create table 새로운 테이블명 LIKE 복사할 테이블명;

테이블 데이터 복사

INSERT INTO 새로운 테이블명 SELECT * FROM 복사할 테이블명

테이블 수정

필드 추가하기

ALTER TABLE 테이블명 ADD 추가할 필드명 AFTER 필드명 위치;

필드 수정하기

ALTER TABLE 테이블명 MODIFY 수정할 필드명

필드 삭제하기

ALTER TABLE 테이블명 DROP 삭제할 필드명

테이블 데이터

데이터 입력하기

INSERT INTO 테이블 이름(필드명) VALUES(데이터)

데이터 불러오기

SELECT * FROM 테이블 명; (검색기능)

전체 데이터 불러오기

SELECT FROM 테이블명;

SELECT * FROM myMember;

조건 데이터 불러오기

SELECT * FROM 테이블 명 WHERE 조건;

회원 아이디가 10번인 경우

SELECT * FROM myMember WHERE memberID = 10;

회원 아이디가 10번이 아닌경우

SELECT * FROM myMember WHERE memberID <> 10;

회원 아이디가 5~10번인 경우

SELECT * FROM myMember WHERE memberID >=5 AND memberID <11;

범위 조건 데이터 불러오기

SELECT * FROM 테이블명 WHERE 컬럼명 BETWEEN 시작값 AND 끝값;

회원 아이디가 5~10번인 경우

SELECT * FROM myMember WHERE memberID BETWEEN 5 AND 10;

회원 아이디가 5~10번이 아닌 경우

SELECT * FROM myMember WHERE memberID NOT BETWEEN 5 AND 10;

해당 조건 데이터 불러오기

SELECT * FROM 테이블명 WHERE 컬럼명 IN(값1, 값2, 값3...);

SELECT * FROM myMember WHERE memberID IN (4, 6, 13, 14);

패턴 조건 데이터 불러오기

SELECT * FROM 테이블명 WHERE 컬럼명 LIKE;

이메일 중에 naver 텍스트가 포함된 경우

SELECT * FROM myMember WHERE youEmail LIKE '%naver%';

이메일 중에 web 텍스트로 시작되는 경우

SELECT * FROM myMember WHERE youEmail LIKE 'web%';

이메일 중에 com 텍스트로 끝나는 경우

SELECT * FROM myMember WHERE youEmail LIKE '%com';

이름 중에 '김'씨로 시작되는 멤버인 경우

SELECT * FROM myMember WHERE youName LIKE '김%';

이름 중에 '김'씨 이거나 '황'씨인 경우

SELECT * FROM myMember WHERE youName LIKE '김%' OR youName LIKE'황%';

이름 중에 중간 글자가 '근'인 경우(%는 문자열, _은 1개의 글자)

SELECT * FROM myMember WHERE youName LIKE '_근_';

SELECT * FROM myMember WHERE youName LIKE '__섭';

NULL 데이터 불러오기

SELECT * FROM 테이블명 WHERE 컬럼명 IS NULL;

SELECT * FROM myMember WHERE youName IS NULL;

SELECT * FROM myMember WHERE youName IS NOT NULL;

논리 연산자 데이터 불러오기

SELECT * FROM 테이블명 WHERE 컬럼명 연산자;

나이가 30살 이상이거나 또는(OR) 김씨인 멤버

SELECT * FROM myMember WHERE youAge >=30 OR youName LIKE '김%';

나이가 20살 이상이면서(AND) 김씨인 멤버

SELECT * FROM myMember WHERE youAge >=20 AND youName LIKE '김%';

멤버아이디가 2또는 10 그리고 나이가 30이상인 경우

SELECT * FROM myMember WHERE (memberID=2 OR memberID=10) AND youAge >= 30;

데이터 갯수 불러오기

SELECT * FROM 테이블명 LIMIT 표시할 수;

SELECT * FROM myMember LIMIT 12;

SELECT * FROM myMember LIMIT 10, 20;

SELECT youEmail FROM myMember LIMIT 5, 10;

내림차순/오름차순

SELECT * FROM 테이블명 ORDER by 컬럼명 정렬방식;

SELECT * FROM myMember ORDER BY youAge DESC;

SELECT * FROM myMember ORDER BY youAge ASC;

데이터 수정하기

UPDATE 테이블명 SET 컬럼명 조건

모든 회원의 비밀번호를 '1234' 변경

UPDATE myMember SET youPass = '1234';

아이디 번호가 3, 비밀번호를 '1234' 변경

UPDATE myMember SET youPass = '1234' WHERE boardID = 3;

5번부터 10번 회원의 비밀번호를 '12344567' 변경

UPDATE myMember SET youPass = '1234567' WHERE memberID BETWEEN 5 AND 10;

아이디 내림차순(아이디가 뒤에서부터 10명의 회원의 비밀번호를 ****로 변경)

UPDATE myMember SET youPass = '****' ORDER BY memberID DESC LIMIT 10;

데이터 삭제하기

전체 데이터 삭제

DELETE FROM 테이블명 or DELETE * FROM 테이블명

DELETE FROM myMember

조건 데이터 삭제

DELETE FROM 테이블명 조건

조건 삭제 : 회원 아이디가 5번인 멤버를 삭제

DELETE FROM myMember WHERE memberID = 5;

조건 삭제 : 패스워드가 '****' 멤버를 삭제

DELETE FROM myMember WHERE youPass = '****';

정렬 삭제 : 이름을 기준으로 5번째 멤버 삭제

DELETE FROM myMember ORDER BY youName LIMIT 5;

지정 삭제 : 지정한 멤버 삭제

DELETE FROM myMember WHERE memberID in(2);

PHP - MAMP 설치 및 실행

seop8044 — Fri, 15 Apr 2022 14:37:49 +0900

MAMP 설치

MySQL 실행

윈도우 : cd MAMP/bin/mysql/bin
로그인 : mysql -uroot -proot / 상위 폴더로 가기 : cd.. / 최상단으로 가기 : cd\

데이터베이스 명령어

데이터베이스 만들기

create database 데이터베이스 이름;

데이터베이스 보기

show databases;

데이터베이스 사용

use 데이터베이스 이름;

데이터베이스 삭제

drop database 삭제할 데이터베이스 이름;

Javascript 카드맞추기 게임 만들기

seop8044 — Fri, 15 Apr 2022 14:23:01 +0900

// 01. HTML / CSS 디자인 구성
// 02. 클릭한 카드 뒤집기
// 03. 두개의 뒤집은 카드 확인하기
// 04. 클릭한 카드 두개의 이미지 가져오기
// 05. 두개의 카드 이미지 비교
// 06. 틀린 이미지 애니메이션 효과 주기
// 07. 빨리 클릭하면 버그 발생 처리하기

        const cards = document.querySelectorAll(".cards li");         // 카드들 선택자

        let cardOne, cardTwo;
        let disableDeck = false;

        function flipCard(e){
            let clickedCard = e.target;                              // 클릭한 카드 선택자
            if(clickedCard !== cardOne && !disableDeck){
                clickedCard.classList.add("flip");

                // 첫번째 카드와 두번째 카드의 데이터 저장
                if(!cardOne){                                            // 첫번째 카드에 데이터가 없으면
                    return cardOne = clickedCard;                        // 클릭한 카드의 데이터를 cardOne에 저장
                }
                cardTwo = clickedCard;                                   // 첫번째 카드에 데이터가 있으면 클릭한 카드의 데이터를 cardTwo에 저장
                disableDeck = true;                                      // 빨리눌러서 애니메이션이 진행중일때 클릭이 안되게 막아놓음

                let cardOneImg = cardOne.querySelector(".back img").src;     // 처음 클릭한 카드의 이미지 가져오기 뒤에 .src는 데이터를 문자열로 가져옴
                let cardTwoImg = cardTwo.querySelector(".back img").src;     // 그다음 클릭한 카드의 이미지 가져오기

                // console.log(cardOneImg, cardTwoImg);
                matchCards(cardOneImg, cardTwoImg)
            }
        }

        function matchCards(img1, img2){
            if(img1 == img2){
                cardOne.removeEventListener("click", flipCard);
                cardTwo.removeEventListener("click", flipCard);
                cardOne = cardTwo = "";                                 // 카드 초기화
                disableDeck = false;                                    // 빨리눌러서 애니메이션이 진행중일때 클릭이 안되게 막아놓음
            } else {

                setTimeout(() => {
                    cardOne.classList.add("shake");
                    cardTwo.classList.add("shake");
                }, 400)
    
                setTimeout(() => {
                    cardOne.classList.remove("shake", "flip");
                    cardTwo.classList.remove("shake", "flip");
                    cardOne = cardTwo = "";
                    disableDeck = false;                                // 빨리눌러서 애니메이션이 진행중일때 클릭이 안되게 막아놓음
                }, 1200)
            }

        }

        cards.forEach(card => {
            card.addEventListener("click", flipCard);
        })

Javascript 타자게임 만들기

seop8044 — Fri, 15 Apr 2022 14:19:36 +0900

타자 연습 게임 만들기

const paragraphs = [
            "one in four American adults is unvaccinated or only partially vaccinated, and that number isn’t budging much these days. Fewer than 80,000 adults are getting their first shot every day a 96% drop from the more than 2 million a day in April 2021. It’s easy to believe that anyone who hasn’t gotten a shot by now is unlikely to get one in the future—but there is still a group of people, however small, just finally coming "]
const typingText = document.querySelector(".typing__text p");
        const inputField = document.querySelector(".input__field");
        const typingMistake = document.querySelector(".mistake span");
        const typingTime = document.querySelector(".time span b");
        const typingWpm = document.querySelector(".wpm span"); //1분동안 친 단어
        const typingCpm = document.querySelector(".cpm span"); //1분동안 친 글자수
        const typingAgain = document.querySelector(".again")

        // 타이핑한 글자수에 대한 인덱스
        let charIndex = 0;
        // 오타
        let mistakes = 0;
        // 타이머
        let timer;
        let maxTime = 60;
        let timeLeft = maxTime;
        let isTyping = 0;

        // paragraphs를 랜덤하게 불러온 다음 각각의 글자를 쪼개서 span으로 감쌈
        function randomParagraphs(){
            let randIndex = Math.floor(Math.random() * paragraphs.length)
            typingText.innerHTML = "";

            paragraphs[randIndex].split("").forEach(span => {
                let spanTag = `${span}`;
                typingText.innerHTML +=spanTag;
            });
            // typingText를 클릭, 또는 키보드를 누르면 focus가 inputField로 이동
            document.addEventListener("keydown", () => inputField.focus());
            typingText.addEventListener("click", () => inputField.focus());
        }

        // Typing한 글자를 각각 쪼갠뒤 span으로 감쌈
        function initTyping(){
            const characters = typingText.querySelectorAll("span");
            let typedChar = inputField.value.split("")[charIndex];
            
            if(charIndex < characters.length-1 && timeLeft > 0){
                if(!isTyping){
                    timer = setInterval(initTimer, 1000);
                    isTyping = true;
                }

                if(typedChar == null){
                    charIndex--;
                    // 틀렷을때(incorrect가 있을때)만 mistakes--;
                    if(characters[charIndex].classList.contains("incorrect")){
                        mistakes--;
                    }
                    characters[charIndex].classList.remove("correct", "incorrect");
                } else {
                    if(characters[charIndex].innerText === typedChar){
                        // 맞았을 때
                        characters[charIndex].classList.add("correct");
                    } else {
                        // 틀렸을 때 오타 추가, .incorrect
                        mistakes++;
                        characters[charIndex].classList.add("incorrect");
                    }
                    charIndex++;
                }

                // 다음 타이핑해야할 글자 아래 깜빡임
                characters.forEach(span => span.classList.remove("active"));
                characters[charIndex].classList.add("active");
                typingMistake.innerText = mistakes;

                // 전체 글자수 : charIndex 
                let wpm = Math.round((((charIndex - mistakes)/5) / (maxTime - timeLeft)) * 60);
                wpm = wpm < 0 || !wpm || wpm == Infinity ? 0 : wpm
                typingWpm.innerText = wpm;
                typingCpm.innerText = charIndex - mistakes;

            
                } else {
                    clearInterval(timer);
                    inputField.value = "";
                }
            }

        function initTimer(){
            // 지나간 시간이 0보다 크면()
            if(timeLeft > 0){
                timeLeft--;
                typingTime.innerText = timeLeft;
            } else {
                clearInterval(timer)
            }
        }
        function resetGame(){
            randomParagraphs();
            clearInterval(timer);
            inputField.value = "";
            timeLeft = maxTime;
            isTyping = charIndex = mistakes = 0;
            typingMistake.innerText = mistakes;
            typingWpm.innerText = 0;
            typingCpm.innerText = 0;
        }

        randomParagraphs();

        inputField.addEventListener("input", initTyping);
        typingAgain.addEventListener("click", resetGame)

Javascript 뮤직 플레이어 만들기

seop8044 — Fri, 15 Apr 2022 14:16:28 +0900

Mouse Effect 페인트 효과

seop8044 — Fri, 15 Apr 2022 14:04:38 +0900

설명

마치 마우스에서 페인트가 나오는 듯한 효과를 내었습니다.

function OilPainting(){

    var canvas;
    var context;

    var width;
    var height;

    var startPos = {x: window.innerWidth/2, y: window.innerHeight/2};
    var prevPos = {x: window.innerWidth/2, y: 0};
    var dist = {x: 0, y: 0};
    var colour = '#'+Math.floor(Math.random()*16777215).toString(16);
    
    
    this.initialize = function(){
        canvas  = document.getElementById("canvas");
        context = canvas.getContext('2d');
    
        width = window.innerWidth
        height = window.innerHeight
        
        canvas.width = width;
        canvas.height = height;
    
        canvas.addEventListener('mousemove', MouseMove, false);
        canvas.addEventListener('click', MouseDown, false);
        canvas.addEventListener('dblclick', MouseDbl, false);	
    }
    
    
    var MouseMove = function(e) {
        var distance = Math.sqrt(Math.pow(prevPos.x - startPos.x, 2) +
                                Math.pow(prevPos.y - startPos.y, 2));
                                
        var a = distance * 10 * (Math.pow(Math.random(), 2) - 0.5);
        
        var r = Math.random() - 0.5;
        
        var size = (Math.random() * 15) / distance;
        
        dist.x = (prevPos.x - startPos.x) * Math.sin(0.5) + startPos.x;
        dist.y = (prevPos.y - startPos.y) * Math.cos(0.5) + startPos.y;
        
        startPos.x = prevPos.x;
        startPos.y = prevPos.y;
        
        prevPos.x = (e.layerX);
        prevPos.y = (e.layerY);
    
    // ------- Draw -------
    var lWidth = (Math.random()+20/10-0.5)*size+(1-Math.random()+30/20-0.5)*size;
    context.lineWidth = lWidth;
    context.strokeWidth = lWidth;
    
    context.lineCap = 'round';
        context.lineJoin = 'round';
        
    context.beginPath(); 
    context.moveTo(startPos.x, startPos.y);
    context.quadraticCurveTo(dist.x, dist.y, prevPos.x, prevPos.y);
    
    context.fillStyle = colour;
    context.strokeStyle = colour;
    
    context.moveTo(startPos.x + a, startPos.y + a);
    context.lineTo(startPos.x + r + a, startPos.y + r + a);
    
    context.stroke();
    context.fill();
    
    context.closePath();
    }
    
    var MouseDown = function(e) {
        e.preventDefault();
        colour = '#'+Math.floor(Math.random()*16777215).toString(16);
        context.fillStyle = colour;
        context.strokeStyle = colour;
    }
    
    var MouseDbl = function(e) {
        e.preventDefault();
        context.clearRect(0, 0, width, height);
    }
        
}

var app = new OilPainting();
app.initialize();

Mouse Effect 마우스 오버, 텍스트 효과

seop8044 — Fri, 15 Apr 2022 14:01:57 +0900

설명

글씨에 마우스를 올려놓으면 마치 글씨에 불빛이 들어오는 듯한 효과를 내었습니다.

.area span {
            font-size: 6.5em;
            color: #fff;
            letter-spacing: -7px;
            font-weight: 700;
            text-transform: uppercase;
            text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
        }

        .area span:hover {
            animation: blur 0.5s ease-out infinite;
        }
            @keyframes blur {
            from {
                text-shadow:0px 0px 10px #fff,
                0px 0px 10px #fff, 
                0px 0px 25px #fff,
                0px 0px 25px #fff,
                0px 0px 25px #fff,
                0px 0px 25px #fff,
                0px 0px 25px #fff,
                0px 0px 25px #fff,
                0px 0px 50px #fff,
                0px 0px 50px #fff,
                0px 0px 50px #7B96B8,
                0px 0px 150px #7B96B8,
                0px 10px 100px #7B96B8,
                0px 10px 100px #7B96B8,
                0px 10px 100px #7B96B8,
                0px 10px 100px #7B96B8,
                0px -10px 100px #7B96B8,
                0px -10px 100px #7B96B8;
            }
        }

Mouse Effect - 텍스트 효과2

seop8044 — Thu, 14 Apr 2022 19:35:41 +0900

설명

특정 글씨에 마우스 오버를 하였을때 이미지가 보여집니다.

const mouseImg = document.querySelectorAll(".mouse__img");

mouseImg.forEach((item) => {
	const imageWrap = item.querySelector(".img");
	const imageWrapBounds = imageWrap.getBoundingClientRect();
    let itemBounds = item.getBoundingClientRect();

	const onMouseEnter = () => {
    	gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3, opacity: 0});;
        gsap.to(imageWrap, {xPercent: -50, yPercent: -50, rotation: 0, scale: 1, opacity: 1});
    }

	const onMouseLeave = () => {
    	gsap.to(imageWrap, {xPercent: -50, yPercent: -100, rotation: 15, scale: 0.3, opacity: 0})
    }

	const onMouseMove = ({x, y}) => {
    	gsap.to(imageWrap, {
        	duration: 1.25,
            x: Math.abs(x -itemBounds.left),
            y: Math.abs(y -itemBounds.top)
        })
    }

	item.addEventListener("mouseenter", onMouseEnter);
    item.addEventListener("mouseleave", onMouseLeave);
    item.addEventListener("mousemove", onMouseMove);
});