50 Project In 50 Days
1.50 Project In 50 Days - Expanding Cards
Expanding Cards 이미지 커서 시 카드가 확장되면서 CSS 애니메이션 변화 요소를 사용한 웹 프로젝트이다. HTML CSS > 1. SS의 flex아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. a
2.50 Project In 50 Days - Progress Steps
Progress Steps 버튼 클릭 시 번호와 진행 상태가 CSS 액티비한 요소로 변하는 웹 미니 프로젝트이다. HTML CSS >1. justify-content:space-between 요소는 circle 사이에 균일한 간격으로 만들어준다. 이 요소는 정말
3.50 Project In 50 Days - Rotating Navigation Animation
open 버튼과 clsoe 버튼 클릭 시 웹 페이지가 회전하는 프로젝트이다.Fas fa-times,Fas fa-bars,Fas fa-home,Fas fa-user-alt,Fas fa-envelopefont Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는
4.50 Project In 50 Days-Blurry Loading
위에 자바스크립트가 이해가 안간다.👉 이 함수는 숫자의 범위를 다른 범위로 바꿔주는 함수예요.예시로 설명할게요:scale(load, 0, 100, 1, 0)→ load가 0일 땐 1, load가 100일 땐 0이 나오도록 변환.즉, 투명도(1 → 0) 로 변환하는 거
5.50 Project In 50 Days-Scroll Animation
📌 이 코드의 역할👉 페이지를 스크롤할 때 박스(.box)가 화면에 들어오면 애니메이션처럼 나타나게 해주는 코드예요.(즉, 스크롤할 때 박스가 슬라이드되면서 보이는 효과 🎬)🔎 코드 설명1\. .box라는 요소들 가져오기const boxes = document.
6.50 Project In 50 Days-split-landing-page
7.50 Project In 50 Days-Form wave input
forEach 는 아래 코드를 콘솔로그로 찍으면 2 4 6 으로 찍힌다. 출력만 하고 끝난다.map은 반복하면서 새 배열을 만들어 반환label.innerText→ label 안에 있는 글자를 가져옴. 예: "Hello".split('')→ 글자를 한 글자씩 쪼개 배열
8.50 Project In 50 Days-Dad jokes
🔑 핵심 차이: id vs classid -> 페이지 안에서 유일(unique) 해야 함.document.getElementById('...') 같은 DOM 접근할 때 많이 씀.하나의 요소만 정확히 찍어낼 때 유리.class -> 여러 요소에서 공통 스타일 줄 때 사