50일차

---

HTML, CSS, JS 활용 48강 탭메뉴와 스와이퍼 조합

---

swiper - slides-per-view
CODEPEN - 1부
CODEPEN - 2부
CODEPEN - 3부
선생님 영상?

1부 - 기본 스와이퍼 슬라이드 + 탭 구조

• .tab-menu > div 클릭 시, 해당 탭에 맞는 .tab-content > .swiper 영역만 .active로 표시됨
• 스와이퍼는 여러 개 존재하지만, 한 번에 하나만 활성화됨
• 탭 전환 시, 각각 다른 스와이퍼 영역을 보여주는 구조

js
$('.tab-menu > div').click(function () { var index = $(this).index(); $('.tab-menu > div').removeClass('active'); $(this).addClass('active'); $('.tab-content > .swiper').removeClass('active'); $('.tab-content > .swiper').eq(index).addClass('active'); });

2부 - 탭마다 스와이퍼 독립 작동

• 각 .swiper 마다 고유의 Swiper 인스턴스를 생성해야 동작함
• 예: .swiper1, .swiper2, .swiper3식으로 각각 구분

js
var swiper1 = new Swiper('.swiper1', { ... });
var swiper2 = new Swiper('.swiper2', { ... });
var swiper3 = new Swiper('.swiper3', { ... });

• 각 스와이퍼가 독립적으로 슬라이드 동작함
• 탭 클릭 시 .active가 붙은 스와이퍼만 보이도록 함

3부 - 탭 전환 시 스와이퍼 위치 자동 초기화

• 탭을 클릭하면 각 스와이퍼가 첫 번째 슬라이드로 돌아감

js
swiper1.slideTo(0);
swiper2.slideTo(0);
swiper3.slideTo(0);

• 탭 변경 시, 시각적으로 혼란 없도록 초기화 처리
• UX 향상을 위한 미세 조정

핵심 요약

단계	기능 요약
1부	탭 클릭 시 해당 스와이퍼만 보이게 함
2부	탭마다 별도의 Swiper 인스턴스를 생성하여 독립 작동
3부	탭 전환 시 해당 스와이퍼는 첫 슬라이드로 초기화됨

---

HTML, CSS, JS 활용 49강 텍스트 타이핑 애니메이션 1

---

CODEPEN
CODEPEN
선생님 영상

목표

• 텍스트가 한 글자씩 출력되며 타자치는 듯한 애니메이션 구현
• setInterval을 이용한 자바스크립트 제어

---

CODEPEN - 예제 1

핵심기능

• .typing-txt 안에 있는 문장을 한 글자씩 .typing 영역에 출력
• JS에서 문자열을 split("") 하여 배열로 만든 뒤, 순차 출력

js
const typingEl = document.querySelector(".typing");
const text = document.querySelector(".typing-txt").innerText.split("");
let i = 0;

setInterval(() => { if (i < text.length) { typingEl.innerHTML += text[i]; i++; } }, 150);

요약

요소	설명
innerText.split("")	한 글자씩 배열로 나눔
setInterval()	150ms마다 실행
typingEl.innerHTML += text[i]	한 글자씩 누적 출력

---

CODEPEN - 예제 2

확장 기능

• 한 문장 끝나면 다음 문장으로 전환됨 (루프)
• 여러 문장을 순차 출력
• 문장과 문장 사이에 일시 정지 시간 포함

js
const typingEl = document.querySelector(".typing"); const typingText = [ "감정을 기록해보세요." ];
let textIndex = 0;
let charIndex = 0;
function typing() { if (charIndex < typingText[textIndex].length) { typingEl.innerHTML += typingText[textIndex][charIndex]; charIndex++; } else { clearInterval(typingInterval); setTimeout(() => { typingEl.innerHTML = ""; charIndex = 0; textIndex = (textIndex + 1) % typingText.length; typingInterval = setInterval(typing, 150); }, 1000); // 다음 문장 전환 대기 } }
let typingInterval = setInterval(typing, 150);

요약

항목	설명
typingText[]	여러 문장 저장
textIndex	현재 문장 번호
charIndex	현재 글자 위치
setTimeout	문장 간 딜레이 주기

핵심 정리표

기능	구현 방법
한 글자씩 출력	split("") + setInterval
여러 문장 순환 출력	배열 + 인덱스 활용
문장 사이 딜레이	setTimeout 사용
자동 반복	인덱스 순환 (% typingText.length)

한줄 요약
타이핑 애니메이션은 문자열을 배열로 나누고, setInterval을 활용해 한 글자씩 출력하며, 배열을 순환하며 여러 문장을 반복 출력할 수 있음.

---

HTML, CSS, JS 활용 50강 키프레임을 이용한 반전

---

CODEPEN
선생님 영상

목표

• transform: rotateY()를 활용해 요소를 좌우로 회전
• @keyframes로 애니메이션 정의하여 자연스러운 뒤집기 효과 구현

주요 구현 요소

css
@keyframes flip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } }
.box { width: 200px; height: 200px; background-color: tomato; animation: flip 2s infinite; transform-style: preserve-3d; }

핵심 속성 설명

속성	설명
@keyframes flip	0도 → 180도까지 회전하는 애니메이션 정의
transform: rotateY(180deg)	Y축 기준으로 좌우 반전
transform-style: preserve-3d	회전 시 3D 공간 유지 필수
animation: flip 2s infinite	2초마다 무한 반복 회전

핵심 정리표

항목	내용
효과	요소가 Y축 기준으로 뒤집힘
방법	@keyframes + rotateY() 사용
보완	preserve-3d로 회전 유지
반복	animation: infinite 옵션 사용

한줄 요약
CSS keyframes와 rotateY를 활용하면 단순한 코드로 3D 반전 애니메이션을 만들 수 있음.

---