전체보기

footer 높이 따라오기 사진 슬라이드 1) footer 높이 따라오기 제목1 제목2 제목3 제목4 제목5 제목1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis, ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus consequatur vero. Voluptatibus? 제목1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia..

window.height / width window.open location window.scrollY window.scrollTo header fixed 1) window.height / width 웹 페이지의 높이와 가로의 px을 출력할 수 있다. 2) window.open window.open을 사용하면 새로운 웹 페이지가 열리게 된다. ('주소', '이름', '옵션') 3초 뒤에 열리는 구글 창은 가로 300, 세로 300 크기로 열리게 된다. 3) location window.open은 새로운 페이지가 열리고 반면 location은 현제 페이지가 바뀌게 된다. 4) scrollY window.scrollY는 현재 열려있는 페이지의 가장 윗부분이 몇 px인지 나타내 준다. 5) scrollTo w..

상품리스트 상품 : 뽀로로 담기 삭제 상품 : 악어 담기 삭제 상품 : 펭구 담기 삭제 상품 : 루피 담기 삭제 상품 : 누렁이 담기 삭제 상품 : 곰 담기 삭제 장바구니 장바구니 비우기 상품리스트로 const get = (target) => { return document.querySelector(target) } const getAll = (target) => { return document.querySelectorAll(target) } // 재할당 함수 const re = () => { $l_li = getAll('.left ul li'); $r_li = getAll('.right ul li'); $add = getAll('.left ul li .add'); $del = getAll('.left ..

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는 ..

본문바로가기 본문바로가기 본문바로가기 홈 로그인 회원가입 고객문의 회사소개 사업분야 연구소 제품소개 화진뉴스 고객문의 인사말 회사소개 인사말 연혁&비전 수상실적 사업파트너 CI소개 오시는길 지속 가능 경영 CEO 인사말 우리가 사는 공동체를 위해, 건강하고 안전한 바른 먹거리 창출을 위해 노력합니다 (주)BC 대표이사 비코딩 안녕하십니까! BC 대표이사 비코딩입니다. BC는 앞선 기술과 품질, 서비스 창출로 우리가 사는 공동체의 행복에 기여하는 냉동 가공식품 및 식자재 유통 전문기업입니다. 특히 냉동 치킨 가공품에서는 차별화된 글로벌 인프라를 기반으로 높은 품질과 안정적인 최고의 상품을 제공하고 있습니다. 최근 BC는 급변하는 시대에 맞춰 새로운 미래에 대한 도약으로, B2C로의 제품확장을 본격적으로 진..

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를 사용하기 번거롭다면 함수로 정의해..

버블링 / 캡쳐링 preventDefault node 요소 요소 생성 / 이동 1) 버블링 / 캡쳐링 이벤트 캡처링 : 상위에서 하위로 이벤트 전파 이벤트 버블링 : 하위에서 상위로 이벤트 전파 하위에서 상위로 이벤트가 전파되므로 셋 box를 클릭하면 셋-둘-하나가 출력이 된다. 반대로 상위에서 하위로 이벤트가 전파되어 하나-둘-셋이 출력되었다. 2) preventDefault 링크가 걸린 이벤트를 취소할 때 사용한다. 구글 네이버 네이트 이렇게 맨 위에 preventDefault를 넣으면 a 링크를 눌러도 이벤트가 생성되지 않는다. 여러 링크를 막아야 할 땐 두 가지 방법을 사용한다. let link = document.querySelectorAll('a[href="#"]'); link.forEach(..

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..

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..