coding/JavaScript 25
스파르타 코딩 클럽 후기 및 클릭하면 팝업창 나오게 하기
스파르타 코딩 클럽 내일 배움 카드를 이용해 강의를 듣고 있습니다. (팝업창 관련 내용은 바로 2번으로 가주세요.) 1. 스파르타 코딩 클럽 후기 https://spartacodingclub.kr/ 스파르타코딩클럽 왕초보 8주 완성! 웹/앱/게임 빠르게 배우고 내것을 만드세요! spartacodingclub.kr 스파르타 코딩 클럽 특별 관리 시스템 스파르타 전용 메타버스는 온라인 교실이라고 생각하시면 됩니다. 듣기 전에는 이게 뭐가 좋은 거지?라고 생각했는데 담당 매니저님이 매일 관리해주시고 같이 공부하시는 분들도 옆에 계신 느낌이라 강의를 더 열심히 듣게 됩니다. 온라인 강의에서 오프라인 강의 효과를 느낄 수 있죠. 인간은 생각보다 의지력이 약하기때문에 이런 반강제적인 시스템 온라인 수강생들에게 좋다..

[jQuery] 모달창 만들기
안녕하세요. 개자이너 씸플레이입니다. 오늘은 모달 창을 만들어 볼 예정입니다. 모달 창이란? 여러분도 한 번쯤은 보신 적이 있으실 겁니다. 버튼이나 이미지를 눌렀을 때 새로운 페이지가 열리지 않고 뒤쪽에 까만 배경이 생기면서 가운데에 어떤 문구나 이미지가 뜨는 걸 보신 적이 있죠? 그게 모달 창입니다. 잘 모르겠다고요? 괜찮습니다. 이 포스팅을 마지막까지 보시면 이런 걸 모달, 모달 창이라고 부르는군 하고 어디 가서 거들먹거릴 수 있게 됩니다. 얕은 지식이니까 심하게 거들먹거리지는 말도록 해요. 1. 구조 모달창 여기에 모달창 내용을 적어줍니다. 이미지여도 좋고 글이어도 좋습니다. ① 모달 창 구조 파악하기 일단 태그는 무시하세요. 클릭하면 모달 창이 나오게 만드려고 넣은 것입니다. 중요한 것은 모달 창..
![[jQuery] 모달창 만들기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/bCdppK/btqRVpglHM6/RkskJ7Jx0e42RsJUoSuTx0/img.png)
[jQuery] 제이쿼리 가져오기
안녕하세요. 플입니다. 오늘은 제이쿼리 스크립트를 가져와볼게요. 1. jQuery CDN https://code.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr code.jquery.com 제이쿼리로 뭔가 만드는 포스팅만 올렸었지 기본적으로 어떻게 가져오는지는..
![[jQuery] 제이쿼리 가져오기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/bj32Vm/btqHGVv8uMP/TQpNzMGSJ2bvFHHszRS7s0/img.png)
[jQuery] 버튼 누르면 리스트 나오게
안녕하세요. 플입니다. 오늘은 버튼을 누르면 보이지 않던 리스트를 나오게 만들어볼게요. 1. 준비 이 더보기 버튼을 누르면 아래로 리스트가 더 나오는 작업을 해줄 거예요. 저는 구분하기 쉽게 나중에 나타나는 리스트 즉, 태그에 class를 적어주었어요. 2. 클릭 $(function(){ $('.more').click(function(){ }) }); 먼저 더보기 버튼에 클릭 메서드를 넣어줄 거예요. .click()이 클릭 메서드예요. 말은 어렵지만 클릭을 하면 이러이러한 작업을 실행해줘 라는 명령어라고 생각하시면 된답니다. 클릭 뒤에 오는 함수 function()은 이제부터 함수 안에 있는 것을 실행하겠다는 말이에요. 여러 기능을 그룹으로 묶는다고도 생각할 수 있겠네요. .more은 뭔가요? .more..
![[jQuery] 버튼 누르면 리스트 나오게](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/cpHIPt/btqEZ0VhlhH/njzw7QR6P1E2os9tWfgwm0/img.jpg)
[jQuery] 햄버거 메뉴 만들기 4 - animate()
안녕하세요. 플입니다. 오늘은 햄버거 메뉴 만들기 마지막 포스팅입니다. 1. fadeIn() 2020/05/12 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 3 - fadeIn() fadeIn()은 이전 포스팅에서 확인해주세요~ 2. 전체 코드 $('.mnb button').click(function(){ $(this).fadeOut(); $('.mnb_inner').animate({ marginRight : 0 }, 1000 ); }) $('.exit').click(function(){ $('.mnb button').fadeIn(); $('.mnb_inner').animate({ marginRight : '-40%' }, 1000 ); }) 먼저 햄버거 만들기 1부터 전체 코드를 ..
![[jQuery] 햄버거 메뉴 만들기 4 - animate()](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/s10Ru/btqD4xG0vGh/7hzBBgHJ8nwpAK0m3qFYB1/img.jpg)