zxxng/vanillajs-study

Vanilla JS 실력 향상을 위한 문제 풀이 Study

Frontend Developer

Hello, I'm Frontend Developer, Jaeyeong Yoo! (is Called Jena😄)

👩🏻‍💻 Experience

멋쟁이사자처럼 프론트엔드 플러스 스쿨 1기 (2023.10 - 2023.12)

• Final Project 우수상 수상
• Typescript, Next.js
• 프로젝트 보기

멋쟁이사자처럼 프론트엔드 스쿨 5기 (2023.02 - 2023.06)

• HTML, CSS, JavaScript, React, Bootstrap, Sass, Tailwind
• 프로젝트 보기

이노베이션 아카데미 42Seoul 8기 (2022.11 - 2023.08)

• Shell, C
• CS, 알고리즘 학습
• 프로젝트 보기

👩🏻‍🎓 Profile

숭실대학교 미디어경영학과 (2020.03 - 2024.02)

🛠 Skills

vanillajs-study's Issues

[DAY6] 모달 만들기

🚀 모달 만들기

🔍 프로젝트 설명

이 튜토리얼에서는 사용자들이 웹 사이트에서 특정한 무언가를 하거나 볼 때 사용되는 모달창을 만드는 법에 대해 소개합니다.

모달 창이 사용되는 좋은 예시는 사용자가 사이트에서 무언가를 변경하고 저장하지 않은 채 다른 페이지로 이동할 때의 경우입니다. 변경 사항을 저장하지 않으면 정보가 삭제될 수 있다고 경고하는 모달 창을 만들 수 있는 것이죠.

⭐️ 주요 개념

• document.querySelector()
• addEventListener()
• classList.add()
• classList.remove()

🔗 예시 사이트

https://vanilla-js-basic-project-6-modal.netlify.app/

[DAY5] 사이드바 만들기

🚀 사이드바 만들기

🔍 프로젝트 설명

이 튜토리얼에서는 애니메이션과 함께 사이드바를 만드는 방법에 대해 소개하고 있습니다.

개인 웹 사이트에 추가할 수 있는 아주 멋진 기능입니다.

⭐️ 주요 개념

• document.querySelector()
• addEventListener()
• classList.toggle()
• classList.remove()

🔗 예시 사이트

https://vanilla-js-basic-project-5-sidebar.netlify.app/

[DAY4] 반응형 내비게이션 바 만들기

🚀 반응형 내비게이션 바 만들기

🔍 프로젝트 설명

이 튜토리얼에서는 작은 전자 기기에서 햄버거 메뉴로 바뀌는 반응형 내비게이션 바를 만드는 법에 대해 소개하고 있습니다.

웹 개발자에게 반응형 웹 사이트를 만들 줄 아는 것은 무척 중요합니다. 이 기능은 많은 웹 사이트에서 사용되고 있습니다.

⭐️ 주요 개념

• document.querySelector()
• addEventListener()
• classList.toggle()

🔗 예시 사이트

반응형 내비게이션 바 예시

[DAY3] 리뷰 캐러셀 만들기

🚀 리뷰 캐러셀 만들기

🔍 프로젝트 설명

이 튜토리얼에서는 버튼을 누르면 랜덤으로 리뷰를 보여주는 리뷰 캐러셀을 만드는 방법에 대해 설명합니다.
이 기능은 고객 후기를 보여주는 전자 상거래 사이트나 개인 포트폴리오에서 유용하게 쓰일 수 있습니다.

⭐️ 주요 개념

• 객체
• DOMContentLoaded
• addEventListener()
• array.length
• textContent

🔗 예시 사이트

리뷰 캐러셀 예시