네이처리 노트

기초리스트 ▶기초 ( 선언하기 $.ready() ) ▶ 속성보기 ( attr val checked disabled ) ▶ 추가 및 삭제 ( append remove before after text html ) ▶ 부모형제요소 찾기 ( parent closest children find prev next filter ) ▶ 스타일 변경하기 ( css show hide toggle addClass toggleClass ) 공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 🐟 선언하기 ID로 정확하게 선언하는 것을 권장하지만, 상황에 따라 Element나 Class로 선언 할 수 있다. 그 외의 다양한 방법으로도 선언이 가능하다. //jQuery // element 선언 let example1 =..

공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 영역 내에서 Element 순서를 마우스로 드래그하여 정렬할 수 있도록 합니다. 리스트의 형태는 CSS 프레임워크로 스타일을 다르게 구현할 수 있습니다. sortable 지정 후, 영역안에 새로운 item이 추가된다면 sortable을 다시 지정해줘야 합니다. 다운로드 : jQuery UI framework 사용방법 : jQuery interface , 블로그 가이드 list 1 list 2 list 3 $("#zone").sortable();

공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 🐟 Datepicker 다운로드 : jQuery UI framework 사용방법 : jQuery interface ▲ 텍스트입력창이므로 readonly (읽기전용)처리하여 datepicker의 기능 외 제한 // jquery $("#specialDate").datepicker(); option 및 set default //jQuery // 기본값 설정 $.datepicker.setDefaults( dateFormat: "yy-mm-dd", showMonthAfterYear: true, changeMonth: true, changeYear: true, monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월..

첫번째 게이트스톤 찾으러 온 섬에서의 미션 공략입니다. 물고기 종류 확인하기 이 섬은 수영으로 낚시하는 곳입니다. 물고기들의 형태가 다양하게 있는데, 처음에는 자물쇠와 번호로 가려져서 낚을 수 없어요. 수족관을 하나씩 만들다보면 1️⃣레벨부터 8️⃣레벨까지 차례로 잠금이 풀립니다. 물고기를 잡고 수족관을 건설하는 과정을 8번정도 반복합니다. 🐟🦐🦑🐙🦀 형태가 보이시나요?? 왼쪽부터 오징어, 노랑물고기, 새우, 작은회색물고기, 문어, 파란물고기, 회색물고기 물고기들은 색깔과 크기로 구분할 수 있어요 주의할 점은 작은 회색물고기와 큰 회색물고기를 잘 구분해야해요 간혹 작은 회색물고기가 안잡힌다는 질문이 있더라구요 ❗작은 회색 물고기는 수영하기 시작하고 조금 위로 올라가면 찾을 수 있어요❗ 마을회관에서 업그레..

마을지도 제가 기억하는 텔레포트는 먼 곳에서 마을 중앙으로 돌아오는 기능만 있었어요. 앱이 업데이트 된건지 주인공레벨이 올라서 기능이 좋아진건지 모르겠지만 결과적으로 아주 편리하게 됐어요! 텔레포트 위에 올라서면 지도가 펼쳐지고 민트색 원을 눌러주면 누른 곳으로 이동하게 되요. 민트색 원끼리도 이동이 가능하고 마을중앙으로 되돌아갈 수도 있습니다. 게임을 하다보니 지도가 있으면 좋겠다고 생각했지만 텔레포트지도는 자세하게 그려져있지 않아요 저는 이제 계속된 반복노동에 길 잃을 일은 없지만.. 게임을 하고싶은데 심하게 길치여서 힘드신 분들에게 도움이 되셨으면 좋겠네요 (b웃음) 다이아몬드 게임 진행시 처음에 등장하는 홀로그램 색상의 보석 외에 다이아몬드 광산이 생깁니다. 그리고 광산을 관리하는 다이아몬드 소득..

공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 원하는 스타일 프레임워크 및 확장기능을 선택하여 CDN 혹은 다운로드 할 수 있다. 다운로드 : https://datatables.net/download/index 사용방법 : Grid 라이브러리 datatable 사용법예제 활용예제 : https://blog.naver.com/ahero00/221505709164 테이블에서 Ajax 통신 https://datatables.net/reference/option/ajax ajax ajax Since: DataTables 1.10 Load data for the table's content from an Ajax source. Description DataTables can obtain the d..

공부하면서 정리한 내용입니다 참고한 내용은 링크를 확인해주세요 프론트엔드 개발을 빠르고 쉽게 할 수 있는 반응형 웹사이트의 프레임워크 HTML, CSS 기반의 템플릿 양식, 버튼, 네비게이션 및 기타 페이지를 구성하는 요소 포함 자바스크립트를 선택적으로 확장 할 수 있음 ‘프레임워크’라고 하는 것은 재사용이 가능한 요소들이 집합되어 있으며, 정해진 구조와 틀 안에서 이것들을 확장이 가능한 기반 코드로 이루어 짐을 뜻한다. jQuery는 라이브러리이고 부트스트랩은 프레임워크이다. 따라서 ‘부트스트랩4 프레임워크에서 jQuery 라이브러리를 사용되어 진다.’ 라고 할 수 있다. 거기다 웹 브라우저 크기에 따라 자동으로 정렬되는 ‘그리드 시스템’을 채용하고 있기 때문에 웹 페이지를 데스크탑, 태블릿, 스마트폰..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🐟 설치하기 CDN 사용 head 상단에 jQuery CDN입력하면, 인터넷에 있는 원격 jQuery 코드를 내 프로젝트로 가져오게 된다. CDN 가져오기 : https://code.jquery.com/ 다운받기 프로젝트의 리소스폴더에 다운로드, script에 리소스 파일 경로를 작성한다. 프로젝트내에 다운받는 것이 무거울 수도 있으나 수정이나 코드를 들여다보기를 원할 경우 다운받는 것이 좋다. jQeury 다운로드 : https://jquery.com/ 🐟 jQuery Quick API

공부하면서 정리한 내용입니다 참고한 내용은 링크로 확인해주세요 사용하기 쉽게 만들어 놓은 소프트웨어로 라이브러리와 프레임워크가 있다. 라이브러리 란, 내가 필요한 부품들을 재사용하기 쉽도록 잘 정리, 정돈 해놓은 것들 프레임워크 란, 만들고자 하는것이 있을 때, 필요한 공통적인 어떤 것에 대해서 미리 만들어 놓은 덩어리 웹프레임워크 TOP10 ( 2020.08 기준 ) javascript와 jQuery의 비교 // javascript let element= document.getElementById("element"); //ex let tomato= document.getElementById("tomato"); let peach = document.getElementByClassName("peach");..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 js 방법 html 방법