개발/개발일지17 Todo list 만들기 todolist의 기본적인 기능을 만들어 보고자 한다. 로컬스토리지를 통해서 새로고침을 해도 todolist들이 없어지지 않고 삭제 버튼이 누르면 로컬스토리지에서 정보가 사라지는 정보만 만들거다. HTML html은 이런식으로 구성했다. input을 통해 todo를 만들도록 하였고 ul태그를 만들어 놓고 는 자바스크립트로 생성하도록 하였다. JS 아래는 전체코드이다. 이해안된다고 겁 먹지말고 천천히 뜯어보자. const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-lis.. 개발/개발일지 2023. 7. 18. 랜덤 명언 만들기 명언 준비 명언을 준비해주고 배열안에 객체 형태로 만들어준다. const quotes = [ { quote: "삶이 있는 한 희망은 있다", author: "키케로", }, { quote: "산다는것 그것은 치열한 전투이다.", author: "로망로랑", }, { quote: "하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.", author: "사무엘존슨", }, { quote: "언제나 현재에 집중할수 있다면 행복할것이다.", author: "파울로 코엘료", }, { quote: "진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해", author: "찰리 채플린", }, { quote: "직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다", au.. 개발/개발일지 2023. 7. 15. 시계 만들기 JS를 이용해서 시계를 만들어 보겠다. html 에서 h2 엘리먼트를 하나 만들어준다. 00:00 시간 함수 만들기 JS에서 querySelector로 선택자를 지정해주고 함수를 만들어준다. const clock = document.querySelector("h2#clock"); function getclock() { const date = new Date(); const hour = date.getHours() const minute = date.getMinutes() const seconde = date.getSeconds() clock.innerText = `${hour}:${minute}:${seconde}`; } new Date() : 현재 시간을 알려준다. getHours(), getMinut.. 개발/개발일지 2023. 7. 15. html/css 코딩애플과제 - 어려웠던 것들(2) sidebar 코딩애플 html/css 최종과제 사이드바 부분이다. 왼쪽에 fix로 붙어있고 마우스를 올렸을 때 width가 늘어나면서 애니메이션을 추가하였다. 오늘 이걸 만들기 위해서 내가 어려웠던 부분들을 정리하고자 한다. HTML 우선 html을 이렇게 짜보았는데 처음에는 div로 만들었지만 시멘틱하게 aside로 만들어보았다. Home Service Alerts State sidebar 만드는 순서 처음에는 sidebar를 작게 만들고 커서를 갖다대면 크게 만들려고했다. 그렇게하면 애니메이션을 어떻게 넣어야할지 감이 잡히지 않았다. 그래서 width를 크게 잡아 만들고 transform: translateX(-100px)를 넣어서 작은부분도 처리하였다. hover가 되면 transform: tra.. 개발/개발일지 2023. 6. 28. html/css 코딩애플과제 - 어려웠던 것들 (1) 코딩애플 최종과제를 하면서 생각보다 많은 부분에서 어려움을 느껴서 정리해본다. 내가 헤맸던 부분을 위주로 정리를 해본다. PC사이즈와 모바일 사이즈 처음에는 Bootstrap을 사용하려고 했는데 기본설정때문에 내가 원하는대로 만들어지지 않아서 scss만을 이용해서 만들어보았다. PC사이즈부터 만들고 모바일을 만들어보자. 기본설정 우선 기본설정을 해주었다. * { box-sizing: border-box; margin: 0; border: 0; padding: 0; outline: 0; } header전체 그다음에 header 전체 부분을 태그를 이용해서 설정해주었다. header { width: 100%; height: 60px; position: fixed; top: 0px; display: flex;.. 개발/개발일지 2023. 6. 27. [프로젝트] 아이디어 저번 시간에 팀원을 구하였고 이번 시간에는 아이디어를 정하였다. 코드스테이츠에서는 PMI기법을 이용해서 주제를 만들어가라고 했는데 PMI는 간단히 말하면 Plus, Minus, Interesting 으로 아이디어를 막 내고 좋은 점, 나쁜 점, 흥미로운 점을 나열해서 주제를 선택하는 방법이다. 생각보다 많은 아이디어가 나왔고 팀규모와 데이터를 생각해서 프로젝트 주제를 정하다보니 많은 제한점이 나왔다. 예를들어 내가 제시한 아이디어는 대부분 내가 혼자서도 충분히 만들어낼 수 있거나 아니면 백엔드에서 데이터를 다듬어야하는 작업이 많이 들어가서 선택받지 못했고 어떤 분은 약을 먹는 타이머와 비타민을 여러가지 먹을 때 적정량의 비타민을 먹는지 확인하기 위한 웹페이지를 만들려 했는데 비타민제품의 DB가 없어서 포.. 개발/개발일지 2023. 5. 10. [프로젝트] 메인 프로젝트의 시작 프리 프로젝트가 끝이 나고 본격적으로 메인 프로젝트로 들어갔다. 프리 프로젝트는 랜덤팀원을 정해줘서 선택권이 없었지만 메인프로젝트는 달랐다. 백엔드 + 프론트엔드 총 300명 가까히 되는 인원들을 하나의 젭에 전부다 집어넣어놓고 알아서 팀원을 구하라고 던져졌다. 미리 팀원들을 구해놨던 사람들은 아주 쉽게 팀을 구했지만 나는 내 실력이 미안해서 팀원들을 미리 구하지 않았었다. 내가 왜 그랬을까.. 그리고 프리 프로젝트에서 아무것도 안 하려고 하시는 분이 계셔가지고 이번 메인 프로젝트에서는 반드시 좋은 팀원을 구해야겠다고 다짐을 했기에 정말 열심히 팀원을 구하려고 노력하였다. 그렇게 적극적으로 팀원을 구하려고 팀원을 구한다는 글을 보면 바로 달려가서 똥꼬쇼를 하는데 정말 이상한 사람들을 많이 보았다. 백엔드.. 개발/개발일지 2023. 5. 10. 이전 1 2 다음