누렁이의 명예의전당

상품명 가격 car2 에 저장된 자료를 저렇게 복잡하게 바꿔봅시다.왜 저런게 가능하냐면object 안에 array/object도 집어넣을 수 있어서 그렇습니다.array 안에 array/object 넣어도 상관없습니다.  Q. 그럼 car2 에 있는 50000 이라는 데이터를 뽑아서 html의 가격표시부분에 꽂아넣고 싶으면 코드를 어떻게 짜야할까요? 알아서 코드짜보시면 되는데 저런게 어려우면 콘솔창에 일단 출력부터 해보면 쉽습니다.      복잡한 데이터에서 자료꺼내려면 감상만 하고있지말고 console.log 써서 복잡한 자료를 출력부터해보면 됩니다.콘솔창에선 복잡한 자료도 어떻게 생겼는지 쉽게 축약해서 알려주는데 여러분은 여기서 시작기호만 잘보면 됩니다.  그래서 console.log(car..

var car = '소나타';var carPrice = 50000;var carColor = 'white'; 위와 같이 여러 데이터들을 변수에 저장할 일이 생김 -Array 자료형 var car = ['소나타', 50000, 'white'];  var car = ['소나타', 50000, 'white'];car[1] = 60000;console.log(car[1]); 대괄호를 열고 자료를 콤마로 구분해서 집어넣으면 됨 -Object 자료형 var car2 = { name : '소나타', price : 50000 };중괄호를 열고 자료를 콤마로 구분해서 집어넣으면 됩니다.그런데 자료 왼쪽에 자료의 이름을 붙여서 저장해야합니다. 자료의 이름은 key 실제 자료는 value key : value 형태로 자료를..

직접 자바스크립트 코드를 처음부터 짜기 귀찮으면남들이 만들어놓은 라이브러리를 사용해도 됩니다.UI 개발도 마찬가지로 복사 붙여넣기식으로 멋진 UI 개발이 가능합니다. 그렇다고 복붙식으로 포트폴리오를 만들면 개발실력이 아니라 복붙실력이 어필됩니다.       1. Swiper 캐러셀 (이미지슬라이드되는거) 만들고 싶으면 직접 코드 짜도 되겠지만좀 이쁘게 아니면 쉽게 여러기능을 만들고 싶으면 Swiper 라이브러리 써도 됩니다.호환 잘되고 이미지 lazy loading 이런 것도 되고 터치/드래그도 됩니다.  https://swiperjs.com/get-started#use-swiper-from-cdn여기가서 튜토리얼 그대로 js 파일, css 파일을 다운받아서 첨부한 뒤에html css js 예제코드 복사..

for (let i = 0; i 함수를 쓰면 킨 코드를 짧은 단어로 줄일수 있다. 줄였을때 재사용이 편리, 나중에 읽었을때 이해가 쉬워짐  for (let i = 0; i  함수로 코드를 싸맬 때 변수를 전부 파라미터로 바꿔주는게 좋음 i부분을 파라미터로 바꿔준다. 이제 함수 사용할 때탭열기(0) 이러면 0번 탭이 열림탭열기(1) 이러면 1번 탭이 열림탭열기(2) 이러면 2번 탭이 열림  이벤트리스너를 3개 -> 1개로 줄일 수 있다. 버튼 3개의 부모인 여기에 이벤트리스너 1개만 있어도 탭기능 만들 수 있음 버튼 뭘 누르든 간에 에 붙은 이벤트리스너도 동작하니까요.  왜냐면 이벤트버블링이 항상 일어나기 때문입니다.  $('.list').click(function(){ 지금 누른게 버튼 0이면 탭열기..

모달창 배경을 누르면 닫히는 기능을 추가해봅시다  모달창의 검은 배경을 누르면 모달창이 닫히는 기능을 추가해봅시다.   모달창 내용 ▲ 모달창 HTML은 대충 이런 식으로 코드가 짜여있고모달창 오픈할 때 show-modal 클래스명을 넣어서 오픈했다면    document.querySelector('.black-bg').addEventListener('click', function(){ document.querySelector('.black-bg').classList.remove('show-modal');})이렇게 코드짜면 될듯요 그럼 검은 배경 눌렀을 때 모달창이 잘 닫힙니다.  근데 이상한 점이 하나 있습니다.검은배경 뿐만 아니라 흰배경, input, 글자 등 모달창 내부의 어떤걸 눌러도..

탭기능 완성해보기 - 버튼0 누르면1. 버튼0,1,2에 붙어있던 orange 클래스명 전부 제거하라고 코드 3줄 짜기2. 버튼0에 orange 클래스명 부착3. 박스0,1,2에 붙어있던 show 클래스명 전부 제거하라고 코드 3줄 짜기4. 박스0에 show 클래스명 부착그대로 코드짜면 된다고 했습니다.   $('.tab-button').eq(0).on('click', function(){ $('.tab-button').removeClass('orange'); $('.tab-button').eq(0).addClass('orange'); $('.tab-content').removeClass('show'); $('.tab-content').eq(0).addClass('show');})한글로 써놓고 번역..

이렇게 생긴 UI를 탭이라고 합니다.어떻게 만드냐면 그냥 UI 만드는 step 그대로 따라가면 완성입니다. 버튼3개, div 박스 3개 만들어두고버튼누르면 거기 맞는 div박스를 보여주면 끝입니다.   Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping  아무데나 복사붙여넣기하면 탭나옴 어떻게 만들었는지 설명하자면 1. 태그로 버튼 3개 만들었습니다.2. 태그로 박스 3개 만들었습니다.3. 제가 만든 orange 클래스명을 추가하면 버튼누른듯한 효과를 줄 수 있습니다 (매우편리) 4. 제가 만든 show 클래스명을 추가하면 박스를 보여줄 수..

숙제1. 페이지 스크롤바 100px 내리면 로고 폰트사이즈 작게 페이지 스크롤바를 100px 이상 내리면 폰트사이즈 작게만들라고 코드짜면 됩니다.근데 이 코드를 언제 실행해야되겠습니까  대충 스크롤바 만질 때 마다 코드 실행하고싶으면 스크롤 이벤트리스너 쓰면 됩니다.   숙제2. 회원약관 박스 거의 끝까지 스크롤하면 alert 띄우기 div 박스 찾아서 div 박스 스크롤양 + 보이는높이 == 실제높이 비교하면 된다고 했습니다. 근데 정확히 일치하는 경우는 잘 없어서 등호말고 부등호 이런거 쓰면 됩니다.  $('.lorem').on('scroll', function(){ var 스크롤양 = document.querySelector('.lorem').scrollTop; var 실제높이 = documen..

오늘의 학습목표 1. 스크롤바를 100px 내리면 로고 폰트사이즈를 작게 만들어오십시오.반대로 100px 미만으로 내리면 로고 폰트사이즈를 크게 만들어옵시다.  2. 회원약관 박스를 거의 끝까지 스크롤하면 alert를 띄워줍시다.  문제 1. 스크롤바 100px 내리면 로고 폰트사이즈 작게 만들기  .navbar { position : fixed; width : 100%; z-index : 5}.navbar-brand { font-size : 30px; transition : all 1s;} 일단 상단메뉴는 상단고정하고 로고 폰트사이즈를 키운 채로 시작합시다.그리고 스크롤바를 100px 정도 내리면 폰트사이즈를 줄여봅시다.그럼 스크롤바를 얼마나 내렸는지 알 수 있어야겠군요  window.addE..

함수 function 문법은 긴 코드를 축약해서 사용가능하게 하고 파라미터로 기능업그레이드도 가능하다. return은 함수를 쓰고난 자리에 퉤 하고 그대로 대체하는 역할이다. function 함수(){ return 123}console.log(함수());  함수() 를 출력하면 그자리에 그대로 return 값인 123 이 남게된다. 함수를 사용해서 그자리에 어떤 값을 남기고 싶을때 return 문법을 사용한다.  function 함수(){ console.log('안녕'); return 123 console.log('반가워');}함수(); return 은 함수 종료의 뜻도 가지고 있다. 함수안의 코드가 길면 한줄한줄 실행하는데, 이때 return을 만나면 즉시 종료된다. 위 함수에서 console...