전체 글 210

자바스크립트 > switch 사용법

if else 문법 대신 쓸 수 있는 switch 라는 문법이 있습니다.if else로도 모든걸 할 수 있지만 좀 더 간단하게 적고 싶을 때 switch를 어쩌다 한 번 쓰는데어떻게 쓰는지 알아봅시다.    switch 사용법 설명하다 let 변수 = 2 + 2;switch (변수){ case 3 : alert('변수가 3이네요'); break case 4 : alert('변수가 4네요'); break}switch의 소괄호엔 조건식이 아니라 검사해볼 변수를 넣으면 됩니다. 그리고 변수가 3일 때 코드 실행해주세요~ 라고 코드짜고 싶으면case 문법 저렇게 사용하면 됩니다.그리고 코드실행을 끝내고 싶으면 break라는걸 추가해주면 됩니다. 그럼 switch 중괄호를 탈출해줍니다. ..

자바스크립트 2024.07.10

자바스크립트> 캐러셀에 스와이프 기능 만들기 (터치와 간편한라이브러리)

터치되는 캐러셀같은거 조작해보면 대충 이런 기능이 들어있습니다.기능1. 드래그한 거리만큼 사진도 왼쪽으로 움직여야함기능2. 마우스 떼었을 때 일정거리 이상 이동했으면 사진2 보여줌, 아니면 다시 사진1 보여줌기능1 부터 만들어봅시다. 근데 이거 만들려면 알아야할 이벤트가 3개 있습니다. mouse 이벤트 3개 마우스로 어떤 html 요소를 조작할 때 발동하는 이벤트가 있습니다.mousedown (어떤 요소에 마우스버튼 눌렀을 때)mouseup (어떤 요소에 마우스버튼 뗐을 때)mousemove (어떤 요소위에서 마우스 이동할 때)알아두면 유용합니다.   설명하다 캐러셀있는곳그래서 예를 들어 이렇게 코드짜면 .slide-box 위에 마우스 움직일 때 마다 '안녕'이 출력됩니다.    설명하다 캐러셀있는곳이..

자바스크립트 2024.07.10

자바스크립트>스크롤 위치에 따라 변하는 애니메이션 : Apple Music UI 만들기

참고 사이트 : apple.com/apple-music(사이트 레이아웃이 언제든 변경될 수 있기 때문에 밑 사진을 참고부탁드립니다)  (스크롤바를 일정부분 내리면 카드가 더 이상 올라가지 않고 정지합니다 ㄷㄷ)       위 UI를 만들기 위해 일단 HTML을 준비합니다. 깨끗한 HTML 파일에 jQuery와 CSS 파일 하나를 첨부해준 후이미지 3개를 다음과 같이 배치합니다.이미지 파일은 하단에 첨부되어있습니다.  설명하다  설명하다 .card-background { height: 3000px; margin-top: 800px; margin-bottom: 1600px;}.card-box img { display: block; margin: auto; ..

자바스크립트 2024.07.10