css63 게임 효과 - 테트리스 게임 게임 이펙트 - 테트리스 게임 지금까지 배운 css, javascript 지식을 총 출동하여 간단한 게임을 만들어 봅니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 작성한 자바스크립트 코드입니다. 오류도 있고 아직 미흡한 부분이 많지만 귀엽게 봐주세요^0^ const tetrisWrap = document.querySelector(".tetris__wrap"); const playground = tetrisWrap.querySelector(".playground > ul"); const tetrisStart = tetrisWrap.querySelector(".tetris__start"); const startBtn = tetrisWrap.querySelector(".start__btn"); con.. 2022. 11. 9. 게임 효과 - 카드 짝 맞추기 게임 이펙트 - 카드 맞추기 게임 지금까지 배운 css, javascript 지식을 총 출동하여 간단한 게임을 만들어 봅니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 작성한 자바스크립트 코드입니다. 오류도 있고 아직 미흡한 부분이 많지만 귀엽게 봐주세요^0^ // 01 HTML/CSS 디자인 구성 // 02 클릭한카드 뒤집기 // 03 두개의 카드 뒤집고 확인하기(첫번째카드, 두번째카드) // 선택자 만들기 const memoryWrap = document.querySelector(".memory__wrap"); //메모리 게임 가장 큰 부모박스 const memoryCard = document.querySelector(".memory__card"); // 각각의 카드가 담긴 부모박스 const.. 2022. 10. 28. 슬라이드 이펙트 7 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이) 이번 슬라이드 효과는 이전의 유형에 자동 플레이 기능을 추가하였으며,자동 플레이를 정지하거나 플레이 할 수 있는 버튼을 추가하고, 마우스 커서가 올라가면 자동 플레이가 멈추고, 커서가 빠져나가면 자동 플레이가 시작되는 기능을 추가하였습니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길.. 2022. 10. 20. 슬라이드 이펙트 6 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴, 무한) 이번 슬라이드 효과는 버튼을 누르면 이전이미지, 다음 이미지로 넘어가도록 스크립트를 작성하였습니다. 또한 이전 유형처럼 닷메뉴를 추가했으며, 이미지가 무한으로 넘어가는 기능도 추가하였습니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__img 클래스의 형제 요소로 slider__btn .. 2022. 10. 20. 슬라이드 이펙트 5 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴) 이번 슬라이드 효과는 버튼을 통해 이미지 슬라이드를 넘길 수 있으며, 아래쪽에 슬라이드 갯수 만큼의 닷메뉴를 만들어 현재 활성화된 슬라이드의 순서에 맞게 표시되도록 하였습니다. 또한, 닷메뉴를 클릭하면 해당 슬라이드로 이동하는 기능도 있습니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__im.. 2022. 10. 20. 패럴랙스 이펙트07 패럴랙스 이펙트 7 이번 패럴랙스 효과는 스크롤을 내리면 가림막이 먼저 나타났다가 사라지며 글씨와 이미지가 나타나는 효과입니다. 이런 효과를 리빌효과라고 합니다. HTML 코드 이번 패럴랙스는 메뉴 없이 컨텐츠로만 구성하였으며, scrollTop 정보를 볼 수 있는 info를 추가해주었습니다. 이전 유형과 구조는 완전히 같습니다. HTML 보기 01 section1 질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다. . . . scrollTop : 0px CSS 코드 이번 패럴랙스는 가림막 애니메이션 효과를 주기 위해, 다양한 css애니메이션을 적용하였습니다. CSS 보기 /* option */ .reveal > div, .reveal > span { opacity: 0; } .reveal.show >.. 2022. 10. 20. 게임 효과 - 음악 플레이어 게임 이펙트 - 음악 플레이어 지금까지 배운 css, javascript 지식을 총 출동하여 간단한 게임을 만들어 봅니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 1. 먼저, 오디오에 대한 정보를 배열 속 객체 형식으로 저장합니다. 2. 그리고 오디오, 클릭 이벤트를 발생시킬 버튼, html요소를 작성할 부분 등을 선택하는 선택자를 작성합니다. 3. 오디오에 대한 정보를 반복문과 변수를 통해 작성합니다. 4. 오디오의 재생, 반복 등에 대한 스크립트를 작성합니다. const allMusic = [ { name: "Robots and Aliens", artist: "Joel Cummins", img: "music_img10", audio: "music_audio10" }, { name: "Glas.. 2022. 10. 20. 마우스 이펙트 6 마우스 효과 만들기 6 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 텍스트 효과 텍스트가 움직이며 왼쪽에서는 오렌지색, 오른쪽에서는 흰색으로 나타납니다. HTML 코드 이미지와 텍스트를 .mouse__img와 .mouse__text로 구분하고 왼쪽 글씨는 .left에, 오른쪽 글씨는 .right에 작성하였습니다. Pain Past Pain Past is pleasure is pleasure 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. CSS 코드 mouse__cursor는 기존의 마우스 커서를 따라다녀야 하기 때문에, position: absolute;를 사용하여 위치를 .. 2022. 9. 29. 마우스 이펙트 5 마우스 효과 만들기 5 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 기울기 효과 글씨 반전 효과 마우스를 올리면 이미지가 기울며 움직입니다. 그리고 마우스를 올리면 글씨나 색상이 반전되어 나타나는 효과입니다. HTML 코드 이번에는 기본 마우스 커서를 대신할 요소로 .mouse__cursor 를 만들어 줍니다. 또한, 마우스 커서의 위치나 정보를 알기 위해, .mouse__info 부분을 만들어주었습니다. Life is either a daring adventure or nothing at all. 생활은 과감한 모험이거나 아니면 아무것도 아니다. mousePageX : 0 p.. 2022. 9. 28. CSS 애니메이션 : 움직이는 눈알 (+ javascript) 애니메이션 만들기 javascript 애니메이션을 만들어 봅니다! 애니메이션 : 움직이는 눈알 눈이 마우스 커서를 따라 움직이는 효과입니다. html 코드 보기 ABCDE css 코드 보기 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } .wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 369px; height: 547px; transform-style: preserve-3d; perspective: 600px; } .me { position: absolute;.. 2022. 9. 26. CSS 애니메이션 : 원이 돌아가는 로딩화면 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 원이 돌아가는 로딩화면 원들이 빙글빙글 돌아가는 로딩화면입니다. html 코드 보기 css 코드 보기 body { background-color: darkcyan; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50% -50%); width: 100px; height: 100px; animation: spin 0.6s linear infinite reverse; } .ball { position: absolute; top: 50%; left: 50%; transform: translate(-50% -50%); height: 100%; animation.. 2022. 9. 26. 마우스 이펙트 4 마우스 효과 만들기 4 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 이미지 효과 마우스를 올리면 이미지가 조금씩 움직이고, 커지며 이질감을 주는 효과입니다. 저번에 패럴랙스에서 이질감을 주었던 효과와 비슷하다고 생각하시면 됩니다! HTML 코드 이번에는 기본 마우스 커서를 대신할 요소로 .mouse__cursor 를 만들어 줍니다. 그리고 p태그에 명언을 적어주는 것까지는 저번 유형과 비슷하나, 이번에는 이미지를 넣었기 때문에 figure태그를 사용하였으며 커서의 위치값을 확인할 수 있도록 .mouse__info를 추가하였습니다. The most difficult thing i.. 2022. 9. 22. 마우스 이펙트 3 마우스 효과 만들기 3 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 조명 효과 이번 효과는 어두운 배경 이미지가 있고, 마우스 커서가 가리키는 곳은 밝은 것처럼 보이는 효과입니다. 실제로 밝아지는 것은 아니고, 그렇게 보이도록 착시를 일으키는 효과입니다. 어떻게 하는건지 알아볼까요? HTML 코드 이번에는 기본 마우스 커서를 대신할 요소로 .mouse__cursor 를 만들어 줍니다. mouse__wrap 안에는 p태그로 명언을 적었습니다. Learn as if you will live forever, live like you will tomorrow. 영원히 살 것처럼 배우고.. 2022. 9. 22. CSS 애니메이션 : 넘어가는 사진 3D 효과 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 쭉쭉 늘어나는 큐브 큐브에 글씨가 있으며, 빙글빙글 돌아가며 쭉쭉 늘어나는 애니메이션입니다. html 코드 보기 코 딩 척 척 학 사 css 코드 보기 body { background: #0fa599; 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); an.. 2022. 9. 22. CSS 애니메이션 : 통통 튀는 글씨 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 통통 튀는 글씨 글씨가 통통 튀는 애니메이션 입니다. html 코드 보기 코 딩 척 척 학 사 css 코드 보기 html, body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, pink 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: '궁서체'; font-size: 80px; color: #fff; position: relative; top: 20px; display: inline-block.. 2022. 9. 22. CSS 애니메이션 : 넘어가는 사진 3D 효과 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 넘어가는 사진 3D 효과 마우스를 올리면 사진이 넘어가는 효과입니다. 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.eot'); src: .. 2022. 9. 20. CSS 애니메이션 : 꾸물거리는 점 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 꾸물거리는 점 꾸물꾸물 거리는 것처럼 보이는 점을 만듭니다. pug 코드 보기 div.circle_wrap -for (var x =1; x 2022. 9. 19. 마우스 이펙트 2 마우스 효과 만들기 2 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 마우스 따라다니기(GSAP) 이번 효과는 저번 유형과 비슷하지만 GSAP를 이용해 작성하여, 커서의 움직임이 더 부드러운 효과입니다. HTML 코드 이번에는 기본 마우스 커서를 대신할 요소에 각 mouse__cursor, mouse__cursor2 클래스를 주어 두개 만들어 줍니다. mouse__wrap 안에는 p태그로 명언을 적고, span태그로 특정 단어를 감싸 강조해 주었습니다. The future depends on what We do in present. 미래는 현재 우리가 무엇을 하는가에 달려있다. .. 2022. 9. 18. 마우스 이펙트 1 마우스 효과 만들기 1 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 마우스 따라다니기 이번 효과는 마우스를 따라다니는 원이 마우스 커서를 대신하며, 노란색 텍스트 위에 커서를 올리면 원의 모양이 변하거나 색이 변하는 효과입니다. HTML 코드 기본 마우스 커서를 대신할 요소는 mouse__cursor 클래스를 주었습니다. mouse__wrap 안에는 p태그로 명언을 적고, span태그로 특정 단어를 감싸 강조해 주었습니다. mouse__info는 커서의 위치에 대한 정보를 나타낼 예정입니다. Resolve to perform what your ought, perform with.. 2022. 9. 18. 슬라이드 이펙트 4 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼) 이번 슬라이드 효과는 버튼을 누르면 이전이미지, 다음 이미지로 넘어가도록 스크립트를 작성하였습니다. 많이 사용되는 효과이므로 잘 알아두엇다가 활용하도록 합시다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__img 클래스의 형제 요소로 slider__btn 클래스의 div박스를 만들어 각각의 클래스가 p.. 2022. 9. 18. 사이트 만들기 : 반응형 작성 2 사이트 반응형 만들기 이번에는 저번 시간에 빠트린 헤더 영역의 반응형을 공부해 보았습니다. HTML 코드 헤더 영역의 메뉴 리스트들은 화면의 사이즈가 줄어들 때 깨지며 상황을 골치아프게 만들곤 합니다… 헤더 유형은 그 메뉴 리스트들을 '햄버거 메뉴'를 통해 반응형 작업을 해보았습니다. HTML 보기 web site 이미지 영역 이미지텍스트 카드 영역 배너 영역 텍스트 영역 로그인 반응형 뜯어보기 헤더 영역의 반응형 과정을 차근차근 뜯어보겠습니다! 전체 CSS 보기 (스크롤 주의!) .header__inner { width: 100%; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20p.. 2022. 9. 16. 사이트 만들기 : 반응형 작성 사이트 반응형 만들기 이번에는 앞서 공부한 사이트 유형들을 모두 합친 하나의 사이트를 만들고, 반응형으로 만들어보는 공부를 하였습니다. HTML 코드 슬라이드 부분은 swiper라는 소스를 사용하여 간단히 만들어 보았습니다. swiper 사용법에 대한 설명은 아래쪽에서 자세히 알아봅시다! HTML 보기 (스크롤 주의!) web site 이미지 영역 이미지텍스트 영역 카드 영역 배너 영역 텍스트 영역 로그인 슬라이드 영역 Journey The Blue Sea 보고 있으면 마음이 편안해지는 수평선과 푸른 물결을 감상해 볼까요? 자세히 보기 사이트 보기 Journey The Blue Sea 보고 있으면 마음이 편안해지는 수평선과 푸른 물결을 감상해 볼까요? 자세히 보기 사이트 보기 Journey The Blu.. 2022. 9. 14. CSS 애니메이션 : SVG 만들기와 SVG 애니메이션 애니메이션 만들기 svg를 만들고, svg를 이용한 애니메이션을 만들어봅니다! 간단한 형태의 svg 이미지는 코딩으로도 만들 수 있으니, 잘 알아두었다가 활용해봅시다! SVG란? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. > SVG의 특징 알아보기 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현.. 2022. 9. 7. CSS 애니메이션 : 속성 알아보기 + 예제 애니메이션 만들기 CSS를 이용한 애니메이션 만들기 방법을 알아봅니다. 애니메이션에 관련된 속성은 정말 많고 값에 따라 다른 애니메이션을 만들 수 있으니, 유형을 잘 알아두었다가 활용해 봅시다! > animation 속성 animation으로 시작하는 속성들은, 움직임을 줄 수 있는 애니메이션 관련 속성입니다. 종류 설명 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. an.. 2022. 9. 7. 사이트 만들기 : 슬라이드 유형1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 슬라이드 유형01 슬라이드 유형은 저번에 배운 슬라이드 이펙트를 바탕으로, 이미지가 슬라이드 되어 넘어가는 섹션 유형입니다. 여러장의 이미지를 보여주고 싶을 때 유용하며, 버튼을 눌러 이미지가 넘어가도록 할 수도 있습니다. 그러나, 스크립트에 대한 내용은 다음번에 배워보도록 하겠습니다. 디자인 하기 슬라이드 되며 보일 이미지들을 고르고, 이미지를 넘길 버튼, 이미지 위에 놓일 텍스트 등을 구상합니다. 글씨가 이미지에 묻혀 안보이는 상황이 발생하지 않도록 신경씁시다! HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그.. 2022. 9. 6. 사이트 만들기 : 배너 유형1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 배너 유형01 배너 유형은 한장의 이미지에 간단한 제목과 글을 작성해 페이지를 구성한 섹션 유형입니다. 슬라이드 유형과는 달리, 하나의 이미지를 효과적으로 보여줄 수 있는 유형이니, 잘 알아두었다가 페이지를 구성할 때 적절하게 배치해봅시다! 디자인 하기 먼저, 배너를 구성할 이미지와 텍스트가 서로 어울리도록 이미지를 고르고, 그 위에 텍스트를 배치합니다. 마찬가지로, 이미지에 텍스트가 묻히지 않도록 이미지나 텍스트의 색상을 잘 조절합니다! HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다... 2022. 9. 6. 사이트 만들기 : 푸터 유형1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 푸터 유형01 푸터는 사이트의 제일 아래에 위치한 부분입니다. 푸터에는 사이트의 저작권에 대한 정보나, 연락처, 위치 등이 담기게 됩니다. 또한, 사이트 내를 돌아다닐 수 있는 링크가 포함되기도 합니다. 푸터는 사이트에 빠지지 않는 필수적인 요소이므로 신경써서 작업하도록 합시다! 디자인 하기 푸터에는 생각보다 텍스트가 많이 들어가게 됩니다. 보기에 조화롭도록 여백을 조절하거나 단을 잘 나누어서 디자인하도록 합니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 푸터 영역은 footer.. 2022. 9. 6. jQuery 알아보기 : 스타일 관련 메서드 jQuery 스타일 관련 메서드 알아보기 제이쿼리의 메서드 중에서 스타일과 관련된 메서드들을 알아봅니다. 스타일 관련 메서드에는 css() 메서드가 있으며, width/height 관련 메서드와 위치 관련 메서드도 알아보겠습니다. > css() 메서드 css() 메서드는 요소의 css 속성을 취득, 생성, 변경할 수 있습니다. 실행 분류 형식 예시 예제 취득 $("요소").css("css 속성"); $("div").css("width"); 보러 가기 생성 $("요소").css("css 속성", "값"); $("div").css("color", "white").css("padding", "10px"); 변경 $("요소").css({기존 css 속성: "값", 바꿀 css 속성: "값"}); $("div").. 2022. 9. 3. CSS 애니메이션 : 움직이는 공 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 움직이는 공 잔상이 뒤따르는 움직이는 공 애니메이션을 만들어 봅니다. * { box-sizing: border-box; } body { background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; } .wrapper { position: absolute; animation: x 1s ease-in-out alternate infinite 0s both; } .wrapper:nth-of-t.. 2022. 9. 2. CSS 애니메이션 : 로딩 동그라미 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 로딩 동그라미 빙글빙글 돌아가는 로딩화면 동그라미 애니메이션을 만들어 봅니다. body { height: 100vh; background-image: linear-gradient(-60deg, orange 0%, pink 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease infinite; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } .load.. 2022. 9. 2. 이전 1 2 3 다음 728x90
