꾸매코딩

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

카카오톡과 비슷한 사진을 가지고 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 | ..