카테고리165 [자바스크립트 응용] 마우스 효과 03_ 조명 효과 마우스 효과 03 이번 시간에는 마우스 위치에만 배경이미지가 보이는 효과를 만들어 보겠습니다. 저번과 마찬가지로 GSAP를 활용해 볼 예정입니다. 원본 소스 보기 원본 사이트 JS 소스 const cursor = document.querySelector(".mouse__cursor"); // 원의 width값 구하기 // const circleW = cursor.offsetWidth;//200 // const circleH = cursor.offsetHeight;//200 // const circle2 = cursor.clientWidth;//190 : 보더값 제외 //요새는 이걸 많이 씀. 각종값을 객체로 반환 const circle = cursor.getBoundingClientRect(); cons.. 2022. 9. 22. [자바스크립트 함수]클래스를 알아보자 클래스 CSS의 클래스랑 다른 개념이에요! 이 클래스를 잘 사용하면 유지보수가 굉장히 쉬워집니다. 사용이유는 아무래도 재사용성이 좋기 때문인데요. 같이 알아볼게요 ■ 넌 뭐니? 함수의 집합체를 말합니다. ■ 기본문법 class study { constructor(num, name, job){ this.num = num; this.name = name; this.job = job; } result(){ document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은" + this.job + "입니다.") } } const info1 = new study("1", "웹쓰", "웹퍼블리셔"); const info2 = new study("2", "웹스토리보이", "프.. 2022. 9. 21. [자바스크립트 함수] 내부함수를 알아보자 내부함수 ■ 넌 뭐니? 함수 내부에 선언한 함수를 말합니다. ■ 스코프 변수 또는 함수의 유효 범위를 말합니다. 참조 대상 식별자를 찾아내기 위한 규칙을 뜻하기도 합니다. ■ 클로져 내부함수는 외부함수의 지역변수에 접근할 수 있는데요, 외부함수가 실행을 마치고 끝났는데도 내부함수가 외부함수의 변수에 접근할 수 있습니다. 이러한 메커니즘을 뜻하는 개념입니다. ■ 예시 function func(){ function funcA(){ document.write("함수가 실행되었습니다."); }; funcA(); //함수안에 함수가 들어감 : 내부함수 function funcB(){ document.write("함수가 실행되었습니다."); }; funcB(); } func(); 결과보기 함수가 실행되었습니다.함수.. 2022. 9. 21. [자바스크립트 함수] 콜백함수를 알아보자 콜백함수 콜백함수는 잘 쓰면 정말 좋은 함수죠. 콜백함수를 잘 사용한다면 함수의 실행순서를 내 멋대로 조절할 수 가 있게 됩니다. 대신 가독성저하는 사용횟수에 비례할듯;; ■ 넌 뭐니? 이름 그대로 나중에 호출되는 함수를 말합니다. 호출방식에 의한 구분입니다. 이 친구는 자체로 특별한 선언이나 문법적 특징을 가지진 않습니다. 다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수입니다. ■ 반복문 형식 첫번째 함수가 실행되고나서 다음 함수를 실행합니다. 함수에 순서를 부여(?), 반복문 사용해서 할 수 있습니다. // 콜백함수 반복문 function func(index){ document.write("함수가 실행되었습니다." + index); } function callback(num){ fo.. 2022. 9. 21. [자바스크립트 함수] 재귀함수를 알아보자 재귀함수 오늘은 자기자신을 반복 호출하는 함수! 재귀함수에 대해서 알아봅시다. 이 재귀함수는 잘 사용하기만 한다면 코드가 매우 간단해진답니다. ■ 넌 뭐니? 영어로 Recursive Call이라고 하는데요. 말 그대로 반복해서 호출한다는 뜻입니다. 여기서 반복대상은 나 자신입니다. 얘는 내 함수명령문 안에서 내 함수를 호출하는 형태입니다. ■ 문법 (내용 꼭 필독!) func recursivecall() { recursivecall() } 문법상 위 방식이 맞긴 하지만 이렇게 작성하고 함수를 실행하면, 아무런 제약없이 계속 자기자신을 호출하므로 컴퓨터는 과부하에 걸리게 되고 그렇게...(말잇못) ☞ 과부화 해결법 예시 function func(num){ if( num 2022. 9. 21. [애니메이션효과 만들기] 카드 뒤집기 효과 (근데 3D를 곁들인...) 마우스를 오버하면 뒤집히는 효과 만들기 카드에 마우스 오버시 뒤집히는 효과를 만들어 보겠습니다. 그리고 이 효과에 텍스트는 3D효과까지 곁들여 보겠습니다. ■ 새로운 것들 perspective: 1000px; 원근감을 부여하는 속성인데요. 2D는 x,y좌표로도 충분히 구현 가능하지만, 3D는 x,y,z로 구현해야 합니다. 그래서 이 속성을 부여하게 되면 z를 컨트롤할 수 있게 됩니다. 숫자가 클 수록 멀리서 보는 느낌이 나고, 작아질 수록 가까이 있는 효과입니다 backface-visibility: hidden; 요소의 뒷면이 보일지 말지 결정하는 속성입니다. transform-style : preserve-3d; 자식 요소를 3D공간에 배치하게 해줍니다. 기본값은 flat인데 이건 2D의 2차원에서 부.. 2022. 9. 21. [자바스크립트 응용하기]페럴렉스효과05_ 이질감이 드는 효과...😶 페럴렉스 효과 05 이번에는 이질감이 느껴지는 효과를 구현해보겠습니다. 이 효과를 뭐라고 설명해야할지 모르겠네요?＼（〇_ｏ）／ 그냥 이질감 효과라고 합시다 원본 소스 보기 원본 사이트 JS 소스 function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop); document.querySelectorAll(".content__item").forEach(item => { const target1 = item.querySelector(".content__item__i.. 2022. 9. 20. [애니메이션효과 만들기] 미역같이 움직이는 원들 미역같이 움직이게 하기 미역마냥 펄럭이는 원의 집합체(?)를 만들어보겠습니다. html을 pug, css는 scss 사용했습니다. ■ HTML (PUG) div.circle-wrap -for (var x = 1; x 2022. 9. 19. [VSCode] SASS를 사용하자 [VSCode] SASS Compile하기 SCSS를 사용하면 편하게 CSS를 사용할 수 있다고 했습니다. 오늘은 VSCode에서 SCSS를 사용하는 법에 대해 알아볼까요 1. 설치가 필요한 Extension ▶ SASS ▶ Live Sass Compiler ▶ Live Server 설정하기 Settings 에서 formats 검색 > Live Sass Compiler > Edit in settings.json 열기 "liveSassCompile.settings.formats":[ // This is Default. { "format": "expanded", "extensionName": ".css", "savePath": null }, // You can add more { "format": "comp.. 2022. 9. 19. [자바스크립트 응용하기]슬라이드 효과04_ 버튼식 구성하기 슬라이드 효과 04 이번에는 슬라이드형식 네번째! 버튼으로 슬라이드 조작을 해보겠습니다. 들어가기에 앞서 추후에 이미지를 추가해도 js를 별도로 수정하지 않아도 되게끔 하기 위해서 확인을 하다보니 이미지가 9개까지 되버린점은... 감안하고 봐주세요 ㅎㅎ; 원본 소스 보기 원본 사이트 ▶ 버튼을 누르면 다음 이미지로 이동하는 방식인데요. 생각만으론 참 간단하지만 함정카드가 존재합니다. 첫번째 이미지에서 이전이미지 버튼을 누르면 마지막 이미지로 가야하고, 마지막 이미지에서 다음이미지버튼을 누르면 첫번째 이미지로 가게끔 만들어야 합니다. if문을 사용하는것도 방법인데요. 저는 if문을 사용하지 않고 다른 방법을 사용해보았으니 같이 보시죠! JS 소스 const sliderWrap = document.query.. 2022. 9. 19. [자바스크립트 응용] 페럴렉스 효과04 / 스크롤에 따른 컨텐츠 애니메이션 페럴렉스 효과 04 이번에는 스크롤을 내려서 일정 위치에 도달하면 이미지box가 서서히 나타나는 효과를 만들어보겠습니다. 여태 페럴렉스효과를 함께 하셨다면 어려울 점이 없을거에요 원본 소스 보기 원본 사이트 JS 소스 // window.addEventListener("scroll", scrollProgrss); --> 쓰지않는 이유 : 과부화방지 --> requestAnimationFrame를사용함. // 재귀함수 : 함수를 실행했는데 자기자신을 또실행함. 이게 무한반복됨 // requestAnimationFrame : 일종의 재귀함수 역할을 하는데 얘는 무한루프 방지해줌 function scroll(){ let scrollTop = window.pageYOffset || document.document.. 2022. 9. 19. [자바스크립트 응용] 마우스 효과02_ 마우스를 천천히 따라오게 만들어 보자! 마우스 효과 02 저번 마우스효과01에서는 마우스를 따라다니는 원을 만들어봤는데요. 이번에는 이 원이 좀더 부드럽고 천천히(?) 따라오게 만들어 보겠습니다. GSAP를 이용해서 이 효과를 구현해 보겠습니다. 원본 소스 보기 원본 사이트 JS 소스 ■ 핵심 찍먹하기🪓 ✔ GSAP CDN으로 항상 스크립트가져오셔야해요! gsap.to ()에는 2가지 필수값이 필요합니다. 바로 대상과 속성입니다. 그렇다면 우리 소스에서는 어떻게 작동하는걸까요? 우선 대상과 속성값이므로 "cursor"에 "{duration: 0.3, left: e.pageX -5, top: e.pageY -5});"속성을 부여하겠네요! 사용된 속성은 다음과 같습니다. - duration : 애니메이션의 지속시간을 설정합니다. 0.3s로 지정했.. 2022. 9. 18. MYSQL MYSQL 이란 뭘까 MySQL은 데이터 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터베이스라고 부릅니다. MySQL은 세계에서 가장 많이 쓰이는 오픈 소스의 관계형 데이터베이스 관리시스템(RDBMS)입니다. MySQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스를 개발된 무료 프로그램입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, cafe24, 제로보드, 그누보드)등 일반적으로 웹 개발에 널리 사용하고 있습니다. | 설치 MAMP란 웹사이트를 개발할 때 쓰이는 기술 스택인 macOS, Apache, MySQL, pHP 의 약어이자 솔루션 스텍입니다. (https://www.mamp.info/en/downloads/) | 장점 1. 오픈 소스 라이.. 2022. 9. 14. [자바스크립트 응용] 페럴렉스 효과03 / 스크롤변화에 따른 효과 적용하기 패럴랙스 효과 03 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 오늘은 스크롤을 내리면 상단 메뉴바가 사라지고, 스크롤을 올리면 다시 나타나는 구성으로 진행해볼 예정이구요. 추가로 페이지의 맨마지막에 도달하면 위로가기 버튼이 나타나게 스크립트를 짜줄겁니다. 생각만큼 어렵지 않으니 같이 공부해봐요! 원본 소스 보기 원본 사이트 ▶ 메뉴바를 스크롤의 변화에 따라 바로이전의 스크롤 위치값을 마지막 스크롤값에 대입시켜 현재 스크롤위치값과 비교하도록 스크립트를 만들어 줍니다. 스크롤이 위로 올라간다는 것은 현재 스크롤 위치값이 이전 스크롤위치값보다 작다.. 2022. 9. 12. [사이트 만들기]모든 유형을 모아서 만들어보자 실전유형01 사이트 만들기 _ 실전 돌입 01 여러분 여태까지 온갖 유형에 대해서 공부를 했는데요. 드디어 결전의 날입니다!!👊 그동안 공부했던걸 열심히 모으고 모아서 사이트를 만들어 볼까요? HTML + CSS + JS (+α로 반응형까지) 삼위일체 가봅시다. 할 수 있어요! (없는거 같기도) 📝 피그마로 밑작업(?) 본인이 만들 사이트를 바로 코딩부터 들어가면 머리터질걸요? 우리같은 뉴비들은 이렇게 편집 소프트웨어를 이용해서 먼저 작업해준 뒤 코딩을 들어가는 습관을 갖도록 합시다. 저는 피그마가 편해서 피그마로 작업했는데요. 포토샵으로 하셔도 무관합니다. 프로그램은 편한걸로 알아서~ 반응형도 할 예정인데, 반응형은 굳이 레이아웃을 미리 구상하지 않았어요. 그래서 완성본 캡처로 대체합니다. 화질이 조금 떨어지지만 .. 2022. 9. 12. [자바스크립트 응용]마우스 효과01 마우스 효과 01 이번시간에는 마우스관련 메서드를 이용해서 마우스를 따라다니는 효과를 만들어 보겠습니다. 또, 좌측하단에 각 메서드의 값들이 출력되게 해놨으니 어떻게 다른지 한번 보시면서 참고해보세요. 원본 소스 보기 원본 사이트 ▶ 좌측 하단에는 .mouse__info 를 이용해서 각 위치값에 대한 정보를 입력하고, 문구에 span태그와 class속성을 이용해서 마우스오버 효과도 각각 다르게 부여합니다. 마우스포인터가 사라지는 것은 cursor:none을 이용했습니다. JS 소스 window.addEventListener("mousemove", (event) => { document.querySelector(".clientX").innerText = event.clientX; document.query.. 2022. 9. 12. [자바스크립트 응용] 페럴렉스 효과02 / 스크롤변화에 따른 효과 적용하기 패럴랙스 효과 02 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 오늘은 저번시간에 이어서 사이드바 메뉴로 구성하는 방식에 대해 알아보겠습니다. 원본 소스 보기 원본 사이트 ▶ 저번시간과 원리는 별반 다를게 없습니다. 'parallax__info span'에 현재 scrollTop값을 입력되게 해주고, 'scrollTop >= 각 섹션 offsetTop' 일때 해당되는 섹션의 메뉴버튼에 active클래스를 붙여줍니다. 또, 메뉴버튼에 해당되는 a링크에 preventDefault를 부여해서 a태그 고유기능은 막고 scrollIntoView를 주어서.. 2022. 9. 12. [자바스크립트 응용] 페럴렉스 효과01 / 스크롤변화에 따른 효과 적용하기 패럴랙스 효과 01 페럴랙스 효과에 대해서 알아보겠습니다. 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 그렇기때문에 자바스크립트의 스크롤 관련 메서드에 대해서 잘 알아야 사용할 수 있는 효과입니다. 요약하자면 스크롤변경에 따른 행동(?)을 조정하는 효과입니다. 원본 소스 보기 원본 사이트 ▶ 각 섹션의 offset값을 구해준뒤 만들어 놓은 offset__info에 넣어줍니다. '현재 스크롤값 >= 각 섹션의 offset값' 일때 메뉴바에 active클래스를 추가해서 현재메뉴가 표시되게 해주고, 나머지 메뉴바는 active를 제거하여 활성화된 액.. 2022. 9. 12. [VSCode] Prettier 설치 및 오류 간단 해결법! [VSCode] Prettier 설정 / 적용 오류 해결법 VSCode Extension 중에 코드를 자동으로 정렬해 주는 Prettier를 아시나요? Prettier는 코드를 자동으로 정렬해 줄 뿐만 아니라 사용자의 옵션에 따라 커스텀을 해서 사용할 수 있습니다. 설치방법과 간단한 오류 해결법에 대해 알아보겠습니다. ■ 설치하기 1. VSCode Extenstion탭에서 'Prettier'검색 후 설치해줍니다. 2. 환경설정(Preference) - 'Default Formatter' 검색한 뒤 설정을 'prettier'로 변경해줍니다. 또 Format On Save도 체크해줍시다 별다른 오류가 없다면 재실행 후 작업 이후 Ctrl + S를 통해 저장하면 Prettier가 알아서 이쁘게 정렬해 줍니다... 2022. 9. 12. [CSS] CSS로 움직이는 애니메이션(GIF)를 만들어보자 CSS로 움직이는 이미지 만들기 CSS애니메이션을 이용하면 움짤파일을 굳이 사용하지않아도, Gif파일처럼 흔히 말하는 움짤의 형식으로 만들수도 있습니다. 그리고 'Start'와 'Stop'버튼을 이용해 움직이는 이미지를 일시정지 할 수도 있습니다. Start Stop 소스 보기 HTML Start Stop CSS .step { height: 700px; background: #fff; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(img/ani1.jpg); border-radius: 0; position: absolute; background-size: cover; left: 50%; top: 50%;.. 2022. 9. 8. [CSS] Animation 속성 알아보기 / 예시 animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝.. 2022. 9. 8. [CSS]SVG에 대해 알아보고 애니메이션까지 만들어 보자! SVG란 뭘까 스케일러블 벡터 그래픽스(Scalable Vector Graphics)즉 SVG는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. | 특징 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. | 모양 종류 몇 가지 종류가 미리 내장되어 있습니다. 1).. 2022. 9. 7. [사이트 만들기] 슬라이드 유형01 사이트 만들기 _ 슬라이드 유형01 슬라이드 유형에 대해 알아보겠습니다. 사실 사이트만들기는 여태까지 했던 내용들이 계속해서 나오는 부분이라 이렇다할 내용이 없네요...? 그래도 같이 보시죠 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ .ir { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } 웹 표준 준수를 위해 .dot a 에 ir 효과를 부여합니다. 이외도 .slider__arrow a 에도 똑같이 부여합니다. CSS 속성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon.. 2022. 9. 6. [사이트 만들기] 푸터 유형01 사이트 만들기 _ 푸터 유형01 오늘은 사이트에서 최하단을 담당하는 푸터 유형을 만들어 보겠습니다. 보통 회사 사이트의 경우 회사의 주소 등을 입력하는 곳입니다. ■ 그림으로 미리보기🎨 ■ 핵심내용✍ 간단한 부분이라 이렇다할 내용은 없습니다. '.footer__menu '안의 내용은 flex로 코딩하여 메뉴들이 일렬로 배치될 수 있도록 해주세요. CSS 속성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: "NexonLv1Gothic"; font-weight: 400; } /* 리셋 */ *{ margin: 0; padding: 0; } a{ tex.. 2022. 9. 6. [사이트 만들기] 배너 유형01 사이트 만들기 _ 배너 유형01 오늘은 사이트에서 일반적으로 홍보 이미지 등을 삽입하는 배너 유형을 만들어 보겠습니다. ■ 그림으로 미리보기🎨 ■ 핵심내용✍ .banner__inner { background-image: url(../site1/assets/img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; color: white; } 배경이미지를 삽입하였는데, repeat으로 반복없이 한번만 출력, position:center로 가운데 정렬을, size:cover를 통해 사이즈에 맞게 채웁니다. CSS .. 2022. 9. 5. [자바스크립트]마우스 오버 메서드 _ mouseenter 와 mouseover메서드의 차이점을 알아보자 mouseenter와 mouseover 자바스크립트의 마우스이벤트에는 여러 종류가 있습니다. 그 중에서도 'mouseenter'와 'mouseover'는 같은 듯하면서 살짝 다른데요. 오늘은 이 둘의 차이점에 대해 알아보는 시간을 가져보겠습니다. ■ mouseenter 마우스 커서가 요소로 들어갈 때와 나갈때 발생합니다. ■ mouseover 마우스 커서가 요소로 들어갈 때와 나갈때 발생합니다. 버블링이 적용됩니다. ■ 둘의 차이점? mouseover 이벤트는 내부 div태그 안에 들어가도 이벤트를 또 발생시킵니다. 반면, mouseenter는 문서 객체의 안에 있는지 외부에 있는지만 따지기 때문에 이벤트가 한 번만 발생합니다. 🤷♂️ 버블링이 뭔가요? 한 요소에 이벤트가 발생하면, 이 요소에 할당된 .. 2022. 9. 5. [제이쿼리] 스타일 관련 메서드 스타일 관련 메서드 메서드란 데이터를 참조하고 조작할 수 있는 동작을 의미합니다. 제이쿼리에 사용되는 메서드에 대해 알아보겠습니다. 1. 클래스 관련 메서드 2. 속성 관련 메서드 3. 스타일 관련 메서드 ■ 메서드의 기본 형식 1. $("선택자").메서드명(); ⇒매개변수가 없는 유형 2. $("선택자").메서드명(값); ⇒매개변수가 한개인 유형 3. $("선택자").메서드명(function(){}); ⇒매개변수가 함수인 유형 4. $("선택자").메서드명(값1,값2,...); ⇒매개변수가 여러개인 유형 5. $('선택자').메서드명({ 옵션: 값, 옵션: 값 }); ⇒매개변수가 객체방식인 유형 한개의 메서드가 문법유형을 모두 갖고 있지는 않습니다. 어떤 메서드는 한개유형만, 어떤 메서드는 여러개 유형.. 2022. 9. 3. [제이쿼리] 속성 관련 메서드 속성 관련 메서드 메서드란 데이터를 참조하고 조작할 수 있는 동작을 의미합니다. 제이쿼리에 사용되는 메서드에 대해 알아보겠습니다. 1. 클래스 관련 메서드 2. 속성 관련 메서드 3. 스타일 관련 메서드 ■ 메서드의 기본 형식 1. $("선택자").메서드명(); ⇒매개변수가 없는 유형 2. $("선택자").메서드명(값); ⇒매개변수가 한개인 유형 3. $("선택자").메서드명(function(){}); ⇒매개변수가 함수인 유형 4. $("선택자").메서드명(값1,값2,...); ⇒매개변수가 여러개인 유형 5. $('선택자').메서드명({ 옵션: 값, 옵션: 값 }); ⇒매개변수가 객체방식인 유형 한개의 메서드가 문법유형을 모두 갖고 있지는 않습니다. 어떤 메서드는 한개유형만, 어떤 메서드는 여러개 유형을.. 2022. 9. 3. [제이쿼리] 클래스 관련 메서드 클래스 관련 메서드 메서드란 데이터를 참조하고 조작할 수 있는 동작을 의미합니다. 제이쿼리에 사용되는 메서드에 대해 알아보겠습니다. 1. 클래스 관련 메서드 2. 속성 관련 메서드 3. 스타일 관련 메서드 ■ 메서드의 기본 형식 1. $("선택자").메서드명(); ⇒매개변수가 없는 유형 2. $("선택자").메서드명(값); ⇒매개변수가 한개인 유형 3. $("선택자").메서드명(function(){}); ⇒매개변수가 함수인 유형 4. $("선택자").메서드명(값1,값2,...); ⇒매개변수가 여러개인 유형 5. $('선택자').메서드명({ 옵션: 값, 옵션: 값 }); ⇒매개변수가 객체방식인 유형 한개의 메서드가 문법유형을 모두 갖고 있지는 않습니다. 어떤 메서드는 한개유형만, 어떤 메서드는 여러개 유형.. 2022. 9. 3. [자바스크립트 응용] 슬라이드 효과03 이미지 슬라이드 효과 03 저번 시간에 이어서 세번재 시간입니다. 한단계식 계속해서 업그레이드 될 것 같네요. 2번유형에서는 딱딱해서 밋밋한 맛을 없애기 위해서 부드럽게 전환되는 효과를 주었는데요. 5번이미지에서 다시 1번이미지로 돌아갈때 빠르게 넘어가서 보기 불편하지는 않으셨는지...(전 사실..안불편했는데...할말하않) 무튼 그래서 이번엔 5번이미지 이후에도 좌측으로 넘어가서 다시 시작하는게 아닌 표현 그대로 1~5, 1~5 순환하듯이 보이는구조를 표현해 보겠습니다! 원본 소스 보기 원본 사이트 ▶ 오늘의 유형은 말씀드렸듯이 마지막 순서에서 첫번째 순서로 다시 넘어갈때 확~!하고 넘어가는게 아니라 물 흐르듯 자연스럽게 계속해서 순환하는 구조로 짜볼게요. 그러기 위해서는 이미지를 평상시처럼 5개로만 활.. 2022. 9. 1. 이전 1 2 3 4 5 6 다음 반응형
