43일차

---

HTML, CSS, JS 활용 14강 패스워드 숨김, 보임 모드 변경

---

CODEPEN
선생님 영상

기능 요약

• 비밀번호 입력창의 type을 password ↔ text로 토글
• 버튼 클릭 시 비밀번호를 볼 수 있게 하고, 다시 누르면 숨김

핵심 JS 코드
$('.btn-eye').click(function () { let input = $(this).prev(); let inputType = input.attr('type');
if (inputType === 'password') { input.attr('type', 'text'); } else { input.attr('type', 'password'); } });

코드 해석

코드	설명
$('.btn-eye')	눈 모양 버튼 선택
.click(function () { ... })	버튼 클릭 시 함수 실행
let input = $(this).prev();	버튼 앞에 있는 input 요소 가져옴
input.attr('type')	현재 input의 타입 확인 (password or text)
input.attr('type', 'text')	입력 타입을 텍스트로 변경하여 보이도록 함
input.attr('type', 'password')	다시 비밀번호 타입으로 변경해 숨김

핵심 정리표

개념	설명
.attr('type')	속성 읽기
.attr('type', 'value')	속성 변경
.prev()	바로 앞 형제 요소 선택 (input)
type="password"	비밀번호 형태로 입력값 숨김
type="text"	일반 텍스트로 입력값 보임

한줄 요약
눈 아이콘 버튼 클릭 시 password 입력창이 text로 전환되어 비밀번호를 숨기거나 보여주는 기능을 구현함.

---

HTML, CSS, JS 활용 15강 mouseenter시에만 호버 발동하는 효과

---

cubic-bezier
CODEPEN
선생님 영상

문제 요약
기존 hover는 마우스가 나갔다 다시 들어오면 애니메이션이 다시 실행되지 않음.
하지만 이 예제에서는 mouseenter시에만 애니메이션이 발동하도록 구현함.

코드 설명

html
<div class="box-wrap">
<div class="box"> </div>
</div>

• box-wrap: 감싸는 영역 (hover 대상)
• box: 애니메이션 대상

CSS
.box-wrap { width: 200px; height: 200px; background-color: lightgray; overflow: hidden; }
.box { width: 100%; height: 100%; background-color: tomato; transform: scale(1); transition: transform 0.3s cubic-bezier(.17,.67,.83,.67); }

• .box는 기본 scale(1)에서 transform 속성을 애니메이션 줌
• transition은 부드러운 효과를 위해 cubic-bezier 커브 사용

js
const boxWrap = document.querySelector(".box-wrap");
const box = boxWrap.querySelector(".box");
boxWrap.addEventListener("mouseenter", function () { box.style.transform = "scale(1.2)"; });
boxWrap.addEventListener("mouseleave", function () { box.style.transform = "scale(1)"; });

• mouseenter: 마우스가 처음 들어올 때만 실행됨
• mouseleave: 나갈 때 원상복귀
• 이 구조 덕분에 마우스가 다시 들어올 때마다 애니메이션이 재실행됨

비교표

항목	기존 hover 방식	이번 구현 방식
마우스 다시 진입 시	애니메이션 다시 실행되지 않음	진입할 때마다 실행됨 (mouseenter)
CSS만 사용	가능하지만 재실행 제어 어려움	JS로 mouseenter / mouseleave 제어
인터랙션 제어	제한적	완벽한 제어 가능

핵심 정리표

항목	내용
주요 개념	mouseenter / mouseleave 이벤트 사용
대상 선택	.box-wrap에 이벤트 걸고, .box 조작
애니메이션	transform: scale() + transition
커스텀 효과	cubic-bezier 커브로 자연스러운 애니메이션

한줄 요약
mouseenter / mouseleave 이벤트를 사용하여 마우스가 들어올 때마다 호버 애니메이션을 재실행하도록 구현함.

---

HTML, CSS, JS 활용 16강 스와이퍼 사용법, 응용법

---

swiperjs
swiperjs demos
slick
-slick demo
CODEPEN
선생님 영상

주요 목표

• Swiper.js를 이용해 반응형 슬라이더 구현
• 좌우 슬라이드, 페이지네이션, 네비게이션 버튼, 루프 기능 적용

코드 설명

html
<!-- Swiper 구조 -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 페이지네이션 -->
<div class="swiper-pagination"> </div>
<!-- 버튼 -->
<div class="swiper-button-prev"> </div>
<div class="swiper-button-next"> </div>
</div>

• swiper, swiper-wrapper, swiper-slide는 필수 구조
• 옵션으로 swiper-pagination, swiper-button-prev/next 포함 가능

CSS
.swiper { width: 100%; height: 300px; }
.swiper-slide { background-color: skyblue; display: flex; align-items: center; justify-content: center; font-size: 2rem; }

• 기본 배경색과 정렬만 설정.
• 슬라이드가 가운데 정렬되고, 스와이퍼 전체 크기는 100% x 300px

js
const swiper = new Swiper(".mySwiper", { loop: true, pagination: { el: ".swiper-pagination", clickable: true, },
navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, });

옵션 셜명

옵션	설명
loop: true	슬라이드 무한 반복
pagination	하단 점(dot) 추가 + 클릭 가능
navigation	좌/우 버튼 추가 (prev/next)

구조&비교표

요소	역할	필수 여부
.swiper	슬라이더 전체 래퍼	✅ 필수
.swiper-wrapper	슬라이드 그룹 래퍼	✅ 필수
.swiper-slide	각각의 슬라이드	✅ 필수
.swiper-pagination	점(페이지네이션) 생성	선택적
.swiper-button-prev/next	네비게이션 버튼	선택적

핵심 정리표

항목	내용
라이브러리 사용	Swiper.js – CDN으로 불러옴
주요 기능	무한 슬라이드(loop), 버튼 내비게이션, 페이지네이션
사용 목적	반응형 슬라이더 구현
응용 가능성	썸네일 네비게이션, 카드 슬라이더, 자동재생 등 다양한 커스터마이징

한줄 요약
Swiper.js를 활용해 간단하고 반응형이며, 버튼·페이지네이션까지 지원하는 슬라이드 UI를 구현할 수 있다!

---