자바스크립트 스터디 작업 정리. 많이 쌓아서 부자되자. 😏
- 자바스크립트로 테이블 5*5 만들고 1~25까지 각 셀에 숫자 넣기
- 테이블은 마크업으로 만들어둔 상태에서 숫자만 스크립트로 넣기
- 1번을 제이쿼리로 만들기
- 숫자를 역순으로 25 ~ 1 까지 넣기
- 구구단 만들기 5. 1부터 100까지 합
- 테이블이 여러개일때에도 각각의 테이블에 1~25까지 숫자 입력
- 탭 - 기본탭 - 탭안에 탭 - 탭이 여러개일때 탭 안에 탭
- 아코디언 - 클릭시 본문 열림 닫힘
- 아코디언 += 다른 리스트 닫힘
- 아코디언 += 전체 펼침 닫힘 버튼
- 체크박스 전체 선택 전체해제
jQuery Effect & Event
- 상단 헤더 스크롤 내리면 헤더 전체 background-color 변경
- 헤더 버튼을 클릭하면 해당 버튼과 연결된 box로 스크롤 이동
- 헤더 버튼 클릭하면 클릭된 버튼 background-color 변경
- 버튼에 마우스 커서 들어가면 애니메이션 진행
- 스크롤 되어있는 장소에 위치하면 연결된 버튼 컬러도 바뀌게끔
jQuery Scroll
jQuery Pop-up
- 화면을 꽉 채운 팝업
- 버튼을 클릭했을때 해당 팝업이 노출된다. show , fadeIn, fadeIn + animate
- 포커스가 레이어 안에서만 돌아야된다. focus() , blur(), keyup, keydown, function(e), e.keyCode, tabindex
- 닫기 버튼을 눌렀을때 팝업 노출을 시켰던 버튼으로 다시 포커스가 가야한다.
- 딤이 있는 팝업
- 화면의 가운데에 노출되어야한다.
- 화면의 사이즈가 레이어팝업보다 작을때 :
-
레이어팝업은 화면의 최상단에 붙는다.
-
전체 높이, 전체 너비의 한가운데에 뜨고, 화면의 스크롤을 조절해서 레이업팝의 최상단으로 화면을 맞춘다.
- 팝업 구성 방법
- 팝업의 본문만 두고, 껍데기는 가상으로 그려준다. 2) html에 팝업의 모든 내용을 다 넣어두고 노출만 시킨다. 3) 버튼과 레이어팝업의 매칭 ( 팝업이 여러개일때 ) 4) 팝업안에 팝업 ( 딤 중복되면 안됨 )
- 팝업 구성 방법
jQuery Pop-up
- 레이어 활성화 함수 만들기
- 레이어 비활성화 함수 만들기
- ecma6 추가된 부분
- javascript로 짠 코드는 jQuery로, jQuery로 짠 코드는 javascript로 바꿔서 만들어보기.
jQuery Pop-up
- 레이어 화면 노출 위치 조절하기 (레이어 타입별 조절)
- 이중 레이어
- 윈도우팝업
노출 위치를 조절하는 최소 단위는 1280*800 정도
CSS3으로만 조절 가능 (**벤더 프리픽스 필수 : css-auto-prefix)
아이폰은 특유의 바인딩 효과로 인해 스크롤이 계속 생기므로 바닥페이지에 fixed 추가하고 현재 위치의 위치값을 받아서 margin 등으로 조절해야 한다.
CSS로 조절하는 방법
1. position & translate
2. table, table-cell
3. display flex
스크립트로 조절
jQuery Plugins
- Slick
- Tweenmax
장점 : 반응형 세팅하기에 용이함.
커스텀페이징도 확인할 것
커스터마이징한 배열을 변수로 담아 재사용할 수도 있음.
1.8.1과 그 이하 버전과 slide 클래스 넣는 방법이 다르다.
가볍고 유연한 애니메이션 도구.
tweenlite 를 가장 많이 쓴다.