1. Class VS id

class (.): 반복되는 영역을 유형별로 분류할 때

id (#): 고유(unique)한 이름을 붙일 때

2. layout reset

 *{
	box-sizing: border-box;
}
body{
	margin: 0;
	padding: 0;
}

3. Content-box VS border-box

content-box의 width는 border의 너비가 아닌 content의 너비다.

border-box의 width는 content+padding+border를 포함하는 실제 차지하는 너비를 의미한다.

4. 후손셀렉터 VS 자식셀렉터

자식셀렉터: 자신의 1 level하위에 속하는 요소

후손셀렉터: 자신보다 n level 하위에 속하는 요소

5.flex : grow shrink basis

grow: flex-item 요소가 flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다. 기본값은 0이다. grow값을 양수로 지정하면 flex항목별로 주축 방향 크기가 flex-basis값 이상으로 늘어날 수 있다. 각 항목은 주축에 따라 분배받은 값만큼 사이즈를 늘려 공간을 차지한다.

shrink: 공간이 부족할때 각 아이템의 사이즈를 얼마까지 줄일 것인지 정하는 속성이다. grow속성이 주축에서 남은 공간을 항목들에게 분배하는 방법을 결정한다면, shrink는 주축의 공간이 부족할때 각 항목의 사이즈를 줄이는 방법을 정의한다. shrink의 값이 양수이면, flex항목은 flex-basis에 지정된 크기보다 작아진다.

basis: 아이템의 초기 기본크기이다. 기본값은 auto. flex container에서 display: flex 속성만을 지정하면 flex항목들이 각 내용물 크기만큼 공간을 차지한다.

flex: auto로 지정하면, flex: 1 1 auto로 지정한 것과 동일하다.

flex: none으로 지정하면, flex: 0 0 auto로 지정한 것과 동일하다.

6. Content 정렬 방법

flexbox를 제어하기 위해서는 axis(축)의 개념에 대한 이해가 필요하다.

flex-direction의 기본값은 row인 상태다. 즉, main axis는 가로축이 된다. cross axis는 main axis와 수직을 이루는 방향이다.

justify-content 속성은 main axis를 기준으로 정렬한다. 즉, 주축을 따라 flex 항목 행을 정렬하는 방식을 지정한다.

align-items 속성은 cross axis를 기준으로 정렬한다. 즉, 교차축에 따라 flex 항목 열을 정렬하는 방식을 지정한다.

7. 와이어프레임/목업/프로토타입/하드코딩

1. 와이어프레임: 화면 단위의 레이아웃을 설계하는 작업

2. 목업: 실제품을 만들어보기 전, 실물과 비슷하게 시제품을 제작하는 작업

3. 프로토타입: 처음부터 끝까지 핵심 동작이 가능하게 구현된 앱

4. 하드코딩: 데이터를 코드 내부에 직접 입력하는 것