반응형 🖥️ 프로젝트?8 0. 폐가 탐험대 기획하기 프로젝트 개요프로젝트 이름 : 폐가 탐험대프로젝트 목표 : 전국의 폐가 위치 정보를 제공하는 웹사이트를 개발, 폐가 탐험을 원하는 사용자 간의 만남을 지원프로젝트 목표핵심 목표: 사용자가 전국에 있는 폐가의 위치 정보를 손쉽게 찾을 수 있도록부가 목표:- 폐가의 특징을 태그로 분류해 정보를 더 쉽게, 검색을 더 쉽게- 구글 아이디로 로그인 후 커뮤니티 활동- 사용자들이 함께 폐가 탐방할 사람을 모집할 수 있는 기능을 제공주요 기능1차 기능 (MVP)폐가 위치 정보 제공: 전국의 폐가 위치를 지도에 표시하고, 검색 기능을 통해 사용자가 원하는 지역의 폐가를 찾을 수 있습니다. 2차 기능 (추가 기능)폐가 정보 제공태그 시스템: 각 폐가에 대해 사용자들이 특징을 태그로 추가할 수 있도록 하여, 폐가의 상태,.. 2024. 8. 22. Leetcode To Blogpost : 리트코드 문제를 블로그 글로 바꾸기 요약📙 프로젝트명 : Leetcode To Blogpost⚙️ 주요 기능 : 리트코드의 문제를 블로그 포스트로 올릴 HTML 문서로 변환함🚩 목적 : 블로그 글 작성을 쉽게 하기 위해📆 제작 기한 : 2024년 7월 23일 ~ 7월 24일 (2일간)🛠️ 사용 툴 : HTML, CSS, JavaScript🔗 GitHub 링크 : https://github.com/dobbyjang0/LeetcodeToBlogpost 만들게 된 계기 '🖥️ 문제 풀이/리트코드(Leetcode)' 카테고리의 글 목록내가 보려고 정리해놓습니다programming4myself.tistory.comLeetCode의 문제를 풀면서 블로그에 해법을 쓰고 있었는데, 문제를 옮기는데 시간이 너무 오래 걸렸었다. 따라서 문제 내용.. 2024. 7. 24. 100일 CSS #2 : 메뉴 아이콘 문제 https://100dayscss.com/days/2/ Menu Icon: Used on almost every website by now, simple but impressively animated it becomes a real eye-catcher 메뉴 아이콘 : 현재 거의 모든 웹사이트에서 사용됨, 간단하지만 인상적인 애니메이션으로 시선을 사로잡어보자 클릭하면 애니메이션이 나와 X자가 되는 메뉴 아이콘. 다시 한번 클릭하면 원래의 ☰ 형태로 되돌아온다. 내 풀이 See the Pen 100 DAYS CSS CHALLENGE : Day #2 by dobbyjang0 (@dobbyjang0) on CodePen. 두 번째 문제부터 바로 어려워서 죽는줄 알았다... SCSS BEM 명명법이 SCS.. 2023. 4. 12. 100일 CSS #1 : 시작! 문제 https://100dayscss.com/days/1/ 100 Days CSS: An easy start into the challenge with a custom build number with gradient. 100일 CSS : 직접 만든 숫자, 그라디언트와 함께하는 챌린지의 쉬운 시작 배경을 그라디언트로 만들고, 숫자 모양을 직접 만들어주면 되는 문제 내 풀이 See the Pen 100 DAYS CSS CHALLENGE : Day #1 by dobbyjang0 (@dobbyjang0) on CodePen. SCSS 이번 기회에 SCSS를 처음 사용해보았는데, 자식 선택자를 >*로 표시하는 것을 몰라서 좀 해매었다. 또 SCSS 쓰면 BEM 명명법은 필요없는게 아닌가 느끼기도 하였다. 정 가.. 2023. 4. 10. 100일 CSS 챌린지(100 DAYS CSS CHALLENGE)란? 100일 CSS 챌린지(100 DAYS CSS CHALLENGE)란? https://100dayscss.com/days/1/ 100일 CSS 챌린지(100 DAYS CSS CHALLENGE)란 100일간 주어진 문제를 CSS로 구현해 보는 챌린지입니다. 위 링크를 클릭해 사이트에 들어가면 1일 차부터 시작할 수 있습니다. 한 가지 특이한 점은 Javascript를 쓰지 않고 CSS로만 하는 것을 지향한다는 점입니다. 실제로 예시 답들을 보면 js는 거의 쓰지 않은 것을 확인할 수 있습니다. CSS(SCSS) 실력을 늘리고 싶으신 분, 특히 CSS의 애니메이션을 잘 쓰고 싶으신 분들이 해보시면 좋을 것 같습니다! 100일 CSS 챌린지 하는 법 https://codepen.io/ 우선 첫 번째로 Codep.. 2023. 4. 9. 💡 Turn On Light : transform 정보 js에서 불러오기 요약 📙 프로젝트명 : Turn On Light ⚙️ 주요 기능 : 불을 켰다가 끔 🚩 목적 : 호기심, 힐링 📆 제작 기한 : 2023년 1월 21일 (1일간) 🛠️ 사용 툴 : HTML, CSS, JavaScript 🔗 GitHub 링크 : https://github.com/dobbyjang0/javascript-mini-project/tree/main/turn-on-light 기능설명 아래 노란색 원에 마우스를 올려 놓으면 돌아간다. 계속 돌아가다 빨간색 선이 연결이 되면 위쪽의 불이 켜지게 된다. 다시 노란색 원을 돌려 빨간 선이 어긋나면 불이 꺼지게 된다. 어려웠던 점 / 배웠던 점 돌아간 각도를 js에서 인식하기 function isConnected() { let style = window.g.. 2023. 1. 21. 이전 1 2 다음 반응형
