CSS22 애니메이션 08 애니메이션 08 눈 굴리는 애니메이션을 만들어보자..... See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. script 코드 const wrap = document.querySelector('.wrapper'); const eye = document.querySelector('.eye'); const speed = 1; // 0 ~ 1사이 let x = 0; // translate할 거리 let y = 0; let followX = 0; // 마우스 움직인 거리 let followY = 0; function animate() { x += (followX - x) * speed; y += (followY - y) * speed; eye.style.trans.. 2022. 9. 29. 애니메이션 07 애니메이션 07 돌면서 늘어나는 상자를 만들어보자... See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML 코딩 CSS body { background-color: #333; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotatex(-20deg) rotatey(-140deg) translatez(0); animation: rotate 8000ms.. 2022. 9. 22. 애니메이션 06 애니메이션 06 움직이는 글자를 만들어보자.... See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML w e b s t o r y a CSS @font-face { font-family: 'LeeSeoyun'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/heungkuk/LeeSeoyun.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/heungkuk/LeeSeoyun.eot?#iefix') format('embedded-opentype'), url('https://cdn.js.. 2022. 9. 22. 애니메이션 05 애니메이션 05 위, 우측으로 움직이는 애니메이션을 만들어 보자! See the Pen MouseHoverEffect by 이유나 (@fkdldhs8484) on CodePen. HTML Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Hover Effect 마우스 내리면 to Left CSS @font-face { font-family: 'LocusSangsang'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.e.. 2022. 9. 20. 애니메이션 04 애니메이션 04 흔들거리는 애니메이션을 만들어보자... See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML div.circle-wrap - for (var x =1; x 2022. 9. 20. MYSQL 🎈MYSQL MYSQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터베이스라고 부릅니다. MYSQL은 세계에서 가장 많이 쓰이는 오픈 소스의 관계형 데이터베이스 관리시스템(RDBMS) 입니다. MYSQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스를 개발된 무료 프로그램입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, cafw24, 제로보드, 그누보드)등 일반적으로 웹 개발에 널리 사용되고 있습니다. MYSQL 설치 MAMP란 웹사이트를 개발할 때 쓰이는 기술 스택인 macOS, Apache, MySQL, PHP 의 약어이자 솔류션 스택이다. MYSQL 실행 윈도우 : cd C:\MAMP\bin\mysql\bin 로그인 : mysql .. 2022. 9. 15. SVG 속성 SVG 속성 timing-function See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. 결과보기 //-------------------------------------------------------------------HTML Start linear ease ease-in ease-out ease-in-out //-------------------------------------------------------------------CSS .btn { font-size: 30px; margin-left: 40px; } .timing.bg1 > div {background-image: linear-gradient(to right, #f83600 0%, #.. 2022. 9. 8. SVG animaiton1 SVG animaiton1 SVG로 걷는 애니메이션을 만들어 보자! 사진이 24프레임으로 가로로 길게 800px * 24장 해서 19200px 레이어를 만들어줍니다. 세로 길이는 동일. Start Stop 원본 소스 보기 HTML 소스보기 Start Stop CSS 소스보기 JABA 소스보기 $(".stepBtnStart").click(function (e) { e.preventDefault(); $(".stepbox").removeClass("stop").addClass("start"); }); $(".stepBtnStop").click(function (e) { e.preventDefault(); $(".stepbox").removeClass("start").addClass("stop"); }); 2022. 9. 8. SVG 텍스트 애니메이션 SVG SVG는 Scalable Vector Graphics라는 뜻인데, 번역하자면 확장가능한 벡터 그래픽이다. 픽셀을 이용하여 그림을 그리는 png jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현한다. 그러다보니 크기를 조절함에 따라 깨지는 것이 없고, 용량이 작기 때문에 웹에서 자주 사용하는 이미지 형식입니다. HTML 마이쮸체 CSS @font-face { font-family: 'CrownMychew'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontw.. 2022. 9. 8. SVG intro SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) 결과보기 원형(circle, ell.. 2022. 9. 7. 애니메이션03 애니메이션 03 회전하면서 도는 애니메이션을 만들어 보자! See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> CSS * { box-sizing: .. 2022. 9. 3. 애니메이션 02 애니메이션 02 돌고 도는 애니메이션을 만들어 보자! See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML <div class="loading"> <span class="circle1"></span> <span class="circle2"></span> </div> CSS body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 0.5s ease 10.. 2022. 8. 29. 애니메이션 01 애니메이션 01 퉁퉁 튀는 애니메이션을 만들어 보자! See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML <div class="box"></div> CSS body { height: 100vh; background-image: linear-gradient(to top, purple, purple) } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background: #000; position: abso.. 2022. 8. 29. GSAP GSAP GSAP란? 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인기반의 애니메이션 자바스크립트 라이브러리 입니다. 또한 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다. GSAP를 사용하기에 앞서 HTML파일에 GSAP 라이브러리를 추가해야 합니다. <script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> Tween 바로 실행되어야하는 간단한 모션을 만들때 유용하다. Timeline 다양한 메서드를 사용해 모션을 컨트롤할 수 있다. pause (),play (),progress (),reverse (),timeScale ()등등 2022. 8. 29. 요소 숨기기 요소를 안보이게 하는 방법 1. display 2. opacity 3. visibility 4. width, height 5.transform display 👉요소를 어떤 형태로 나타나게 할 것인지를 말하는 속성 입니다. (애니메이션x, 영역x) display : none opacity 👉opacity는 요소의 투명도를 지정하는 속성입니다. (애니메이션o, 영역o) opacity: 0; visibility 👉문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다. (애니메이션x, 영역x) visibility: hidden; width , height 👉특정 요소의 너비와 높이를 0으로 설정하여 숨기는 방식 입니다. (애니메이션x, 영역x) width: 0; height: 0; transform 👉시각적.. 2022. 8. 25. css 단위 CSS 단위 속성 페이지에서 <color> 또는 <length>. 와 같이 꺽쇠 괄호로 묶여 있는 값을 찾을 수 있습니다. <color> 값이 특정 속성에 유효한 것으로 표시되면 유효한 속성을 해당 속성의 값으로 사용할 수 있습니다. 절대 길이 단위 모두 절대 길이 단위이며 — 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주됩니다. 보통 사용하는 유일한 값은 px (픽셀) 입니다. 단위 설명 cm 1cm = 96px/2.54 mm 1mm = 1/10th of 1cm Q 1Q = 1/40th of 1cm in 1in = 2.54cm = 96px pc 1pc = 1/6th of 1in pt 1pt = 1/72th of 1in px 1px = 1/96th of 1in 상대 길이 단위 상.. 2022. 8. 23. 이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트(Image Sprite) 💡 이미지 스프라이트 ? 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있고, 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 이미지 스프라이트 사용법? 이미지 스프라이트는 <img>태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입합니다. 이미지 스프라이트 기법을 사용하기 위해 필수적으로 작성해줘야하는 속성이 있습니다. 👉 width, height : 삽입할 이미지의 크기를 결정한다. 👉 background-image : 삽입할 이미지의 경로를 설정한다.. 2022. 8. 20. 강아지 애니메이션 01 강아지 애니메이션 만들기 이번에는 강아지 애니메이션을 만들어 보았습니다. 평소에 하던 방법이 아닌 SCSS를 이용해서 일일이 강아지를 조합? 해보았습니다. pug 결과보기 .dog -> HTML로 바꾸면 <div class="dog"> .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue SCSS 결과보기 $dog-width: 100px; $interval: 200ms; $color-gray: #111; $easing.. 2022. 8. 18. Scss Scss 말그대로 Sass한 CSS라는 뜻이다. 가장 큰 특징은 기존 Sass의 문법에서, CSS의 원래 문법에서 사용되는 중괄호를 사용하여 CSS만 알던 사람들이 처음 접해도 직관적으로 의미를 이해할 수가 있다. 단순히 가독성만이 아니라 Sass의 기존문법이 들여쓰기 및 줄바꿈에 의존하는 문법임에 비해, SCSS는 중괄호가 있기에 공백에 의해 컴파일에러가 발생할 확률히 현저히 적다. Preprocessing CSS는 그 자체로 재미있을 수 있지만 스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있습니다. 여기서 전처리기가 도움이 될 수 있습니다. Sass에는 중첩, 믹스인, 상속 및 강력하고 유지 관리 가능한 CSS를 작성하는 데 도움이 되는 기타 유용한 기능과 같이 아직 CSS에는 존.. 2022. 8. 18. 미디어쿼리 미디어쿼리 뷰포트의 해상도에 따라 CSS를 분기시키는 미디이쿼리는 반응형 프로젝트에서 반드시 필요한 기법이다. < link~media=""> < ink rel="stylesheet" type="text/css" media="all and (min-width: 1000px)" href="style_pc.css"> 최소 가로폭이 1000px보다 넓은 해상도일 때 style_pc.css를 연결 한다는 뜻 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 5 320 568 Galaxy S5,S8 360 640 Galaxy Note 8 360 640 Galaxy 414 736 iPad Pro 1024 1366 : : : @media @media all .. 2022. 8. 14. CSS 기본 문법 css 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 외부스타일을 많이 사용하지만 간단한 스타일은 내부 스타일을 사용한다. 내부 스타일시트 CSS를 HTML 문서 안에 <style>태그를 사용하여 HTML 문서 안에 CSS가 함께 저장하는 형태이다. p{color : red;}의 의미는 p태그 안의 글자 색상을 빨간색으로 설정하라는 뜻이다. 우리를 기쁘게 하는 것들. 결과 외부 스타일시트 스타일 속성들을 따로 저장하려 THML 문서에 파일명으로 연결할 수 있다. 스타일 시트는 *.css확장자를 가진 별도의 파일로 저장하고, HTML에서 < link> 태그를 선언한다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되는 반면, 외부.. 2022. 8. 14. 벡터 방식, 비트맵 방식 백터 방식 백터는 점과 점을 연결해 수학적인 함수관계로 이미지를 표현해 선과 면을 만들어내는 것, 점과 점을 연결해 선을 만들고 선이 3개 이상 모이면 면을 만들 수 있다. 이렇게 만들어진 선은 두께, 색상, 곡률 값을 갖게 되고 면은 색상 값을 가질 수가 있다. 비트맵 방식 각 픽셀에 저장된 일련의 비트 정보 집합을 말한다. 디스플레이는 픽셀의 배열로 구설되어 있다. 가로와 세로를 곱하면 디스플레이가 가진 픽셀의 총개수를 알 수 있다. 비트맵은 이미지 크기를 줄이거나 늘리면 원본 이미지가 깨진다. 벡터 비트맵 장점 확대하거나 축소해도 해상도에 영향을 끼치지 않고, 용량이 많이 늘어나지 않는다. 많은 픽셀로 정교하고 다양한 색상을 가진 이미지를 만들 수 있다. 단점 사진과 이미지 같은 정교한 그래픽 표현.. 2022. 8. 9. 이전 1 다음
