꾸매코딩

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..

[ 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..