일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 자바스크립트
- Project
- coding
- Netflix
- react-native
- 계획
- 오류
- Nomad
- github
- javascript
- react-hook
- react
- HTML
- Firebase
- scflix
- 클론코딩
- expo
- TiMER
- Vanilla
- Hook
- vanilla js
- CSS
- 프로젝트
- 느낀 점
- 바닐라 자바스크립트
- Nomad coder
- Nicolas
- Clone
- 코코아톡
- 마무리
- Today
- Total
목록HTML (19)
꾸매코딩
카카오톡과 비슷한 사진을 가지고 HTML과 CSS를 통해 똑같이 만들어보는 수업이다. 이론 수업은 끝났고, 실제 코딩에 들어가는데 코드 관련 내용보다는 얻어갈 수 있는 내용 위주로 기록할 예정이다. 1. BEM(Block Element Modifier) CSS 개발 방법론 중에 하나이다. id 명에는 사용하지 않고, class 명에 사용한다. Block - Element - Modifier 순으로 Class Name을 작성한다. 각각을 Block__Element--modifier( __ / -- )으로 구분한다. 1. Block - 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트 (A functionally independent page component that can be reused)라고 불린다...
[ GitHub란 무엇일까? - 추가 설명 ] 이번 강의에서는 Git, Github에 대해 알려주신다. 개발 공부를 하고 있거나, 개발직에 계신 선배님들 모두가 Git과 같은 버전 관리 시스템(Version control system)을 사용하실 거라고 생각한다. 개발 직종에서는 뗄 수 없는 프로그램이고, 그만큼 아주 유용한 프로그램이다. 1. Git - 분산형 관리 시스템이다. - 여러 명이 동시에 작업이 가능하다. - 파일의 히스토리(변경 내역)를 알 수 있다. → git은 파일을 계속 추적(Tracking)하는 것이다. 2. Github - Git의 변경 내역을 볼 수 있는 사이트이다. - Repository : 파일, 폴더를 저장해두는 저장소이다. - Commit : 파일 추가, 변경한 시점(Po..
#4에서는 tansition, tansformation, animation, media query에 대한 내용을 배운다. CSS에 이런 놀라운 기능들이 있다는 거에 적지 않게 놀랄 수 있었다. Javascript의 기능들과 별 반 다를 것이 없었고, #4에서 배운 내용은 처음 보는 내용들이었다. 1. Transition transition은 state(상태) -> state(상태) 변화를 애니메이션으로 만들어준다. - state가 있는 tag에 transition을 적용하면 state가 동작할 때에는 작동하지만, state가 끝나는 시점엔 작동이 안 된다. - tag의 root(기본 css 태그)에 적용을 시켜줘야 한다. a { color: red; /* property name | duration | ..
1. Flexbox 배열하고자 하는 의 부모 에 display: flex; 명령어를 통해 flex 형태로 변경을 해주어야 한다. 여기서 중요한 점은 부모를 flex 한 container로 만들어 주는것이다. container 안에서 자식 를 우리 입맛대로 변경할 수 있다. main axis(주축) → justify-content : ~~; 주축 기준으로 정렬을 해준다. cross axis(교차축) → align-items : ~~; 교차축 기준으로 정렬을 해준다. 위치를 알아서 계산해준다. 사용자 화면 크기에 따라 맞춤 형태로 보여준다(반응형) 2. Position (default = static) 2.1 Fixed - Box를 계속 같은자리에 유지시켜준다. - position: fixed → Layer..
CSS 내용은 머릿속에서 정리가 되어있지 않았던 내용이기 때문에 중간에 한번 정리를 하고 넘어가기 위해 나누어놨다. 다행히 얕은 지식은 알고 있어서 이해하는 데는 빨랐던 것 같고 이해가 되면서 작년에 했던 삽질들이 기초적인 지식 조금만 알았더라면 얼마나 쉬웠을까?라는 생각이 들었다. 인터넷에 퍼져있는 방대한 지식을 왜 사용하는지는 상관없이 당장에 문제 해결을 위해 코드를 복붙 했던 나 자신에게 많은 문제가 있었음을 느낄 수 있었다. div - block / span - inline 속성을 알지 못하여 작년에 2시간 넘게 삽질을 했었다. 1. inline / block Html 코드의 display는 block과 inline으로 나눌 수 있다. 1. inline inline은 height(높이)와 widt..
2일 차 강의에 큰 제목은 Learing HTML이다. 한마디로 HTML에 대한 기본적인 설명을 해주는 단원인데, HTML을 배운 적이 있고 사용해본 적이 있는 나에게는 대부분 알고 있는 내용이었지만, 5개월 만에 다시 하는 것이므로 정리가 한번 필요할 것 같아서 영상을 다 보았다. 에 대한 설명보다는 내가 배우게 된 능력? 기술? 생각을 정리할 예정이다. 1. VScode 코드 편집기로 VScode(Visual Studio Code)를 사용할 생각인데, 한국어 지원도 해주고 여러 확장 프로그램들이 잘 되어있어서 나 같은 초보자가 사용하기에 좋은 프로그램이라고 생각한다. 1. WakaTime : 사용언어, 코딩을 한 시간 등을 자동으로 기록해주고 볼 수 있다. 2. Prettier : 코드를 지저분하게 ..