seop's study seop's study

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() transfo..

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 anim..

테이블 테이블 만들기 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 수정할 ..

MAMP 설치 MySQL 실행 윈도우 : cd MAMP/bin/mysql/bin 로그인 : mysql -uroot -proot / 상위 폴더로 가기 : cd.. / 최상단으로 가기 : cd\ 데이터베이스 명령어 데이터베이스 만들기 create database 데이터베이스 이름; 데이터베이스 보기 show databases; 데이터베이스 사용 use 데이터베이스 이름; 데이터베이스 삭제 drop database 삭제할 데이터베이스 이름;

// 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..

타자 연습 게임 만들기 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 st..

설명 마치 마우스에서 페인트가 나오는 듯한 효과를 내었습니다. 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 = canv..

설명 글씨에 마우스를 올려놓으면 마치 글씨에 불빛이 들어오는 듯한 효과를 내었습니다. .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 #..

설명 특정 글씨에 마우스 오버를 하였을때 이미지가 보여집니다. 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});; gs..