[DAY - 38] select, multiple, checkbox, radio, append, point-events
·
🔥 부트캠프-웹 개발 🔥/JavaScript
select multiple checkbox radio append point-events 1) select 고양이 야옹이 애옹이 냥냥이 양옹잉 선택 : xx select option index값을 이용해 선택한 option을 출력할 수 있다. 2) multiple 고양이 야옹이 애옹이 냥냥이 양옹잉 선택 : xx select에 multiple을 추가하면 스크롤 방식으로 나오게 된다. for of를 사용해서 복수 선택 시 모두 출력되도록 해 보았다. 3) checkbox 고양이 야옹이 애옹이 냥냥이 양옹잉 xxx checkbox의 경우 checked와 value를 이용하면 체크가 된 checkbox의 value값을 뽑아낼 수 있다. 4) radio 고양이 야옹이 애옹이 냥냥이 양옹잉 xxx radio는 ..
[DAY - 37] html, css 페이지 연습
·
🔥 부트캠프-웹 개발 🔥/HTML5
본문바로가기 본문바로가기 본문바로가기 홈 로그인 회원가입 고객문의 회사소개 사업분야 연구소 제품소개 화진뉴스 고객문의 인사말 회사소개 인사말 연혁&비전 수상실적 사업파트너 CI소개 오시는길 지속 가능 경영 CEO 인사말 우리가 사는 공동체를 위해, 건강하고 안전한 바른 먹거리 창출을 위해 노력합니다 (주)BC 대표이사 비코딩 안녕하십니까! BC 대표이사 비코딩입니다. BC는 앞선 기술과 품질, 서비스 창출로 우리가 사는 공동체의 행복에 기여하는 냉동 가공식품 및 식자재 유통 전문기업입니다. 특히 냉동 치킨 가공품에서는 차별화된 글로벌 인프라를 기반으로 높은 품질과 안정적인 최고의 상품을 제공하고 있습니다. 최근 BC는 급변하는 시대에 맞춰 새로운 미래에 대한 도약으로, B2C로의 제품확장을 본격적으로 진..
[DAY - 36] cloneNode, querySelector, 이벤트 연결 / 해제, form input txt value / checkbox / select
·
🔥 부트캠프-웹 개발 🔥/JavaScript
cloneNode querySelector 함수 작성 이벤트 연결 / 해제 form input txt value form input checkbox value form input select value 1) cloneNode cloneNode를 사용하면 대상 노드를 복사한다. true 값을 넣었으므로 자식도 복사되어 '복사'까지 clone되었다. 2) querySelector 함수 작성 let item1 = document.querySelector('.item1') let item2 = document.querySelector('.item2') let item3 = document.querySelector('.item3') 매번 document.querySelector를 사용하기 번거롭다면 함수로 정의해..
[DAY - 35] 버블링 / 캡쳐링, preventDefault, node, 요소, 요소 생성 / 이동
·
🔥 부트캠프-웹 개발 🔥/JavaScript
버블링 / 캡쳐링 preventDefault node 요소 요소 생성 / 이동 1) 버블링 / 캡쳐링 이벤트 캡처링 : 상위에서 하위로 이벤트 전파 이벤트 버블링 : 하위에서 상위로 이벤트 전파 하위에서 상위로 이벤트가 전파되므로 셋 box를 클릭하면 셋-둘-하나가 출력이 된다. 반대로 상위에서 하위로 이벤트가 전파되어 하나-둘-셋이 출력되었다. 2) preventDefault 링크가 걸린 이벤트를 취소할 때 사용한다. 구글 네이버 네이트 이렇게 맨 위에 preventDefault를 넣으면 a 링크를 눌러도 이벤트가 생성되지 않는다. 여러 링크를 막아야 할 땐 두 가지 방법을 사용한다. let link = document.querySelectorAll('a[href="#"]'); link.forEach(..
[DAY - 34] export / import, 예제
·
🔥 부트캠프-웹 개발 🔥/JavaScript
export / import 예제 1) export / import 외부 js파일에 있는 요소들을 사용하고 싶을 때 쓴다. let arr = ['1번','2번','3번','4번','5번']; export default arr; arr 배열만 test.js 파일에 추가 하고 export default arr;를 넣어준다. 그리고 script에 type을 추가 하고 import로 arr을 불러와 주면 사용이 가능하다. 2-1) 예제 xx 현재번호 0/00 let arr = []; for (let i = 0; i < 18; i++) { arr.push('사진에 대한 타이틀'+i); } let li = document.querySelectorAll('.wrap .right ul li'); let pic = do..
[DAY - 32] mouse 이벤트, 상태변수, getComputedStyle, key 이벤트, 게임
·
🔥 부트캠프-웹 개발 🔥/JavaScript
mouse 이벤트 상태변수 getComputedStyle key 이벤트 게임 1) mouse 이벤트 click 외에 마우스를 사용했을 때 함수가 실행되게 할 수 있다. btn.addEventListener('click', e => { output.innerHTML = ""; }); // 좌클릭 box1.addEventListener('click', e => { output.innerHTML += `click` }); // 더블클릭 box2.addEventListener('dblclick', e => { output.innerHTML += `dblclick` }); // 우클릭 box2.addEventListener('contextmenu', e => { output.innerHTML +=`contextm..
[DAY - 31] 상태 변수, data-, className, classList
·
🔥 부트캠프-웹 개발 🔥/JavaScript
상태 변수 data- className classList 1) 상태 변수 하나로 두 가지 결과를 얻을 때 사용한다. true, 1 / open / 텍스트 변경 / 진행 false, 0 / close / 중지 HELLO 처음 ispaly는 true이고 버튼을 클릭했을 때 isplay가 true이면 BYE를 출력함과 동시에 isplay를 false로 바꾼다. 그 뒤에 버튼을 클릭하게 되면 isplay는 false이므로 else의 실행문이 실행되어 HELLO와 BYE를 반복하며 출력하게 된다. HELLO if의 true, false 실행문에 isplay를 넣지 않고 if문이 끝난 뒤 isplay를 반대값으로 바꾸어 주는 isplay=!isplay를 사용할 수도 있다. 이렇게 되면 클릭을 하면 isplay의 값..
[DAY - 30] animate, 갤러리, 갤러리+animate, load, this, target / currentTarget
·
🔥 부트캠프-웹 개발 🔥/JavaScript
animate 갤러리 갤러리+animate load this target / currnetTarget 1) animate css의 animation와 동일한 효과를 script에서 줄 수 있다. const a = [ { transform: "rotate(0) scale(1)" }, { transform: "rotate(360deg) scale(0)" }, { transform: "rotate(0deg) scale(2)" }, ]; const b = { duration: 2000, iterations: 3, }; div.addEventListener('click', function(){ div.animate(a,b); }); div.addEventListener('click', function(){ div..
[DAY - 29] dom, querySelectorinner, 속성 추가, setAttribute / getAttribute, 이벤트 종료 방식, 증가/감소
·
🔥 부트캠프-웹 개발 🔥/JavaScript
dom querySelector inner 속성 추가 setAttribute / getAttribute 이벤트 종료 방식 증가/감소 1) dom dom : html 안에 요소 객체를 자바스크립트로 제어 dom api : 제어할 수 있는 명령어 모음 let arr = ['1번', '2번','3번', '4번','5번']; let dom = document.getElementById('box'); let ran = Math.floor(Math.random()*arr.length); dom.innerHTML = arr[ran]; dom.style.width = '250px'; dom.style.backgroundColor = 'tan'; dom.style.height = '50px'; dom.style.text..