44일차

이예진·2025년 7월 25일

HTML, CSS, JS 활용 17강 로딩화면 구현해야 하는 이유와, AOS, imagesLoaded, imgur, Image Downloade

AOS
animate css
이미지가 필요할 때 - Lorem picsum
Image Downloader
이미지 호스팅 - imgur
CDN - imagesloaded
https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.min.js

CODEPEN - 1부
CODEPEN - 2부
CODEPEN - 3부

선생님 영상

HTML, CSS, JS 활용 18강 mousemove effect

CODEPEN
선생님 영상

목표

  • 마우스 움직임을 감지하여 원(circle)을 마우스 위치로 이동시킴
  • mousemove 이벤트와 CSS transform을 활용해 부드럽게 추적하는 커서 효과 구현

전체 코드 구조

HTML
<div class="cursor"> </div>

  • 마우스 따라다닐 요소로 div.cursor 하나만 존재함

CSS
.cursor { width: 40px; height: 40px; background-color: crimson; border-radius: 50%; position: fixed; pointer-events: none; transform: translate(-50%, -50%); transition: transform 0.05s linear; }

CSS 설명

속성설명
position: fixed화면 기준 위치 고정
pointer-events: none커서가 요소 위에서도 클릭 가능하게 함
transform: translate(-50%, -50%)마우스 중심에 맞춰 위치 조절
transition움직일 때 부드럽게 이동 효과 적용

JS
const cursor = document.querySelector(".cursor");
window.addEventListener("mousemove", function (e) { cursor.style.left = e.pageX + "px"; cursor.style.top = e.pageY + "px"; });

JS설명

  • mousemove 이벤트 발생 시, 마우스 좌표 e.pageX, e.pageY를 가져와.cursor 요소의 left / top 위치에 즉시 반영함

핵심 정리표

항목설명
이벤트mousemove 사용
좌표 추적e.pageX, e.pageY
요소 위치 제어style.left, style.top
스타일 보정transform: translate(-50%, -50%) 으로 마우스 중앙 위치 보정
부드러운 이동transition 사용

한줄 요약
마우스의 움직임을 실시간으로 추적하여 원형 요소가 부드럽게 따라다니는 커서 효과를 구현함.

HTML, CSS, JS 활용 19강 aos 애니메이션 커스텀

CODEPEN
선생님 영상

목표

  • AOS(Animate On Scroll) 라이브러리를 이용해
  • 요소가 스크롤 진입 시 애니메이션 효과를 가짐
  • data-aos 속성과 aos.init() 커스텀 옵션을 활용하여 다양한 효과 적용

전체 코드 구조

HTML
<head>
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
</head>
<body>
<section data-aos="fade-up">Section 1</section>
<section data-aos="zoom-in">Section 2</section>
<section data-aos="fade-left">Section 3</section>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"> </script>
<script>
AOS.init({ duration: 1000, delay: 200, offset: 120, once: true });
</script>
</body>

주요 설정 옵셥 설명

옵션설명
duration애니메이션 실행 시간 (ms)
delay애니메이션 지연 시간 (ms)
offset화면에서 요소가 얼마나 보여야 동작할지 설정
oncetrue면 한 번만 실행됨 (스크롤 다시 올라가도 반복 안됨)

