전체 글(169)
-
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 -
JavaScript 입문과 웹 UI개발(16)-함수의 return 문법 & 소수점 다루기
function 함수1(a){ return a+1;// 모든 수를 이진법으로 바꾸고 연산함, 그래서 소수점 연산이 약간의 오차가 있을 수 있음 console.log(73); // 함수 내에서 return 이후에 코드는 실행이 안된다 //function 함수(4)하면 5반환 // return은 함수쓰고 그 자리에 뭔가 뱉고 싶으면 return 사용 } function 함수2(a){ var b=(a*1.1).toFixed(2);//둘째 자리에서 반올림 //숫자.toFixed(몇자리) => 몇자리에서 반올림한다 // .toFixed를 사용하면 문자가 된다. //parseInt('문자') 나 parseFloat('문자')를 사용해서 다시 숫자로 만들 수 있다 return parseFloat(b); } var 변..
2022.10.04 -
JavaScript 입문과 웹 UI개발(15)-코드 3줄로 캐러셀 (이미지 슬라이드) 만들기
index.html 로그인 로그인하세요 닫기 이전 1 2 3 다음 main.css /* vh = viewport height vw = viewport width 즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다. 100vh, 100vw 가 전체 화면의 기준이 됩니다. 예를들어, 현재 스크린 크기가 height = 1000px, width = 800px 이라면 1vh = 10px / 1vw = 8px 이 될 것이고 height: 50vh; width: 25vw; 로 설정한다면 height - 500px width - 200px 실제로 이런식으로 적용이 되겠죠! % 와 차이는? 그렇다면 100% 과 100vh 설정하는 것이 무엇이 다르냐 하는 의문이 들 것입니다. 첫번째로는, vh ..
2022.10.04 -
JavaScript 입문과 웹 UI개발(14)-정규식으로 이메일형식 검증해보기
index.html
2022.10.03