48일차

---

HTML, CSS, JS 활용 43강 섹션의 정중앙에 중심을 두고 회전, 메뉴아이템들도 회전

---

CODEPEN

• img src : https://i.postimg.cc/g0KwXFNH/main-line2.png
  선생님 영상?

핵심 설명

• 전체 섹션을 중심으로 .circle-menu를 회전시킴
• 메뉴 아이템들이 원형 배치되어 있고, 함께 회전
• transform: rotate() + transform-origin: center 활용
• requestAnimationFrame() 사용하여 부드러운 회전 효과 구현

구조

html
<section class="section">
<div class="circle-menu">
<div class="menu-item">A</div>
<div class="menu-item">B</div>
<div class="menu-item">C</div>
<div class="menu-item">D</div>
</div>
</section>

css
.section { height: 100vh; display: flex; justify-content: center; align-items: center; background: #111; overflow: hidden; }
.circle-menu { width: 300px; height: 300px; position: relative; border-radius: 50%; }
.menu-item { width: 60px; height: 60px; background: #fff; color: #000; border-radius: 50%; text-align: center; line-height: 60px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

js
const items = document.querySelectorAll(".menu-item"); const radius = 120; const total = items.length; let angle = 0;
function rotate() { angle += 0.5; for (let i = 0; i < total; i++) { const theta = (360 / total) * i + angle; const rad = (theta * Math.PI) / 180; const x = radius * Math.cos(rad); const y = radius * Math.sin(rad); items[i].style.transform = translate(${x}px, ${y}px) rotate(${-theta}deg); } requestAnimationFrame(rotate); } rotate();`

핵심 정리표

요소	기능 설명
.circle-menu	회전의 중심이 되는 컨테이너
.menu-item	원형 경로를 따라 배치될 메뉴 아이템
transform	위치와 회전을 동시에 제어
requestAnimationFrame()	자연스러운 무한 회전 애니메이션 구현
Math.cos / sin	극좌표 계산용 함수

한줄 요약
원 중심을 기준으로 메뉴 아이템을 원형으로 배치하고, 회전 애니메이션으로 인터랙티브한 비주얼 구성함.

---

HTML, CSS, JS 활용 44강 텍스트량에 따라 유연하게 길어지는 디자인

---

CODEPEN
선생님 영상

핵심 설명

• .item 요소에 min-height와 padding 적용하여 내부 텍스트에 따라 자연스럽게 늘어나는 카드 디자인 구현함
• 긴 텍스트도 레이아웃 깨짐 없이 처리되도록 함
• flex-wrap을 활용하여 여러 카드가 다음 줄로 자연스럽게 넘어감

구조

html
<div class="container">
<div class="item">짧은 텍스트</div>
<div class="item">조금 더 긴 텍스트입니다.</div>
<div class="item">이 텍스트는 꽤 길어서 여러 줄로 넘어갈 수도 있습니다.</div>
</div>

css
.container { display: flex; flex-wrap: wrap; gap: 20px; }
.item { flex: 1 1 200px; background: #f0f0f0; padding: 20px; min-height: 100px; border-radius: 10px; box-sizing: border-box; font-size: 16px; }

코드 해석

속성	설명
flex: 1 1 200px	기본 너비 200px, 유연하게 늘어날 수 있도록 설정
min-height	카드 높이의 최소값을 설정해서 너무 작아지지 않게 함
padding	텍스트가 카드 안에서 여백을 가지고 정렬되도록 함
box-sizing: border-box	padding과 border 포함해서 크기 계산하게 설정
flex-wrap: wrap	화면 너비 부족 시 다음 줄로 넘어감

핵심 정리표

요소	효과
min-height	너무 작아지는 것 방지
flex-wrap	반응형 줄바꿈
flex: 1 1 auto	아이템 너비 유동 조절
padding	내부 텍스트 여백 확보

한줄 요약
텍스트 길이에 따라 자연스럽게 높이가 늘어나는 카드 레이아웃 구현함.

---

HTML, CSS, JS 활용 45강 CSS로 프로그레스 바 및 숫자 카운팅 애니메이션 + full page

---

js lib
<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>

<!-- 테일윈드 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css">

<!-- full page css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.css">
<!-- full page js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/vendors/scrolloverflow.min.js"> </script>

• 30강 참고 - fullpage + animate.css 조합

CODEPEN
선생님 영상?

목표 기능 요약

• fullpage.js를 이용해 섹션별 풀페이지 스크롤 구현
• 특정 섹션에 진입했을 때:
  • 숫자 카운팅 애니메이션
  • 프로그레스 바 애니메이션

주요 구성 요소

fullpage.js 기본 구조
html
<div id="fullpage">
<div class="section">...</div>
<div class="section section--skill">...</div>
...
</div>

• .section이 fullpage의 각 영역
• .section--skill 섹션에서 카운팅 & 바 애니메이션 작동

프로그레스 바 구조 (HTML)
html
<div class="skill-bar">
<div class="bar" data-width="80%"> </div>
</div>

• data-width로 목표 너비 설정
• JS가 이 값을 읽어서 애니메이션으로 너비 변경

카운팅 숫자 (HTML)
<div class="counter" data-count="90">0</div>

• data-count 속성에 목표 숫자 설정
• JS가 0부터 해당 숫자까지 점점 증가시키며 보여줌

스크롤 진입 시 애니메이션 트리거 (JS)
js
new fullpage('#fullpage', { afterLoad: function(origin, destination, direction) { if (destination.item.classList.contains("section--skill")) {
// 프로그레스 바
document.querySelectorAll('.bar').forEach(bar => { bar.style.width = bar.dataset.width; });
// 카운트 업
`document.querySelectorAll('.counter').forEach(counter => {
let target = +counter.dataset.count;
let current = 0;
let speed = 20;

    let interval = setInterval(() => {
      current++;
      counter.textContent = current;
      if (current >= target) clearInterval(interval);
    }, speed);
  });
}

}
});`
작동 방식 설멸

• afterLoad는 특정 섹션에 도착했을 때 실행되는 fullpage.js의 콜백
• 해당 섹션이 .section--skill일 때만:
  • .bar 요소들의 width를 data-width 값으로 부드럽게 설정 (CSS transition)
  • .counter 요소의 숫자를 0부터 data-count까지 점점 올림 (setInterval 사용)

핵심 정리

요소	설명
data-width, data-count	목표 값을 설정하는 HTML 속성
fullpage.js afterLoad	특정 섹션 진입 시 트리거
setInterval	숫자를 점점 증가시키기 위한 반복 실행
CSS transition	bar 너비 애니메이션 처리

---