안녕하세요!
2025년 7월 29일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 46일차 수업 내용을 정리해보았습니다.
오늘은 HTML, CSS, JS를 활용하여,
fullpage + animate.css 조합, 텍스트 SVG로 만드는 방법,tilt.js 사용법, 무한하게 이어지는 marquee, 다크모드 만드는 방법, 스크롤트리거로 탑바 배경색이 섹션의 배경색에 맞게 자동변환 에 대해 배웠습니다.
---
46일차 학습내용
28강
## 멀티 숫자 카운터, 제이쿼리 each
29강
## 00
30강
## fullpage + animate.css 조합
31강
## 텍스트 SVG로 만드는 방법
32강
## tilt.js 사용법
- tilt js(사이트 바로가기)
$('.js-tilt').tilt({
scale: 1.2, // 확대 비율
maxGlare: 0.5, // 반사광 최대 밝기
maxTilt: 15, // 최대 기울기 각도
speed: 400, // 애니메이션 속도(ms)
glare: true, // 반사광 효과 사용
reset: true, // 원래 위치로 되돌리기
})| 이름 | 설명 |
| scale: 1.2 | 요소가 마우스를 따라 움직일 때 1.2배 확대됩니다. 숫자가 클수록 더 커져요. (예: scale: 1은 확대 없음) |
| maxGlare: 0.5 | 반사광의 최대 밝기 정도를 나타내요. 0.5는 최대 50% 밝기까지 반짝입니다. (0은 아예 없음) |
| maxTilt: 15 | 마우스를 움직였을 때 요소가 최대 몇 도까지 기울어질지를 설정해요. 15도면 꽤 자연스럽게 기울어집니다. |
| speed: 400 | 마우스를 움직였을 때 애니메이션 속도(ms)를 의미해요. 400ms = 0.4초. 느릴수록 부드럽게 움직여요. |
| glare: true | 반사광 효과를 켜는 것이에요. true면 반사광이 생기고, false면 없어져요. |
| reset: true | 마우스를 떼었을 때 요소가 원래 위치로 돌아가게 할지 정하는 거예요. true면 원래대로, false면 그 위치에 멈춰요. |
33강
## 무한하게 이어지는 marquee
: Marquee는 텍스트나 이미지가 좌우 또는 위아래로 무한히 흘러가는 효과를 줄 때 사용한다.
예전에는 <marquee> 태그를 많이 사용했지만,
현재는 CSS 애니메이션으로 구현하는 것이 더 일반적이다.
---
어떻게 사용하나요?
: 보통은 아래 2가지 방법 중 하나를 복사해서 붙여서 사용합니다:
- 옛날 방식 (HTML <marquee> 태그)
- 최신 방식 (CSS 애니메이션 활용)
---
복사+붙여넣기 사이트
---
Marquee 사용이 은근 까다로운 이유!
: 단순히 복붙하면 끝일 것 같지만, 실제로는 손이 좀 많이 가는 편이다.
- 글자 수에 따라 속도나 반복 길이 조절 필요
- 폰트 크기가 다르면 다시 스타일 조정 필요
- 두께 / 간격 / 패딩 등도 고려해야 깔끔하게 나옴
- 여러 줄 또는 반응형에서 깨질 수 있음
즉, 사용할 때는 텍스트의 크기, 길이, 스타일을 잘 맞춰야 자연스럽게 보인다!
> 마키 효과는 시각적으로 눈길을 끄는 좋은 방법이지만, HTML/CSS 구조나 디자인 요소를 잘 고려해야 제대로 동작한다.
> 초보자에게는 은근히 까다로울 수 있는 부분이기 때문에, 신중하게 사용해야 한다.
34강
## 다크모드 만드는 방법
변수를 쓰는 이유
35강
## 스크롤트리거로 탑바 배경색이 섹션의 배경색에 맞게 자동변환
---
마무리
728x90