★ JSON, Java Script Object Notation 자바스크립트 객체 표기법 자바스크립트의 객체를 문자열로 표현할 때 사용하는 포맷 자바스크립트에서 사용 중인 데이터(객체)를 이부 환경에 전달 > (파일입출력, 네트워크에 전달) > 하나의 문자열로 표현하는 방법 > JSON XML과 함께 데이터 전달용으로 많이 사용 언어 독립적 > 대부분의 언어/환경에서 JSON 지원 ■ 규칙 1. 반드시 프로퍼티를 쌍따옴표로 묶는다.(홀따옴표, 역따옴표 불가능) { "name" : "홍길동", "age" : 20 } 2. 반드시 값도 쌍따옴표로 묶는다.(홀따옴표, 역따옴표 불가능) -> 값 : boolean, 숫자 > 그냥 표현 가능 "name" : "홍길동", "age" : 20 3. 메소드 표현 불가능..
★ 부트스트랩, BootStrap 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS프레임워크이다. https://getbootstrap.com/docs/5.3/getting-started/download/ Download Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more. getbootstrap.com 다운로드 CDN VSCode 터미널을 이용해서 다운로드 ■ 부트스트랩 가져오기 명령어 ■ 다양한 사용 설명 https://getbootstrap.kr/docs/5.2/getting-st..
★ Slider을 이용해서 상품 목록 만들기 range : true, 버튼을 두개 생성 slide() : 슬라이더에 따른 금액 표시 ■ HTML 코드 List 가격 : 35,000원 ~ 70,000원 상품명 15000 Lorem, ipsum dolor. 50000 Blanditiis, eum nostrum. 100000 Cum, cupiditate omnis. 50000 Eos, odio eum. 40000 Iure, eligendi blanditiis. 30000 Praesentium, maiores provident! 20000 Saepe, dicta modi! 90000 Rerum, doloremque voluptate. 80000 Consequuntur, rerum eum? 70000 Distin..
★ jQuery UI https://jqueryui.com/ jQuery UI jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue jqueryui.com 원하는 탬플릿으로 다운로드 필요 파일 선언 ■ Draggable $('#cat1').draggable(); 실행 결과 axis : x | y , gri..
★ 포트폴리오 기초 디자인 HTML 코드 Software Developer Home Skill Portfolio Career Education Home Lorem ipsum dolor sit amet consectetur adipisicing elit. In, distinctio necessitatibus? Soluta, laudantium. Dolore, voluptates. Atque magni recusandae quos nobis incidunt officiis, modi aperiam facere, id sint cumque voluptate et. Ipsa, praesentium. Deleniti, neque laborum? Explicabo, praesentium porro fugiat fa..
★ Traversing 자식 //자식 //- childNodes, children $('#me').children().addClass('check'); $('#me').children().addClass('check') .css('border', '10px solid blue') .click(function() { alert($(this).text()); }); 첫째 자식 > first() 이용 $('#me').children().first().addClass('check'); 막내 자식 > last() 이용 $('#me').children().last().addClass('check'); 둘째 > eq(num) 이용 $('#me').children().eq(1).addClass('check'); 손자 ..
★ JQuery 태그 조작 1. 콘텐츠 조작 innerText, textContent > text() alert($('#box').text()); $('#box').text('홍길동'); innerHTML > html() $('box').html('안녕하세요.') value > val() alert($('#txt1').val()); $('#txt1').val('값을 대입합니다.'); 2. 속성조작 BOM : obj.prop DOM : obj.setAttribute(key, value) , obj.getAttribute(key) HTML 속성을 조작하는 메소드 obj.attr('name') obj.attr('name', value) JavaScript 프로퍼티를 조작하는 메소드(HTML 속성에는 없고, J..
★ jQuery + Box Model 상자 크기? 1. css 문법을 이용하였을 경우 //1. CSS console.log('width', $('#box').css('width')); console.log('height', $('#box').css('height')); $('#box').css('width', '500px'); 2. jQuery 문법을 이용하였을 경우 width(), height() //2. console.log('width', $('#box').width()); //수치(px) console.log('height', $('#box').height()); $('#box').width(300); 3. innerWidth(), innerHeight : width/height + padding..