CSS
section { height: 100vh; display: flex; align-items: center; justify-content: center; font-size: 3rem; background-color: #eee; margin-bottom: 2rem; }

  • 각 섹션을 화면 전체 높이로 설정해, 스크롤 시 뚜렷하게 효과가 보이도록 구성

핵심 정리표

항목설명
사용 라이브러리AOS (Animate On Scroll)
주요 속성data-aos="효과이름"
주요 옵션duration, delay, offset, once 등
초기화 방식AOS.init({ 옵션들 })
효과 적용 대상data-aos 속성을 가진 요소

한줄 요약
AOS 라이브러리를 통해 요소에 다양한 스크롤 애니메이션을 주고, AOS.init()을 통해 타이밍과 반복 여부 등 다양한 동작을 커스터마이징함.

HTML, CSS, JS 활용 20강 앵커로 페이지 이동

CODEPEN
선생님 영상

목표

  • HTML의 id와 <a href="#id"> 구조를 활용해
  • 페이지 내 특정 위치로 부드럽게 스크롤 이동하도록 구현
  • 부드러운 이동은 scroll-behavior: smooth로 처리

전체 코드 구조

HTML
<nav>
<a href="#section1">섹션1</a>
<a href="#section2">섹션2</a>
<a href="#section3">섹션3</a>
</nav>
<section id="section1">섹션 1</section>
<section id="section2">섹션 2</section>
<section id="section3">섹션 3</section>

CSS
html { scroll-behavior: smooth; }
section { height: 100vh; font-size: 3rem; display: flex; align-items: center; justify-content: center; background-color: #eee; margin-bottom: 2rem; }

핵심 정리표

항목설명
<a href="#id">클릭 시 해당 id를 가진 요소로 스크롤 이동
id="section1" 등페이지 내에서 이동 대상의 식별자 역할
scroll-behavior: smooth부드러운 스크롤 효과 부여 (CSS로 제어)

한줄 요약
<a href="#id">와 id 속성을 활용해 페이지 내 특정 영역으로 이동하고, scroll-behavior: smooth로 자연스럽게 스크롤되도록 만듦.

HTML, CSS, JS 활용 21강 마우스 올리면 따라다니는 아이템 밑줄 애니메이션

CODEPEN - 1부
CODEPEN - 2부
CODEPEN - 3부
CODEPEN - 4부
CODEPEN - 5부
선생님 영상

목표

  • 메뉴에 마우스를 올리면 밑줄(.underline)이 해당 메뉴 아래로 따라간다.
  • 메뉴를 클릭하면 밑줄이 그 위치에 고정된다.
  • 마우스를 나가면 클릭했던 위치로 복귀된다.
  • 밑줄은 애니메이션으로 부드럽게 이동한다.

전체 코드 구조

HTML
<nav class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<div class="underline"> </div>
</nav>

  • .menu 안에 a 태그 메뉴들과 밑줄 역할의 div.underline 포함

CSS
.menu { position: relative; display: flex; gap: 2rem; padding: 1rem; }
.menu a { position: relative; text-decoration: none; font-size: 1.2rem; color: #333; }
.underline { position: absolute; bottom: 0; height: 2px; background: #007BFF; transition: all 0.3s ease; }
.menu { position: relative; display: flex; gap: 2rem; padding: 1rem; }
.menu a { position: relative; text-decoration: none; font-size: 1.2rem; color: #333; }
.underline { position: absolute; bottom: 0; height: 2px; background: #007BFF; transition: all 0.3s ease; }

  • .underline은 절대 위치로 menu 내부에서 이동
  • transition으로 자연스러운 이동 효과 구현

JS
const menu = document.querySelector(".menu");
const underline = document.querySelector(".underline");
let current = null;
function moveUnderline(el) { underline.style.left = el.offsetLeft + "px"; underline.style.width = el.offsetWidth + "px"; }
menu.querySelectorAll("a").forEach(link => { link.addEventListener("mouseenter", () => { moveUnderline(link); });
link.addEventListener("click", () => { current = link; moveUnderline(link); }); });
menu.addEventListener("mouseleave", () => { if (current) { moveUnderline(current); } else { underline.style.width = 0; } });

코드 해설 요약

요소설명
.underline마우스를 올린 위치로 이동하며 너비도 조정
offsetLeft요소의 x좌표 (왼쪽 위치)
offsetWidth요소의 너비
mouseenterhover시 밑줄 이동
click클릭 시 현재 메뉴 저장하고 위치 고정
mouseleave마우스 나가면 고정된 위치로 복귀

핵심 정리표

항목내용
밑줄 DOM 별도 생성.underline을 독립 요소로 배치
hover 시 애니메이션transition 사용하여 부드럽게 이동
클릭 시 위치 고정current 변수로 저장
마우스 나가면 복귀.mouseleave 시 current 위치로 복원

한줄 요약
마우스 hover 시 메뉴 아이템 위치/너비를 계산해 밑줄이 따라오게 만들고, transition으로 부드러운 애니메이션을 적용함.

단계핵심 기능
1부hover 시 밑줄 위치/너비 이동
2부메뉴 밑에 .underline DOM을 별도 추가
3부hover 시 밑줄이 따라오고 transition 적용
4부클릭한 메뉴에 밑줄 고정 + mouseleave 시 고정된 위치로 복귀
5부클릭 위치 저장(current) 및 이동 처리 최종 마무리

HTML, CSS, JS 활용 22강 background 속성

lorem picsum
CODEPEN
선생님 영상

설명
background 속성은 HTML 요소의 배경을 설정할 때 사용되며, 배경 이미지 삽입, 위치 조정, 반복 여부, 크기 조절 등이 가능함.

핵심 사용 속성

CSS
background-image: url(이미지경로); /* 배경 이미지 설정 */
background-repeat: no-repeat; /* 반복 여부 */
background-position: center center; /* 위치 (가로, 세로) */
background-size: cover; /* 이미지 크기 조정 */
background-color: #000; /* 배경색 */

코드 해석
CSS
.box { width: 300px; height: 200px; background-image: url(https://picsum.photos/id/10/300/200); background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: #000; }

속성의미
background-image박스에 배경 이미지 삽입
background-repeat: no-repeat이미지 반복 제거
background-position: center center이미지 위치를 박스 중앙으로
background-size: cover비율 유지하며 전체 박스 채움
background-color이미지 로딩 실패 대비 백업 배경색

핵심 정리표

개념설명
background-image배경 이미지 삽입
background-repeat반복 설정 (repeat, no-repeat, repeat-x 등)
background-position배경 위치 조절 (center, top, bottom, left, right)
background-size이미지 크기 조절 (cover, contain, px 단위 등)
background-color기본 배경색 지정

한줄 요약
background는 이미지 배경 설정 시 위치, 크기, 반복 여부 등을 제어하는 핵심 속성 세트임.

profile
이예진
헤
이전 포스트

43일차

다음 포스트

45일

0개의 댓글