전체 글 196

자바스크립트>캐러셀(이미지 슬라이드)만들기

슬라이드되는 UI들을 캐러셀이라고 합니다.어딜가나 있는 UI 라서 한번 만들어봅시다. 버튼이 많아보이는데 다 한 번에 만들려고 하면 매우 어렵습니다. 그건 천재들이나 하는 것이고가장 간단한 1개 기능만 먼저 개발하면 쉽습니다.우린 쉽게 2번 사진 보여주는 버튼의 기능만 먼저 만들어봅시다.    one-way 애니메이션들어간 UI 만드는 법은 1. 애니메이션 시작 전 화면 만들기2. 애니메이션 종료 후 화면 만들기3. 언제 종료화면으로 변할지 JS 코드짜기4. transition 추가하기 이거 그대로 하면 된다고 했습니다.     1. 애니메이션 시작 전 화면 만들기 html css로 알아서 만들면 됩니다. css 실력이 가장 중요하겠군요.   ▲ 사진이 이렇게 슬라이드되어서 보이려면사진을 미리 어떻게 배..

자바스크립트 2024.07.08

자바스크립트>변수 심화 & 버튼 클릭 횟수로 바꾸기

저번시간 숙제는 다크모드 버튼눌렀을 때 버튼 누른 횟수가 홀수면 버튼 내부 글자를 Light로 변경해주세요~버튼 누른 횟수가 짝수면 버튼 내부 글자를 Dark로 변경해주세요~코드를 짜봅시다.그대로 코드로 번역만 하면 됩니다.    설명하다 var count = 0;$('.badge').on('click', function(){ count += 1; if (count가 홀수면) { 내부글자를 Light로 변경 } else { 내부글자를 Dark로 변경 }});한글만 잘 채우면 되겠네요.count += 1 왜하냐고요?버튼누를 때 마다 버튼누른 횟수를 계속 업데이트하고싶으니까 쓴 것임     설명하다 var count = 0;$('.badge').on('click', function(){ ..

자바스크립트 2024.07.07

자바스크립트> 연산자 & 함수 테스트

and/or 연산자 if문 소괄호 안에 조건식을 여러개 동시에 입력하고 싶을 때가 있습니다.1 == 12 == 2이런거 동시에 비교해서 참이면 뭔가 코드를 실행하고 싶으면 and/or 기호와 함께 적으면 됩니다.   if (1 == 1 && 2 == 2){ console.log('안녕')}&& 기호는 논리학의 and 역할을 해줍니다.그니까 왼쪽 오른쪽이 둘 다 true면 전체를 true로 바꿔줍니다.  if (1 == 1 && 2 == 3){ console.log('안녕')}그럼 이건 안녕이 출력안될듯     if (1 == 1 || 2 == 3){ console.log('안녕')}|| 기호는 논리학의 or 역할을 해줍니다.그니까 왼쪽 오른쪽 둘 중 true가 적어도 1개 있으면 전체를 true로 ..

자바스크립트 2024.07.07