[Nomad coder/코코아톡 클론코딩 5일차] Git과 Github란 무엇인가? (#5.0 ~ #5.3)
·
Clone Coding/Kakaotalk [HTML + CSS]
[ GitHub란 무엇일까? - 추가 설명 ] 이번 강의에서는 Git, Github에 대해 알려주신다. 개발 공부를 하고 있거나, 개발직에 계신 선배님들 모두가 Git과 같은 버전 관리 시스템(Version control system)을 사용하실 거라고 생각한다. 개발 직종에서는 뗄 수 없는 프로그램이고, 그만큼 아주 유용한 프로그램이다. 1. Git - 분산형 관리 시스템이다. - 여러 명이 동시에 작업이 가능하다. - 파일의 히스토리(변경 내역)를 알 수 있다. → git은 파일을 계속 추적(Tracking)하는 것이다. 2. Github - Git의 변경 내역을 볼 수 있는 사이트이다. - Repository : 파일, 폴더를 저장해두는 저장소이다. - Commit : 파일 추가, 변경한 시점(Po..
[Nomad coder/코코아톡 클론코딩 4일차] Transition, Transform, Animation, Media query란 무엇인가?(#4.0 ~ #4.6)
·
Clone Coding/Kakaotalk [HTML + CSS]
#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 | ..
[Nomad coder/코코아톡 클론코딩 3일차(2)] Flex와 Position (#3.10 ~ #3.19)
·
Clone Coding/Kakaotalk [HTML + CSS]
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..
[Nomad coder/코코아톡 클론코딩 3일차(1)] Block구조와 id, class 란 무엇인가? (#3.0 ~ #3.9)
·
Clone Coding/Kakaotalk [HTML + CSS]
CSS 내용은 머릿속에서 정리가 되어있지 않았던 내용이기 때문에 중간에 한번 정리를 하고 넘어가기 위해 나누어놨다. 다행히 얕은 지식은 알고 있어서 이해하는 데는 빨랐던 것 같고 이해가 되면서 작년에 했던 삽질들이 기초적인 지식 조금만 알았더라면 얼마나 쉬웠을까?라는 생각이 들었다. 인터넷에 퍼져있는 방대한 지식을 왜 사용하는지는 상관없이 당장에 문제 해결을 위해 코드를 복붙 했던 나 자신에게 많은 문제가 있었음을 느낄 수 있었다. div - block / span - inline 속성을 알지 못하여 작년에 2시간 넘게 삽질을 했었다. 1. inline / block Html 코드의 display는 block과 inline으로 나눌 수 있다. 1. inline inline은 height(높이)와 widt..
[Nomad coder/코코아톡 클론코딩 2일차] VScode와 HTML code(#2.0 ~ #2.11)
·
Clone Coding/Kakaotalk [HTML + CSS]
2일 차 강의에 큰 제목은 Learing HTML이다. 한마디로 HTML에 대한 기본적인 설명을 해주는 단원인데, HTML을 배운 적이 있고 사용해본 적이 있는 나에게는 대부분 알고 있는 내용이었지만, 5개월 만에 다시 하는 것이므로 정리가 한번 필요할 것 같아서 영상을 다 보았다. 에 대한 설명보다는 내가 배우게 된 능력? 기술? 생각을 정리할 예정이다. 1. VScode 코드 편집기로 VScode(Visual Studio Code)를 사용할 생각인데, 한국어 지원도 해주고 여러 확장 프로그램들이 잘 되어있어서 나 같은 초보자가 사용하기에 좋은 프로그램이라고 생각한다. 1. WakaTime : 사용언어, 코딩을 한 시간 등을 자동으로 기록해주고 볼 수 있다. 2. Prettier : 코드를 지저분하게 ..
[Nomad coder/코코아톡 클론코딩 1일차] HTML? CSS? JavaScript?(#1.1 ~ #1.9)
·
Clone Coding/Kakaotalk [HTML + CSS]
작년에 여러 강의를 들어봤는데, Nomad coder - Nicolas 이 분 강의 영상이 나에게 가장 맞는 것 같아서 다시 이분 강의를 시작으로 앞으로 나아갈 예정이다. Why? 를 많이 강조하시는데, 왜 내가 이걸 쓰는지, 이걸 안 쓰면 얼마나 돌아가야 하는지 등등 하나의 코드를 다양한 방법으로 설명을 해주시기 때문에 큰 도움이 되는 수업 중 하나였다. 1. Web site 인터넷 프로토콜 기반의 네트워크에서 도메인 이름이나 IP 주소, 경로만으로 이루어진 일반 URL을 통하여 보이는 웹 페이지(Web Page)들의 의미 있는 묶음이다. Web 쉽게 말하자면 Web은 Text로 이루어져 있다. → Web이 이해할 수 있는 언어로 이루어져 있다 (Text ≒ HTML+CSS+JavaScript) 2. ..