'javascript' 태그의 글 목록

본문 바로가기

[D+53] Front-end 미니프로젝트 9일차 : 리코딩 완성 국비지원 D+53 Front-end 미니프로젝트 9일차 - 리코딩 완성 - 오늘 한 일 - 리코딩 완성 파일 구성 및 내용 • style.css video { width: 100%; margin: 0 auto; z-index: -5; opacity: 0.8; } .show-section0 .section0-message{ display: block; } .section2-message { position: fixed; top: 5em; left: 0; width: 100%; display: none; text-align: center; font-size: 5rem; font-weight: bold; opacity: 0; } .show-section2 .section2-message { display: b.. 2022. 12. 6.

[D+52] Front-end 미니프로젝트 8일차 : 섹션 완성 국비지원 D+52 Front-end 미니프로젝트 8일차 - 섹션 완성 - 오늘 한 일 - section2 추가 및 전반적인 section 완성 - section2 동영상 추가 파일 구성 및 내용 • style.css footer { /* flex - footer안에 있는 내용을 가운데로 정렬해줄 것이다. */ display: flex; justify-content: center; align-items: center; width: 100%; height: 5em; background-color: gray; color: black; font-weight: bold; } video { margin: 0 auto; border: 3px solid palegoldenrod; } • index.html 맛있는 사과.. 2022. 12. 5.

[D+51] Front-end 미니프로젝트 7일차 : 리코딩 시작 및 섹션0 애니메이션 설정 국비지원 D+51 Front-end 미니프로젝트 7일차 - 리코딩 시작 및 섹션0 애니메이션 설정 - 오늘 한 일 - global nav, local nav 제작 - section 레이아웃 설정 - section0 애니메이션 설정 파일 구성 및 내용 • style.css @charset 'utf-8'; html { font-family: 'Noto Sans KR', sans-serif; font-size: 14px; } body { word-spacing: -0.08rem; letter-spacing: -0.03rem; overflow-x: hidden; } a { text-decoration: none; font-size: 0.9rem; color: white; } .global { /* absolut.. 2022. 12. 5.

[D+50] Front-end 미니프로젝트 6일차 : 섹션 애니메이션 추가 및 가이드코드 완성 국비지원 D+50 Front-end 미니프로젝트 6일차 - 섹션 애니메이션 추가 및 가이드코드 완성 - 오늘 한 일 - section0에 대한 canvas 애니메이션 추가 - section1에 대한 스타일 적용 - 가이드 코드 완성 파일 구성 및 내용 • style.css - canvas에 대한 스타일을 설정해 주었다. - section1에 대한 스타일을 설정해 주었다. - footer에 대한 스타일을 수정해 주었다. footer { position: relative; display: flex; justify-content: center; align-items: center; height: 4em; width: 100%; background-color: darkgray; font-size: 2rem; f.. 2022. 12. 5.

[D+50] canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기 국비지원 D+50 - canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기 - canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기 canvas를 사용해서 스크롤에 따라서 이미지가 움직이는 효과를 적용해 보려고 한다. 일단 3가지 단계별로 순차적으로 진행해 보도록 하자. 0 > 이미지 파일 준비하기 1 > html에 canvas 태그 추가 2 > canvas 태그에 대한 CSS 설정 3 > canvas 컨트롤 기능들을 추가 0 > 이미지 파일 준비하기 나는 스크롤을 할때마다 사과가 돌아가는 것같은 효과를 보이기위해 동영상을 프레임별로 쪼개서 이미지로 저장해 image폴더안에 넣어주었다. 1 > html에 canvas 태그 추가 먼저 body안에 canvas태그를 넣어주었으며 id.. 2022. 12. 1.

[D+49] Front-end 미니프로젝트 5일차 : 스크롤 애니메이션 구체화 국비지원 D+49 Front-end 미니프로젝트 5일차 - 스크롤 애니메이션 구체화 - 오늘 한 일 - section0에 대한 스크롤 애니메이션 추가(구체화) 및 테스트 파일 구성 및 내용 • index.html - 메시지 4개의 스크롤 애니메이션을 동작시키기 위해 주석을 해제해 주었다. Real Apple Pro 온전히 빠져들게 하는 빛깔 나의 건강을 채워주는 향기 깨끗한 자연의 신선함 새롭게 입가를 찾아온 매혹 • main.js - 스크롤이벤트를 좀더 구체화하기 위해서 기존 함수를 좀 더 구체화 해주었다. (() => { let yOffset = 0; // 스크롤 위치값 let currentSection = 0; // 현재 섹션 번호 // 필요한 이유 - yOffset이라는값을 가지고 각 섹션에 대한.. 2022. 11. 30.

이전 1 2 3 4 다음

티스토리툴바