46일차

---

HTML, CSS, JS 활용 30강 fullpage + animate.css 조합

---

animate css
CODEPEN
선생님 영상

목표

• fullpage로 풀페이지 스크롤 구현
• 각 섹션에 도달 시, animate.css 클래스를 이용해 요소에 애니메이션 적용

사용 라이브러리
html
<!-- fullpage.js -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.js"> </script>
<!-- animate.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">

핵심 구조 (HTML)
html
<div id="fullpage">
<div class="section section-1">
<h1 class="animate__animated">Section 1</h1>
</div>
<div class="section section-2">
<h1 class="animate__animated">Section 2</h1>
</div>
...
</div>

핵심 JS
new fullpage('#fullpage', { autoScrolling: true, onLeave: function (origin, destination, direction) { const $animated = $(destination.item).find('.animate__animated');
$animated.each(function () { const animationName = $(this).data('animation'); $(this).addClass('animate__' + animationName); });
const $prevAnimated = $(origin.item).find('.animate__animated'); $prevAnimated.each(function () { const animationName = $(this).data('animation'); $(this).removeClass('animate__' + animationName); }); } });

애니메이션 적용 방식
<h1 class="animate__animated" data-animation="fadeInUp">Hello</h1>

• data-animation에 원하는 애니메이션 이름을 지정
• onLeave 이벤트에서 destination 섹션에 클래스 추가: animate__fadeInUp
• 이전 섹션에서는 해당 클래스를 제거하여 다시 진입 시 재실행 가능

주요 animate.css 클래스 예시

효과	클래스 이름
아래에서 위로	fadeInUp
위에서 아래로	fadeInDown
왼쪽에서	fadeInLeft
오른쪽에서	fadeInRight

핵심 요약표

기능	내용
풀페이지 스크롤	fullpage.js의 section 기반 이동
애니메이션 적용	animate.css 클래스 동적 추가/삭제
적용 위치	onLeave 이벤트에서 도착 섹션에 추가, 이전 섹션에서 제거
설정 방식	data-animation 속성을 사용한 유연한 설정

한 줄 요약
풀페이지 이동 시 섹션별로 애니메이션을 부여하려면
onLeave에서 .animate__xxx 클래스를 동적으로 추가/삭제하면 된다.
필요하면 afterLoad 이벤트를 활용해도 되고, 더 고급 제어도 가능

---

HTML, CSS, JS 활용 31강 텍스트 SVG로 만드는 방법

---

텍스트 SVG로 만드는 방법

• block han sans
  CODEPEN
  선생님 영상

목표

• 텍스트를 SVG 태그 안에서 <text> 요소로 표현
• CSS로 스타일링하거나 애니메이션 효과를 쉽게 부여할 수 있게 함

주요 속성 설명

속성	의미
x="50%"	SVG 기준 가로 중앙 위치
y="50%"	SVG 기준 세로 중앙 위치
text-anchor="middle"	텍스트 중앙 정렬
dominant-baseline="middle"	텍스트 기준선 수직 중앙 정렬
viewBox="0 0 800 200"	SVG의 좌표계 지정 (비율 유지에 도움됨)

