꾸매코딩

클론 코딩 수업을 끝내고 현재 챌린지를 진행하고 있고, 이미 배웠던 내용인 만큼 모르는 것들만 알아가며 빨리 넘겨볼 생각이다. 앞으로 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 | ..

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