사이트를 모바일 기기로 테스트 하고 싶으면 크롬 개발자도구 좌상단 toggle device toolbar 버튼 누르기모바일 기기로 테스트를 하면 스와이프가 안된다왜냐하면 마우스이벤트리스너를 달았기 때문에 모바일에서는 터치이벤트리스너를 달아줘야 터치에 반응을 한다touc

마우스로 잡아 끌면 다음 사진이 나오게 하기기능1. 드래그한 거리만큼 사진도 왼쪽으로 움직여야한다기능2. 마우스를 떼었을 때 일정거리 이상 이동했으면 사진2를 보여주고 아니면 사진1을 보여준다기능1 먼저 만들기 위해서는 알아야 할 이벤트가 3가지 있다마우스로 어떤 ht

참고 사이트 : apple.com/apple-music스크롤 바 일정부분을 내리면 카드가 더이상 올라가지 않고 정지하는 애니메이션입니다우선 깨끗한 HTML 파일에 jQuery와 CSS파일을 첨부 한 후이미지 3개를 배치한다긴 배경에 카드 3개를 배치하고 position

참고 사이트 : apple.com/apple-tv-4k스크롤이 되었을 때 화면에 고정되는 요소를 만들고 싶을 때 사용할 수 있는 CSS속성이다.position : fixed 는 항상 화면에 고정되는 요소를 만들 때 사용한다고 배웟는데position : sticky 는

장바구니 기능을 만들어 보는 시간!유저가 구매버튼을 누르면 그 상품명을 어딘가 저장하면 끝인데실제 서비스였으면 서버로 보내서 DB에 저장하는게 좋지만 우리는 서버가 없기 때문에 브라우저 저장공간을 이용하면 된다크롬 개발자도구의 Application 탭 들어가보면Loca

Document Object Mode 이라는 뜻자바스크립트는 HTML 조작에 특화된 언어이다.하지만 자바스크립트가 어떻게 HTML 을 조작할 수 있는지 원리를 생각해본다면?? 자바스크립트와 HTML 은 분명 다른 언어이다. 그래서 자바스크립트에선 <p></p

상품 가격순 정렬버튼과 기능 만들어보기!1\. products라는 변수 안에 있던걸 가격순으로 정렬하고2\. 클릭 시 카드를 싹 지운 후 products 변수에 있던 순서대로 카드를 다시 생성하면 완성이 된다그렇다면 array 정렬하는 방법은??array자료는 순서개념

버튼 만들기console.log 로 데이터 잘 가져왔는지 먼저 확인해보기이전 강의에서 만든 카드레이아웃을 활용해보자!.done() 안에 카드 3개를 추가해달라고 요청하기카드 레이아웃을 만들고 이걸 append 하는 코드를 3번 반복했더니 카드 3개 등장!1\. 더보기버

데이터 달라고 하면 데이터 보내주는 프로그램그냥 데이터를 달라고 하면 안준다!GET요청 : 서버에 있던 데이터를 읽고싶을 때 주로 사용POST : 서버로 데이터를 보내고 싶을 때 사용 (서버는 유저데이터를 DB에 저장해주는 역할도 한다)GET 요청을 날리는 가장 쉬운

서버에서 바지 사이즈 데이터를 가져와 그 갯수만큼 ``생성배보기 맨 위에 pants 라는 변수를 만들고 서버에서 보낸 데이터라고 가정하기 **pants 데이터 갯수만큼 ``을 생성하고 싶을 땐? 반복문 사용하기!** -> pants.length만큼 반복해달라고 하면 되지만 더 쉬운 반복문이 있다 forEach 반복문 array 자료 뒤에 붙일 수 있...

지난번에 짠 코드는 확장성이 부족하다셔츠 사이즈를 95, 100 이라고 하드코딩해놓고 보여주기만 하기 때문!실제 쇼핑몰이라면 셔츠 사이즈가 매일매일 바뀔 것인데 이럴 경우 서버에서 보낸 데이터 갯수에 맞게 <option> 태그를 생성해주는 것이 좋다\-> div

<select>은 사용자가 고를 수 있는 선택지를 드랍다운 메뉴로 제공하는 <input> 이다선택지는 <option>으로 넣으면 된다\-<select> 태그도 선택 시 input, change 이벤트가 발생한다input, change 이벤트 기록은

JS에서는 덧셈기호를 사용하면 문자이어붙이기가 쉽게 가능하다!숫자 + 숫자 -> 숫자덧셈문자 + 숫자 -> 적어도 1개가 문자면 문자덧셈문자 덧셈이란 ? 문자 2개를 이어붙여줌기호 뿐만 아니라 물결기호 밑에있는 백틱기호로도 사용 가능문자 안에 변수를 넣어주는 간단한 문

조금 바뀐 car2가 가능한 이유는 object 안에 array/object를 넣을 수 있기 때문이다!array 안에 array/object 넣어도 상관 없다Q. car2에 있는 50000 이라는 데이터를 뽑아서 html 가격표시 부분에 꽂아넣어보기\-> 처음엔 자료

여러가지 자료를 한 곳에 저장하고 싶을때 사용하는 자료형대괄호를 열고 자료를 콤마로 구분해서 집어넣기(엑셀처럼 저장 가능)\-> 50000 출력array 자료에서 데이터를 뽑을 때 대괄호를 뒤에 붙인 후 x 라고 쓴다\-> x번째 자료 출력해주세요 (참고: array

모달창의 검은 배경을 누르면 모달창이 닫히는 기능을 추가해보아요모달창을 오픈할 때 show-modal 클래스 명을 넣어서 오픈했기 때문에이렇게 짜주면 검은 배경을 눌렀을 때 모달창이 잘 닫힌다근데! 검은배경 뿐만 아니라 흰 배경이나 input, 글자 등 어떤걸 눌러도

좋은 관습 : 반복적인 셀렉터는 변수에 넣어서 쓰기 셀렉터 문법은 기본적으로 작동시간이 오래 걸리기 때문에 반복되면 변수에 집어넣기! 코드를 복붙하고싶으면 for 반복문 탭기능을 보면 비슷한 코드 덩어리 6줄이 3번 반복 비슷한 코드를 발견하면 for 반복문으로 쉽

tab이란?요런거에용~버튼3개, div박스 3개 만들고 버튼 누르면 거기에 맞는 div박스 보여주기orange 클래스명을 추가하면 버튼을 누른듯한 효과show 클래스명을 추가하면 박스를 보여줄 수 있다버튼 3개를 어떻게 해결하지?ㅁ? 이렇게 생각하면 안되고가장 간단하고

바닥에서 ~5px 위치에 스크롤 바가 있을 때 alert를 띄워준다scroll 이벤트리스너 안의 코드는 1초에 60번 이상 실행된다\-> 너무 많이 쓰면 안댐여러번 실행될 수 있어서 바닥체크를 여러번 중복으로 해줘야한다html태그의 길이를 구하면 된다html에 붙이는

문제1. 스크롤바 100px 내리면 로고 폰트 사이즈 작게 만들기 상단메뉴 고정 후 로고 폰트사이즈를 키운 채로 시작하기 스크롤바를 100px정도 내리면 폰트사이즈를 줄이기 -> 스크롤바를 얼마나 내렸는지 알아야한다 스크롤 이벤트리스너 -> window 에서 스크