3D 애니메이션 효과를 만들어봅시다!
·
코딩/애니메이션
마우스 이펙트(세 번째)를 만들어봅시다!
·
코딩/JAVASCRIPT
안녕하세요~ 오늘은 마우스 효과를 만들어보겠습니다! 첫 번째는 마우스 커서에 애니메이션 효과를 주어 마우스를 따라다니는 기본 효과를 주었고, 두 번째는 gsap를 활용해 마우스를 따라다니는 효과를 주었습니다. 세 번째 효과에서는 마우스를 따라다니는 "조명"효과를 나타내볼게요! 자바스크립트 마우스 이펙트(세 번째) 만들기 기본 CSS (reset.css와 mouse.css)설정은 전에 썼던 게시글을 참고해주세요! 구조 짜기 Javascript Mouse Effect03 마우스 이펙트 1 2 3 4 5 6 Life is either a daring adventure or nothing at all. 생활은 과감한 모험이거나 아니면 아무것도 아니다. dsy1943@naver.com 이번엔 배경이 어두웠다가 마..
마우스 이펙트(첫 번째)를 만들어봅시다!
·
코딩/JAVASCRIPT
안녕하세요 오늘은 마우스 효과를 만들어보겠습니당 ! 새로운 메서드와 속성들이 나왔으니 꼼꼼하게 정리해볼게요~ 자바스크립트 마우스 이펙트(첫 번째) 만들기 css 세팅해주기 reset.css 설정 @import url('https://webfontworld.github.io/pretendard/Pretendard.css'); @import url('https://webfontworld.github.io/goodchoice/Jalnan.css'); @import url('https://webfontworld.github.io/sunn/SUIT.css'); @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); @import url('ht..
텍스트 유형의 페이지를 만들어봅시다~!!
·
코딩/웹페이지
오늘은 텍스트 타입의 레이아웃을 만들어보겠습니다~!! 텍스트 유형 페이지 만들기 피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다. 기본 CSS 리셋값 설정해주기 CSS리셋 (CSS Reset)은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠?? 텍스트 섹션 구성해주기 notice 향수 종류에 따른 지속력 오드퍼퓸(EDP) 오드퍼퓸(EDP)은 향수의 농도가 가장 높은 제품 중 하나로, 향수 성분의 농도가 약 15-20% 정도입니다. 따라서, 오드퍼퓸은 다른 향수에 비해 더 진하고 집중적인 향을 가지며, 오래 지속됩니다. 더보기 오드코롱(EDC) 오드코롱(Eau de Cologne)은 가장 가벼운 향수 중 하나이며, 향수..
퀴즈 이펙트(네 번째)를 만들어봅시다!
·
코딩/JAVASCRIPT
오늘은 퀴즈 이펙트 네 번째를 작업해보겠습니다! 저번에는 여러 개의 주관식 확인하기 유형이였다면 이번엔 객관식 확인하기 유형입니다. 자바스크립트 퀴즈 이펙트(네 번째) 만들기 영역 지정해주기 정답입니다! 틀렸습니다! 정답 확인하기 세 번째 유형과는 다르게 이번엔 보기가 존재하므로 quiz__choice라는 영역을 만들어줍니다. 그리고 보기를 4개를 설정해줍니다! name과 value값도 같이~~ 선택자 만들기 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title"); const quizQuestion= quizWrap.querySelector(".quiz__qu..
자바스크립트 오답노트 써봅시다 ~! ㅎ_ㅎ;;
·
코딩/오답노트,마무리 문제
역대급 난이도. ㅋ 자바스크립트 시험 오답노트? 레츠기릿. 헷갈리는 문제가 넘 많았지만 어쨋든 공부 열심히 안 했으니까.. 오답노트를 써보며 다시 열공해봅시다! 자바스크립트 오답노트 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } ✔답 확인하기 함수가 실행되었습니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } ✔답 확인하기 함수가 실행되었습니다. 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i
다쭐◠‿◠
쭐코딩