일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 | 31 |
- 마무리
- Nomad coder
- scflix
- 계획
- 코코아톡
- coding
- Nomad
- 오류
- javascript
- 느낀 점
- Vanilla
- Clone
- Project
- 클론코딩
- vanilla js
- react-native
- Firebase
- react
- TiMER
- github
- 바닐라 자바스크립트
- 자바스크립트
- CSS
- Hook
- 프로젝트
- Netflix
- expo
- react-hook
- Nicolas
- HTML
- Today
- Total
목록HTML (19)
꾸매코딩
HTML draggable="true" 속성을 사용해서 드래그를 가능하도록 하고 정해진 div에서 이동이 가능하도록 만들어 보았다. [ HTML ] [ CSS ] body { background-color: rgba(0, 0, 0, 0.3); } .fill { background-image: url("http://source.unsplash.com/random/100x100"); position: relative; height: 100px; width: 100px; top: 5px; left: 5px; cursor: pointer; } .empty { display: inline-block; height: 110px; width: 110px; margin: 10px; border: 3px solid rg..
클릭 시 변경되는 슬라이더를 만들어 보았다. [ HTML ] 1 2 3 4 5 6 6개의 슬라이더 공간(item)을 설정해 주었다. [ CSS ] body { padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } .slider { display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 40px; } .slider__item { width: 80%; height: 300..
[ HTML ] Open Modal --Modal-- Close Open Modal 버튼을 눌렀을 때 Modal이 나오도록 할 것이다. background는 modal창 배경 부분을 나타내고 content는 modal 창 내부를 나타낸다. [ CSS ] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; } button { all: unset; background-color: mediums..
Nomad coder 클론 코딩의 장점 중 하나인 챌린지 프로그램에 도전을 해보았습니다. 개인적인 사정으로 한 번의 결석으로 턱걸이로 졸업을 할 수 있었습니다. 코코아톡 챌린지와 코코아톡 강의에 대한 주관적인 저의 후기를 작성해보려고 합니다. 후기에 앞서 전공자인 점을 참고하여 읽어주시면 감사하겠습니다. 난이도라는 게 주관적인 내용이라 말씀드리기 어렵지만 제 개인적인 생각으로는 HTML과 CSS만 활용하는 챌린지이기 때문에 전반적으로 난이도가 낮은 편이라고 생각합니다. 챌린지에 참여하게 되면 매일 아침 6시에 과제를 내주시고, 제출 기한을 알려주십니다. 처음엔 강의에서 나온 개념들에 대한 객관식 문제가 출제됩니다. 문제와 답이 영어로 되어있기 때문에 영어에 약하시면 약간에 어려움이 있을 수 있습니다 (영..
클론 코딩 수업을 끝내고 현재 챌린지를 진행하고 있고, 이미 배웠던 내용인 만큼 모르는 것들만 알아가며 빨리 넘겨볼 생각이다. 앞으로 JS를 공부할 생각이다. Python, Java와 같이 객체지향 언어를 사용해봤고 그에 맞는 문법들을 조금은 알고 있으니 처음 배우시는 분들보다는 조금은 이해가 빠를 것이라고 생각한다. 배운 것 클론 코딩을 통해 배운 점은 실력 있는 개발자 분들이 코딩을 하시기 전 하시는 생각과, 개발하는 과정에서 어떤 식으로 생각하시는지를 배울 수 있었다. 많은 글들에서 초기 기획단계가 가장 중요하다고 하는 것을 보았는데, 사실 와 닿지는 않았다. 하지만 이 수업을 통해 처음 개발 단계부터 나중에 사용할 것들과 한 번만 사용할 것들로 나누어서 코딩을 진행하다 보니 내가 만들어놓은 코드들..
1. Box Sizing 박스의 크기를 정하는 기준을 변경할 때 사용한다. → content-box : content 영역을 기준으로 크기를 정한다.(default) → content는 사진에서 하늘색 부분(가운데)에 속한다. → border-box : border 영역을 기준으로 크기를 정한다. → border는 사진에서 노란색 부분(border)에 속한다. 1. content-box 초기 기본값(default)이다. width와 height 속성이 content 영역만 포함한다. → width 속성값을 사용하면 content width만 변경된다. → heigth 속성값을 사용하면 content height만 변경된다. ex) .box { width: 200px; border: 10px....} wi..