분류 전체보기 113

마우스 이펙트 2 GSAP 사용하기

GSAP 사용하기 전에 올렸던 마우스 이펙트1의 마우스는 버벅거리고 움직임이 이상하기에 이것을 보안해 주는 사이트의 소스를 가져와 보안해 주도록 합시다. 마우스 이펙트1 보러가기 https://coding23213.tistory.com/48 마우스 이펙트1 마우스 따라다니기 마우스 새로 커서 만들어서 이펙트 주기 마우스를 따라다니는 커서를 만들어 보도록 합시다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Living is a fierce battle. 산다는것 그것 coding23213.tistory.com GSAP의 사이트는 버벅거리는 애니메이션 효과를 부드럽게 만들어 주는 사이트 입니다. https://greensock.com/gsap/ G..

JAVASCRIPT 2023.03.21

마우스 이펙트3 조명 효과를 만들어 봅시다.

전에 올렸던 마우스 이펙트를 이용해 이번엔 조명 효과를 만들어 보겠습니다. 마우스 이펙트1 https://coding23213.tistory.com/48 마우스 이펙트1 마우스 따라다니기 마우스 새로 커서 만들어서 이펙트 주기 마우스를 따라다니는 커서를 만들어 보도록 합시다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Living is a fierce battle. 산다는것 그것 coding23213.tistory.com 마우스 이펙트 2 https://coding23213.tistory.com/50 마우스 이펙트 2 GSAP 이용하기 GSAP 사용하기 전에 올렸던 마우스 이펙트1의 마우스는 버벅거리고 움직임이 이상하기에 이것을 보안해 주는 사..

JAVASCRIPT 2023.03.21

마우스 이펙트1 마우스 따라다니기

마우스 새로 커서 만들어서 이펙트 주기 마우스를 따라다니는 커서를 만들어 보도록 합시다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Living is a fierce battle. 산다는것 그것은 치열한 전투이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px ghkddn132@naver.com ※마우스 커서 만들기 기존마우스 커서를 대신할 마우스 커서를 만들어주었습니다. .mouse__coursor { position: absolute; left: 0; top: 0; width: 50px; heig..

JAVASCRIPT 2023.03.20

css를 이용해 텍스트 유형 사이트 만들기

우선 FIgma를 이용해 만들고 싶은 텍스트 유형 사이트의 틀을 만들어 줍니다. notice 쿠키를 만들때 주의점 재료의 품질 확인하기 좋은 품질의 재료를 사용하는 것이 맛있는 쿠키를 만드는 핵심입니다. 신선한 재료를 사용하고, 유통기한을 확인하고, 가능한 경우 유기농 또는 천연 재료를 사용하는 것이 좋습니다. 더보기 정확한 양 계산하기 쿠키를 만들 때 정확한 양과 비율을 잘 지켜서 재료를 사용해야 합니다. 레시피에서 지정한 양과 비율을 잘 지켜서 누구든지 쉽게 따라할 수 있는 쿠키를 만들어보아요. 더보기 반죽을 과하게 섞지 않기 반죽을 과하게 섞으면 쿠키가 딱딱해지거나 지루해질 수 있습니다. 반죽이 잘 섞이도록 믹서기나 주걱 등을 사용해서 부드럽게 섞어주시기 바랍니다. 더보기 오븐 온도와 시간 조절하기..

CSS 2023.03.19

퀴즈 이펙트4 객관식 확인하기 유형

객관식 확인하기 유형 Quiz 객관식 확인하기 유형 1 2 3 4 5 정답입니다! 틀렸습니다! 정답 확인하기 ghkddn132@naver.com 우선 css에 quiz__choice 에있는 radio타입의 버튼을 없애주고, 새로운 버튼 만들어 주었습니다. .quiz__choice { padding: 20px; border-bottom: 6px ridge #cacaca; font-family: "SCoreDream"; } .quiz__choice label { display: flex; } .quiz__choice label input { position: absolute; //블라인드 처리 clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; overflow..

JAVASCRIPT 2023.03.18

2023.3.16일 코딩 일기

코딩 일기를 가끔씩 쓸 것으로 예상됩니다... 오늘 오전에는 함수를 배웠습니다. 기존에 배웠던 것을 복습하는 거부터 처음 배우는 것까지 이해가 되는지 안되는지도 모른채 배웠던거 같습니다. 함수의 기본인 4가지 선언적, 익명, 매개변수, 리턴값 함수 이 4가지를 외우지 못하면 모든 함수의 유형을 이해 못한다고 합니다. 열심히 외웁시다. https://coding23213.tistory.com/39 배운 함수까지 정리한 곳입니다. 오늘 배우것을 알아봅시다. 객체 리터럴 함수 { function fucn(num,name,com){ this.num = num; this.name = name; this.com = com; }; func.prototype = { result1: function(){ document..

코딩일기 2023.03.16

css를 이용해 슬라이드 유형 사이트 만들기

figma를 이용해 만들고 싶은 슬라이드 유형의 사이트를 만든후, HTML로 가 박스 하나를 만들어 안에 들어갈 태그와 텍스트를 넣어 줍니다. 그후 텍스트의 글꼴을 바꾸기 위해 헤드부분에 을 넣고 박스에 class를 nexon 을 주고 css부분 style에.nexon을 만들어 와 밑에 코드와 같이 넣어 주시면 그박스의 모든 글꼴이 바뀝니다. 메인 슬라이드 영역 event 쿠키의 정보를 모아놓은 사이트 다양한 쿠키들에 대한 정보를 제공합니다. 쿠키의 기원부터, 다양한 종류와 특징, 그리고 제조 방법에 이르기 까지 상세한 정보를 제공합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 css작업을 해보겠습니다. /* slider__wrap */위에..

CSS 2023.03.15

css를 이용해 이미지/텍스트 사이트 유형 만들기

notice 쿠키의 종류 10가지 쿠키의 종류는 매우 다양합니다. 아래는 10가지 이상의 쿠키 종류를 알려드리겠습니다 ·초코칩 쿠키 (Chocolate Chip Cookie) ·오트밀 쿠키 (Oatmeal Cookie) ·스노우볼 쿠키 (Snowball Cookie) ·마들렌 (Madeleine) ·레몬 바 (Lemon Bar) ·마카롱 (Macaron) ·쇼트브레드 (Shortbread) ·스프링클 쿠키 (Sprinkle Cookie) ·맥아담 쿠키 (Macadamia Nut Cookie) ·글로스 쿠키 (Gloss Cookie) ·section안에 박스 3개를 만들어 넣어야 하는내용과 이미지를 넣습니다. ·class가 section__small인 곳에 폰트 사이즈와 border-radius 50px을..

CSS 2023.03.14