본문 바로가기

분류 전체보기235

제이쿼리 swiper 슬라이더 오류 해결 swiper.min.js.map 404 swiper 오류 해결 swiper.min.js.map 404 swiper.min.js 파일 맨 밑에 //더 추가후 저장하면 prettier 가 적용되어 줄이다 내려감으로 prettier 에서 파일 제외를 먼저 해준다. 그 다음 // 추가후 저장 ////# sourceMappingURL=swiper.min.js.map 2022. 10. 20.
제이쿼리 swiper 슬라이더 셋팅 적용 슬라이더 제작방식 자체제작: 일반적인 경우가 아니므로 분석시간이 소요됨(최소 5일), 레퍼런스가 있어야함 라이브러리 활용 종류 slick 가장 먼저 개발됐으며 익스하위버전 호환됨 swiper 커스텀 옵션이 매우많음, 모바일특화 swiper4 * swiper4버전 사용해야함, 5버전이상에서 ie호환안됨 bxslider 하코사(하드코딩을사랑하는사람들) 게시물에 누군가 답을 달아주는 바람에 사용자가 조금 생김 주의 라이브러리 사용시 실 사이트에서 많이보이는 것을 사용해야함 js라이브러리는 cdn방식(링크연결방식)은 주소가 변경될 수 있기 때문에 사용X, 파일을 직접 연결! 다운로드 파일중 min 붙은 js 파일. css 파일을 작업중 폴더에 복붙 - github -> swiper4 브랜치로 이동 -> dist.. 2022. 10. 20.
제이쿼리 github 사이트 슬라이더 소스 보기 전세계 개발자들의 코드 관리 사이트 https://github.com/ GitHub: Where the world builds software GitHub is where over 83 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com swiper 검색 swiper 의 모든 소스가 다있다. https://github.com/nolimits4web/swiper GitHub - nolimits4web/swiper: Most m.. 2022. 10. 20.
05_효과메서드,jQueryUI확장라이브러리,헤더전체메뉴 [효과메서드] addClass(),removeClass(),toggleClass(),hasClass() slideUp(),slideDown(),slideToggle() fadeIn(),fadeOut(),fadeToggle() show(),hide(),toggle() animate() - jQuery UI 확장라이브러리 사용시 easing옵션 변경가능 stop() ​ 주력사용 addClass() 제일중요 ​ 클래스 추가 addClass(), 클래스 지우기 removeClass(), 이벤트 안에서 왔다갔다 toggleClass(), hasClass() 언제사용하나? 이렇게 같은 사이트에서 스크롤을 내릴시 헤더의 색이 은은하게 변경된다. 예제 연습하기 #header { background: #ddd; tran.. 2022. 10. 20.
04_이벤트바인팅,이벤트객체, 이벤트전파 제이쿼리 이벤트란 ? 어떤동작이 발생되는것을 의미 예 ) 팝업띄우기, 마우스 버튼 누르기, 윈도우 사이즈 작아지기 스크롤바 움직이기 등 이벤트가 발생했을때 작동하는 실행문을 연결하는 것을 이벤트핸들러 라고한다 보통 이벤트 이름에 'on'을 연결해여 사용 만약 click 이벤트가 발생되었다면 onclick 이벤트핸들러가 작동하여 작업을 실행 작성법 $(function () { $('.선택자') .이벤트핸들러('이벤트명', function () {실행문} }); }); 예제 scroll 이벤트 (페이지 바닥감지) 스크롤 이벤트는 무엇인가? 우리가 브라우저 창에서 스크롤을 내리면 팝업창이 뜨거나 새로운 정보들이 뜰때가 있다. 이런 효과를 제이쿼리 window 객체인 scroll 이벤트로 쓰이며 반드시 trig.. 2022. 10. 20.
03_탐색메서드 $this 사용 $(this) 이벤트가 걸린 요소 자기자신 find() 이벤트 발생 대상 안쪽요소 탐색 prev() 이전요소 선택 / 모두선택 prevAll next() 다음요소 선택 / 모두선택 nextAll children() 선택요소의 자식요소 모두 선택 sibilings() 자신제외 (이벤트 발생 대상) 형제요소 모두선택 parent() 이벤트 발생대상의 부모 선택 closest() 자신의 조상 선택 end() 메서트 체인으로 여러요소 선택한 경우 이전요소 선택 $(this) .find('.depth02') .css('background', 'red') .end() .css('border', '10px solid black'); 제이쿼리 탐색 메서드는 자바스크립트엔 없는 기능이다. $(this) 제이쿼리 this.. 2022. 10. 20.
02_필터선택자(eq,even,odd,gt(),lt()) 필터선택자 종류 :eq (index) index 번호가 짝수 n번째 선택 지정값 선택 제이쿼리 배열인덱스 순서 0>1>2>3 0이 첫번째이다. :even index 번호가 짝수 n번째 선택 짝수값 선택 :odd index 번호가 홀수 n번째 선택 홀수값 선택 :gt (index) index 지정값보다 큰값 선택 초과 값 선택 :lt (index) index 지정값보다 작은값 선택 미만 값 선택 지정값 선택하기 :eq() 지정값을 선택하는 방법은 2가지가 있다. 함수에 작접 인덱스 값 입력 eq 메서드로 넣기 $('#header .gnb>li:eq(3)').css('border', '2px solid red'); $(function () { var idx = 3; $('#header .gnb>li:eq('.. 2022. 10. 20.
01_제이쿼리로 돔 조작하기 기본 설명, 선택자 $는 제이쿼리 선택자 함수 실행을 뜻한다. 실행시 제이쿼리는 body 문서를 확인후 작동하므로 document.ready() 를 사용해야하지만 생략가능. 선택자 함수 실행시 제이쿼리 객체가 return 되어 제이쿼리 메서드를 연결 할 수 있다. 자바스크립트 함수의 기본 실행문 축약문법 $(document).ready(function(){}) $(function () {}); ready 축약형을 사용하여 dom이 로딩된 후 안쪽 코드 실행 기본문법으로 사용 제이쿼리 명령어 사용법 1 #(' 선택자명 ') .명령어 () 2 #(' 선택자 ') .명령어 ( function (){실행문}); 익명함수 형식으로 사용 제이쿼리 선택자 함수 사용법은 css 와 동일하다 console.log($('#header .in.. 2022. 10. 20.
자바스크립트 자료형 데이터타입 / 연산자 종류 데이터형 자바스크립트란? 프로그램제작에 쓰이는 여러 데이터 기본자료형 (데이터타입) : 변수에 담을 수 있는 데이터 유형을 말한다. 1. 문자열 string 1. 문자열 string 문자를 사용할때 '' 홑따음표와 사용 ,, 쉽표로 연결 연산가능 문자열 안에 따음표를 쓸때 "test1", 'test1' 같이 내부와 외부 다른 따음표 사용가능 이스케이프 문자 활용 (한가지 따옴표로 일관되게 사용하고싶을때 따옴표 앞에 \ 입력 문자 그대로 사용) var str = '문자'; 이스케이프 문자 종류 \' 작은따옴표 \" 큰따음표 \\ 역슬래쉬 \n 줄 바꿈 \r 캐리지 리턴 \t 수평탭 \b 백 스페이스 \f 폼 피드 2. 숫자 Number 정수와 유리수의 구분 없이 숫자를 저장할수 있음 연산자를 이용해 사칙연.. 2022. 10. 15.
자바스크립트 변수 자바스크립트 변수란? 프로그램을 만들때 필요한 데이커, 데이터를 관리하는 시스템 , 관리체계 변수 만들기 1. 변수 선언하기 데이터를 담을 변수를 만들어 이름 지정 var 변수명; 2. 변수 초기화 만들어진 변수를 데이터에 담기 변수명 = 데이터; 3. 변수의 변형과 사용 데이터 변경을 위해 데이터 바꾸기 or 추가 메서드 함수 사용 4. 프로그램 완성 완성 출력하기 예시 var num01 ; num01 = 5; var num01 = 5; console.log(num01); 명령어 변수명; 면수명 = (대입연산자) 데이터 ; 결과 num01 = 5이다 console.log(num01); 크롬출력하기 변수만들기 응용 결과값 풀이 1 var num01; num01=5; console.log(num01); 5.. 2022. 10. 15.
자바스크립트 기본지식- 용어,문장,서식 자바스크립트란 무엇인가? 웹페이지는 3 레이어로 이루어져 있다. 1차 html 마크업 2차 css 디자인 3차 자바스크립트로 동적구현 자바의 용어 이해하기 카페라떼 만들기에 비유해보자 1. 라떼커피를 만들기 위한 재료방 - 변수 2. 커피 옵션을 계산하기 위한 계산식 - 연산식 3. 조건에 맞는 반복적인 작업문 - 제어문 4. 주문버튼 - 실행문 자바스크립트 문장 만들기 로봇에 명령하듯이 단계를 나누어 하나하나 명령해야한다. 선언식 : var main = "text" 오브젝트. 메서드 (); 오브젝트. 속성; 이때 메서드와 속성의 작성 방식이 조금 다르다. 메서드와 속성은 작성방법 메서드 객체(오브젝트) . 메서드 (); 뒤에 (); 속성 객체(오브젝트) . 속성 ; ; 문장을 끝낼땐 ; 사용 만든 문장.. 2022. 10. 14.
공부하면서 정리하기 자바스크립트는 끝에 ; 세미콜론으로 문장 끝을 알린다. 함수의 이름은 항상 대문자로 시작한다. 번수, 속성, 함수, 메서드의 이름은 항상 소문자로 시작 ( 카멜표기법 ) 여러단어로 이루어진 식별자는 각 단어끝을 대문자로 식별자(단어) 뒤에 () 없으면 단독 사용시 변수 / 다른식별자랑 사용은 속성 식별자(단어) 뒤에 () 있으면 단독 사용시 함수 / 다른식별자랑 사용은 메서드 문자열 string 문자는 '' , + 사용 연결 이스케이프 문자 \사용 ＼’ 작은따옴표 ＼" 큰따옴표 ＼＼ 역 슬래시 ＼n 줄 바꿈 ＼r 캐리지 리턴 ＼t 수평 탭 ＼b 백 스페이스 ＼f 폼 피드 숫자 Number 산술연산자 + 더하기 (문자일땐 연결/ 숫자는 더해줌) - 빼기 * 곱하기 / 나누기 % 나머지 (짝/홀수로 나눌때 .. 2022. 10. 14.

티스토리툴바