Community
개발자 99% 커뮤니티에서 수다 떨어요!
← Go back
To-Do-List 도전..!
- 저의 결과물은 vercel을 통해 포스트해봤습니다.
https://lucettin5-todo.vercel.app/ - 막연하게 프로그래밍에 흥미가 생겨 이리저리 뒤지다가 발견한 노마드코더에서 재미를 찾고 있습니다. 자바스크립트 / 파이썬 / HTML,CSS 챌린지를 통과했지만 여전히 참 어렵네요.
- 가로모드 : 이름을 받는 창을 헤더 중앙에 두었고, 헤더의 아이콘은 심심해보여서 호버링시 애니메이션을 줘봤습니다.
좌측에 Nav를 배치하여, to do list의 종류를 폴더로 구분해봤습니다. nav 하단에 Add List에 입력하면 폴더가 추가됩니다.
우측엔 aside를 배치했습니다. 달력과 날씨를 포함시키고 싶었지만 API Key를 숨기는 방법은 백엔드를 배워야할것 같아서 뺐습니다. 위에서부터 순서대로 시계, 구글검색(새 창에서 구글을 열며 입력한 검색어를 검색합니다.), 랜덤 어드바이스, 하단에는 unsplash에 배경사진을 요청할 수 있는 form을 두었습니다.
중앙에 main을 두어 각 폴더에 담겨있는 task를 표시했습니다. 상단에는 폴더의 이름, 그 다음은 task를 추가하는 form을 두었고 그 아래로 추가된 순서대로 배치됩니다. DONE을 누르면 task의 색이 흐려지고 가로선이 그어집니다.
하단은 비어있는게 애매해보여서 카피라이트/닉네임/깃허브 아이콘을 달아봤습니다.
세로모드: aside는 숨겼습니다. nav는 header 아래로 이동하여 가로로 배치됩니다.
main은 조금 아래로 이동하고 가운데로 정렬합니다. - 1) 처음엔 생각나는대로 HTML-CSS-JS를 왔다갔다 하면서 했습니다. 셀렉터도 잊어버리고 함수도 꼬이고 점점 더 헷갈리기만 하더라구요. 두번을 엎고서는 종이에 대충 그려보고 HTML부터 다 배치했습니다.
2) CSS, JS에서 막히는 순간순간 mdn과 so를 뒤적거렸습니다.
3) JS는 막힐때마다 앞에서부터 하나씩 console.log를 입력해보면 중간중간 꼬인 곳이 하나씩 보여서 풀어가는 재미가 있었던 것 같습니다. - 일단 결제해둔 CSS 클래스를 마쳐서 웹페이지를 좀 더 예쁘게 만들어보는게 목표입니다. 그 다음에 유튜브 클론 코딩 클래스를 수강하려고 코코아톡 할인쿠폰을 사용해두었습니다.
1 comment
