gwooden_코린이

1. 부트스트랩을 이용한 메뉴만들기 - HTML An item A second item A third item A fourth item And a fifth one 부트스트랩을 이용해 Nav와 list 코드를 가져와 사용했다. 부트스트랩을 이용하기 위해서는 CDN 연결을 해줘야 한다. CSS CDN은 태그 아래에 넣어주고 script CDN은 태그에서 JS 링크와 jQuery 링크 보다 더 상위에 배치해줘야 올바르게 작동한다. 코드가 읽히는 순서에 따라 결과물이 달라지므로 배치에 주의할 필요가 있다. -CSS /* list 목록 기본 안보여지게 */ .list-group { display: none; } /* 클래스를 임의적으로 생성 display 보여지게 */ .show { display: block;..

//.previousElementSibling 자기자신 전에있는 형제요소 찾아줌 //.siblings 찾고 싶은 요소 다이렉트로 찾아줌 //상황에 맞게끔 활용하면 된다. $('.cart').on('click', function(e){ /* JS let name = e.target.previousElementSibling.previousElementSibling.innerHTML; */ /* jQuery */ let name = $(e.target).siblings('h5').html(); // let.temp = localStorage.getItem('name') == let temp = JSON.parse(localStorage.name); if(localStorage.getItem('name') !=..

1. 로컬 스토리지 브라우저 내의 저장공간 //추가 // localStorage.setItem(key, value); localStorage.setItem('name', 'hong'); localStorage.setItem('age', 20); localStorage.setItem('name', 'kim'); //삭제 localStorage.removeItem('age'); //조회 console.log(localStorage.getItem('name')); 2. JSON 키-값, 배열, object 사람이 읽을 수 있는 텍스트로 사용하는 표준 포맷 let arr = [1, 2, 3, 4, 5]; localStorage.setItem('arr', arr); let arr = [1, 2, 3, 4, 5];..

1. 이벤트 마우스 click - 클릭했을때 dblclick - 더블클릭 contextmenu - 우클릭 mousedown - 마우스를 누름 mouserup - 마우스 땜 mouserover - 마우스를 올려둠 mouserout - 올려둔 마우스가 나 폼 submit - 전송 focus - 포커스를 얻을 경우 키보드 Keydown - 키보드 누름 Keyup - 키보드 땜 버튼 - HTML에서 코드 작업 - HTML + JS에서 코드 작업 function msg() { alert('hi'); } JS에서 메서드를 만들어서 활용 - HTML + JS에서 코드 작업 btn.onclick = function() { alert('hello'); } JS에서 id = btn을 이용해 온클릭 이벤트를 메서드화 해서 ..

- HTML 장바구니 HTML에서 해당 .col 클래스명 부분에 영역을 1개 이상 생성하기 위해서는 같은 내용을 복사하여 늘려야 된다. 이때 늘리고 싶을때 마다 계속 반복해야 되는 번거로움과 가독성이 매우 떨어지는 문제점이 생긴다. 이를 해결하기 위해 자바스크립트를 이용해 공통적인 부분을 최대한 간결하게 처리해준다. - css img { height : 200px; } - JS, jQuery //배열로 관리 let fruits = [ {name : 'apple', memo : '빨개요'}, {name : 'mango', memo : '달달함'}, {name : 'melon', memo : '맛있음'}, ] /* js */ 내용 집어넣기 document.querySelectorAll('.card-title..

1. 자바스크립 요소(태그)들 추가 / 삭제 //태그를 생성 let div = document.createElement('div'); //태그 클래스명 지정 div.className = 'alert'; //태그안에 innerHTML을 이용해 넣어줄 내용 적어주기 div.innerHTML = 'hi'; //html 문서에 body 태그에다가 태그를 추가 document.body.append(div); 태그.append : 해당 태그 끝에 추가 태그.prepend : 맨 앞에 추가 태그.before : 태그 이전에 삽입 태그.after : 태그 이후에 삽입 1 2 3 ol.before('이전'); ol.after('이후'); let a = document.createElement('li'); a.innerH..

a x b x c x 알림창1 표시 알림창2 표시 알림창3 표시 .alert-box { background-color: aqua; padding: 10px; margin: 5px; display: none; } function show(id) { document.getElementById(id).style.display = 'block'; } function showClose(id) { document.getElementById(id).style.display = 'none'; } - 제이쿼리로 문법 다시 정리 function show(id) { //document.getElementById(id).style.display = 'block'; //document.querySelectorAll(`#${id..

1. 제이쿼리 기능 사용 uncompressed : 풀버전 (모든 기능 포함) minified : 띄어쓰기, 탭키, 스페이스바 기능이 제외된 slim slim minified 자바스크립트가 제일 마지막에 읽혀야 되기 때문에 제이쿼리는 자바스크립트 링크 위에 배치 알림창 X a a a 알림창1 표시 알림창2 표시 알림창3 표시 .alert-box { background-color: aqua; padding: 20px; border-radius: 10px; display: none; } .box { height: 100px; border: 1px solid black; } $('.box').html('hi'); $('.box').eq(0).html('hihihihihi'); function alertBox(..