일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- pug
- HTML
- CLONE
- express
- ECMAScript
- form
- nodejs
- MongoDB
- DART
- react
- GRID
- heroku
- clonecoding
- frontend
- NextJs
- graphQL
- backend
- CSS
- 리액트
- JavaScript
- Mongoose
- Session
- javscript
- ES6
- TypeScript
- node.js
- Component
- Flutter
- API
- 자바스크립트
- Today
- Total
목록challenge (3)
Enjoy Programming

음.. 오랜만에 챌린지 기록을 해본다 그동안 계속 챌린지는 진행중이긴 한데 ~ 다른거 포스팅하고 공부하느라 이것 까진 못하겠다 싶었는데 오늘부터는 간단하게라도 기록해야겠다. 일단 오늘의 challenge내용은 영화정보가 담긴 fakeDB를 이용해서 간단한 웹을 제작하는 내용이다. 조건이 세가지 있는데 먼저 기본적으로 정의된 세가지 컨트롤러가 있는데 1. home should list all the movies 2. movieDetail should show a movie based on the :id 3. filterMovie should filter for a movies based on the rating or the year.~! 홈 컨트롤러는 모든 영화리스트를 보여줘야하고, 영화디테일 컨트롤러는 ..

오늘은 나에게 휴식을 준날이다~ 요 몇일 하루 두~세시간 잤더니 머리도 멍하고 다리도 풀리는거 같고 ㅋㅋㅋ 휴식을 준 김에 우리 세 가족 가까운 바닷가 가서 모래 놀이도 하고 좀 쉬다 왔다 마냥 쉬긴 그래서 간단히 자바스크립트를 이용해서 시계를 만들어 보았다. 먼저 html은 초침 시침 분침으로 나눈 박스 그리고 전체를 감싸는 시계 테두리 박스 요렇게 구성되어있다 css는 특이점이라면 transform-origin인데~!~! transform-origin으로 시게바늘 세개의 시작점을 바꿔준? 것이다 이건css 포스팅에서 따로 다루자 자바스크립트는 우선 세계의 시계바늘이 될 태그를 쿼리셀렉터로 선택해주고 시간을 적용해줄 함수를 만든다. crretnDate에 new Date()로 시간을 담아주고 각각 get..

금일 과제는 이 레이아웃을 만드는 거다~ 우선 내가 만든 코드는 깃헙주소를 적어놓겠당 github.com/lee-tae-eon/cocoa-challenge/tree/main/library-screen lee-tae-eon/cocoa-challenge nomad coder cocoaclone challenge . Contribute to lee-tae-eon/cocoa-challenge development by creating an account on GitHub. github.com 이제 코드를 리뷰해보면 먼저 레이아웃이아닌 바깥영역은 검은색으로 지정하고 height 100vh로 지정해놓았다. 그리고 레이아웃을 중앙에 위치시키기 위해 flex, center로 놓는다. 그리고 레이아웃을 감싸는 큰 박스 ..