애플코딩 javascript 강의(28)
-
JavaScript 입문과 웹 UI개발(22)- Select 인풋 다루기
detai.html 상품명/ 가격 Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping 상품선택 모자 셔츠 95 100 105 tab.js function openTab(aa){ $('.tab-button').removeClass('orange'); $('.tab-content').removeClass('show'); //버튼 클릭시 해당 버튼 오랜지 색으로 $('.tab-button').eq(aa).addClass('orange'); //버튼 클릭시 해당 내용이 나오도록 함 $('.tab-content').eq(aa).addClass('show'); } $('.list').click(function(e)..
2022.10.08 -
JavaScript 입문과 웹 UI개발(21)-약간 복잡한 Array & Object 데이터바인딩
Card title 가격 : 70000 주문하기 Card title 가격 : 70000 주문하기 Card title 가격 : 70000 주문하기
2022.10.08 -
JavaScript 입문과 웹 UI개발(20)-dataset을 이용한 tab 기능
index.html Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping tab.js // 버튼 누르면 // -모든 버튼에 붙은 orange 클래스명 제거 // -버튼 0에 orange 클래스명 추가 // - div에 클래스명 추가 // -모든 div에 붙은 show 클래스명 제거 //버튼 클릭시 이벤트 처리 함수=============== // 선택자에 해당하는게 여러게 있으면 eq()로 해당 index를 선택할 수 있다. //1. 첫번째 방법 // for(let i=0; i< $('.tab-button').length; i++){ //var i로 선언하면 안된다. var은 변수 범위가 function이..
2022.10.07 -
JavaScript 입문과 웹 UI개발(19)-이벤트 버블링과 이벤트관련 함수들
index.html Shirts on Sale 로그인 로그인하세요 전송 닫기 An item A second item A third item A fourth item And a fifth one main.css :root{ scroll-behavior:auto; } .navbar-brand{ font: size 30px; } .navbar{ /* 상단고정 */ position: fixed; width: 100%; z-index: 5; } .slide-containver{ width: 300vw; transition: all 1s; } .slide-image{ float: left; /*none (기본값) : 정렬하지 않는다. left : 왼쪽으로 정렬한다. right: 오른쪽으로 정렬한다. */ width..
2022.10.07 -
JavaScript 입문과 웹 UI개발(18)-탭기능 만들며 배우는 for 반복문
detail.html Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping tab.js // 버튼 누르면 // -모든 버튼에 붙은 orange 클래스명 제거 // -버튼 0에 orange 클래스명 추가 // - div에 클래스명 추가 // -모든 div에 붙은 show 클래스명 제거 //버튼 클릭시 이벤트 처리 함수=============== // 선택자에 해당하는게 여러게 있으면 eq()로 해당 index를 선택할 수 있다. //orange,show 클래스 전체 제거 후 해당 버튼에 orange, show 추가 // for(var i=0; i
2022.10.07 -
JavaScript 입문과 웹 UI개발(17)- 스크롤 이벤트로 만드는 재밌는 기능들
index.html JSShop Dark 로그인 로그인하세요 닫기 이전 1 2 3 다음 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium fugit debitis at, laborum ipsa itaque placeat sit, excepturi eius. Nostrum perspiciatis, eligendi quae consectetur praesentium exercitationem. 강의 출처: JavaScript 입문과 웹 UI개발 https://codingapple.com/ 코딩애플 온라인 강좌 - 개발자도 단기완성! 단연 NO1 강사님의 NO.1 강의 역시나 명강..
2022.10.07