CSS 스타일 예시
css
.svg-text text { font-family: 'SUIT', sans-serif; font-size: 60px; fill: #FFA552; stroke: #744C32; stroke-width: 1px; }

• fill: 텍스트 내부 색상
• stroke: 외곽선 색상
• stroke-width: 외곽선 두께 조절
• font-family, font-size: 글꼴 지정도 자유로움

SVG 사용 이유

기존 방식 (HTML + CSS)	SVG 방식
브라우저 폰트 렌더링 제한	벡터로 정확한 제어 가능
배율 확대 시 깨짐	어떤 해상도에서도 선명함
애니메이션 제어 어려움	CSS/SVG 애니메이션과 궁합 좋음

활용 예시

• 텍스트 stroke 애니메이션
• 로고 텍스트 SVG로 변환 후 fill/stroke 제어
• 타이포그래피 강조 효과

핵심 정리표

기능	내용
<svg><text> 사용	텍스트를 벡터 방식으로 표현
x, y 속성	중앙 정렬 시 필수
fill, stroke	텍스트 색상 및 외곽선 설정
장점	고해상도, 애니메이션, 정교한 디자인 제어 가능

한 줄 요약
텍스트를 SVG <text>로 표현하면 고해상도 렌더링과 CSS 애니메이션에 매우 유리하다.
디자인과 연출을 세밀하게 제어할 수 있어 로고나 타이틀에 적합
필요하다면 textPath, animate, stroke-dasharray 등을 함께 쓰면 더욱 풍부한 표현도 가능

---

HTML, CSS, JS 활용 32강 tilt.js 사용법

마우스 움직임에 반응하는 입체 카드 효과

---

tilt js

• https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js
  GIT - tilt js
  CODEPEN
  선생님 영상

목표

• tilt.js를 통해 마우스 커서에 반응하는 3D 카드 인터랙션 구현
• 별도 JavaScript 설정 없이 HTML 속성만으로 간편하게 조절 가능

HTML 구조
<div class="box" data-tilt>
<h2>HELLO</h2>
</div>

• data-tilt: tilt.js가 이 요소에 효과를 적용하게 만드는 핵심 속성

CSS 스타일 예시
body { background: #ffe09b; display: flex; justify-content: center; align-items: center; height: 100vh; }
.box { width: 300px; height: 300px; background: white; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: bold; color: #744C32; cursor: pointer; }

• 카드 스타일링 중심: 그림자, 둥근 모서리, 텍스트 정렬

JS 연결 방식
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"> </script>

• CDN으로 vanilla-tilt 불러오기
• 이후 별도 JS 코드 없이 HTML 속성만으로 작동

고급 옵션 활용 (선택 사항)
data-tilt 외에 여러 속성 조절 가능:

속성	설명	예시
data-tilt-max	최대 기울기 각도	data-tilt-max="25"
data-tilt-speed	반응 속도	data-tilt-speed="400"
data-tilt-scale	확대 비율	data-tilt-scale="1.05"
data-tilt-reverse	반응 방향 반전	data-tilt-reverse="true"

핵심 정리표

기능	설명
data-tilt	tilt.js 효과 적용 트리거
CDN 로드	JS 파일을 script로 불러오면 바로 사용 가능
CSS	카드 디자인을 세련되게 구성
효과	마우스 움직임에 따라 3D 회전 효과 발생

---

HTML, CSS, JS 활용 33강 무한하게 이어지는 marquee

---

marquee
demo

• marquee animation codepen
  CODEPEN
  선생님 영상

목표

• 텍스트 또는 콘텐츠가 좌우로 무한히 흐르는 애니메이션 구현
• marquee 태그 없이 CSS 애니메이션으로 재현
• 콘텐츠가 부드럽게 이어져 보이도록 두 번 반복

HTML 구조
html
<div class="marquee">
<div class="track">
<div class="content">무한하게 이어지는 텍스트 🎵 무한하게 이어지는 텍스트 🎵</div>
</div>
</div>

• .marquee: 뷰포트(화면 영역) 역할
• .track: 실제 움직이는 전체 콘텐츠를 담는 궤도 역할
• .content: 텍스트나 이미지 요소들, 반복해서 넣는 게 핵심

CSS 핵심 스타일
.marquee { overflow: hidden; white-space: nowrap; }
.track { display: inline-block; animation: marquee 10s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

• overflow: hidden: 벗어나는 부분 잘라냄
• white-space: nowrap: 줄바꿈 없이 한 줄 유지
• animation: marquee: 좌 → 우 또는 우 → 좌로 계속 이동

부드러운 반복을 위한 팁

• .content 요소를 한 번 더 복제해서 자연스럽게 이어지게 해야 함
  html
  <div class="content">텍스트 🎵 텍스트 🎵</div>
• 예를 들어, 같은 문장을 2번 이상 넣어주면 끊김 없어 보임

핵심 정리표

요소	역할
.marquee	뷰포트: 보여지는 영역만 보이게 함
.track	움직이는 전체 요소
.content	실제 반복될 콘텐츠 (텍스트/이미지 등)
@keyframes marquee	좌우 무한 이동 애니메이션 설정
transform: translateX(-50%)	왼쪽으로 절반만큼 이동하며 루프

한 줄 요약
끊김 없이 이어지는 무한 스크롤 텍스트는 .content 반복 + transform 애니메이션으로 구현하며, marquee 태그 없이도 CSS로 충분히 가능함
이건 웹에서 이벤트 문구, 브랜드 슬로건, 롤링 배너에 많이 쓰임

---

HTML, CSS, JS 활용 34강 다크모드 만드는 방법

---

css filter
tailwind
CODEPEN
선생님 영상

개요

• 다크모드/라이트모드를 토글 버튼으로 전환하는 기능 구현함.
• data-theme 속성을 활용해 전체 테마 상태를 전환함.

핵심 구현

html
<button class="toggle-btn">다크모드</button>
<div class="box">박스</div>

css
:root { --bg-color: #ffffff; --text-color: #000000; }
[data-theme="dark"] { --bg-color: #111111; --text-color: #eeeeee; }
body { background-color: var(--bg-color); color: var(--text-color); transition: background 0.3s, color 0.3s; }
CSS 핵심

• 기본 테마는 data-theme="light"로 설정됨
• 다크 테마는 [data-theme="dark"] 선택자 사용함

js
$('.toggle-btn').click(function () { let currentTheme = $('html').attr('data-theme'); if (currentTheme === 'dark') { $('html').attr('data-theme', 'light');
$(this).text('다크모드'); } else { $('html').attr('data-theme', 'dark'); $(this).text('라이트모드'); } });

해설

요소	설명
data-theme	HTML에 붙여 전체 테마 제어에 사용함
:root	전역 CSS 변수 선언부로, 다크/라이트 테마 전환 기준됨
toggle-btn	클릭 시 테마 상태 바꾸는 버튼
var(--bg-color) 등	CSS 변수 통해 색상 동적으로 바뀜

핵심 정리

항목	설명
테마 전환 방식	data-theme 속성으로 전체 테마 바꿈
CSS 다크모드	[data-theme="dark"] 선택자 사용
변수 적용	--bg-color, --text-color 등의 변수를 var()로 호출함
전환 효과	transition 으로 부드럽게 배경색과 글자색 전환함

한줄 요약
data-theme 속성과 CSS 변수, 버튼 클릭 이벤트를 조합하여 다크/라이트 모드를 전환함.

---

HTML, CSS, JS 활용 35강 스크롤트리거로 탑바 배경색이 섹션의 배경색에 맞게 자동변환

---

• gsap
  • https://unpkg.co/gsap@3/dist/gsap.min.js
  • https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js
  • gsap.registerPlugin(ScrollTrigger);
    CODEPEN
    선생님 영상

개요

• 스크롤 위치에 따라 각 섹션의 data-color 값을 읽어, 상단 탑바 배경색을 해당 색으로 전환함.
• IntersectionObserver 또는 scrollTop 방식 대신 each와 offset().top을 사용함.

핵심 구현 코드

html
<header class="top-bar">
</header>
<section data-color="#ff9aa2"> </section>
<section data-color="#ffb7b2"> </section>
<section data-color="#ffdac1"> </section>

css
body { margin: 0; }
.top-bar { position: fixed; top: 0; left: 0; height: 60px; width: 100%; transition: background-color 0.3s; z-index: 999; }
section { height: 100vh; }

js
$(window).scroll(function () { let scrollTop = $(window).scrollTop();
$('section').each(function () { let sectionTop = $(this).offset().top;
if (scrollTop >= sectionTop - 60) { let color = $(this).attr('data-color');
$('.top-bar').css('background-color', color); } }); });

해설

항목	설명
.top-bar	화면 상단 고정 탑바, 배경색 변경 대상
data-color	각 section이 가진 배경색 정보
.offset().top	각 section의 실제 화면 상단 위치
scrollTop	현재 스크롤 위치
조건 scrollTop >= sectionTop - 60	해당 section이 화면에 들어오면 top-bar 색상 전환

핵심 정리표

기능	설명
배경색 전환	section에 있는 data-color 값을 읽어 .top-bar에 적용
기준 위치	sectionTop - 60 기준으로 해당 섹션에 도달하면 색 변경
스크롤 이벤트	$(window).scroll()로 계속 감지
성능	간단하지만 섹션이 많을 경우 each 루프로 성능 저하 가능

한줄 요약
스크롤 위치에 따라 각 섹션의 data-color 속성을 읽어 탑바 배경색을 동적으로 변경함.

---