10일차 TIL 210315

1. 복습

-flexbox 를 이용해 레이아웃을 만들 수 있다.

• 방향 :flex-direction
• 얼만큼 늘릴 것인가? flex-grow
• 얼마만큼의 크기를 갖는가 ? flex-basis`
• 수평정렬 : justify-content`
• 수직정렬 : align-items

2. 레이아웃 : 화면을 나누는 방법

• 기본적으로 컨텐츠의 흐름은 좌에서 우로, 위에서 아래로 흐른다.
• 먼저 수직으로 분할하고, 수직으로 분할된 div 에서 height 속성을 이용해 수평 분할을 하면 쉽다.
• 레이아웃 리셋 : 때로는 html이 갖는 기본 스타일이 레이아웃 잡는데 방해가 된다.

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

• flex는 부모박스에 display:flex; 적용해줌으로써 자식 박스의 방향과 크기를 결정하는 레이아웃
• flex-direction 속성을 부모박스에 적용하면 수직/수평 분할이 가능하다.
• flex-direction:row;(기본값) : column(수직)

3. Grow, shrink, basis ( 팽창지수, 수축지수, 기본크기)

• flex의 속성은 자식 박스에 적용한다
• default 값 : flex: 0 1 auto;
• grow와 shrink는 단위가 없으며 비례하는 값이다.
• 박스를 여러개로 나누었을때, 각 자식 박스가 갖는 grow 총 합이 n이라고 할때 각 자식값 1은 n분의 1 크기를 의미한다.
• 컨텐츠가 담긴 크기는 보장한다.
• shrink는 실제 크기를 예측하기가 어렵다. 기본값 1로 두어도 무방
• basis는 이 박스의 기본크기, grow나 shrink에 의해 늘어나거나 줄어들기 전 갖게되는 기본 크기.
• width와 flex-basis 를 동시에 적용하면 flex-basis 가 우선된다.

4. sprint 시간에 알게 된 것

• 개발자 도구에서 element selector copy 가능 `#(‘copy 된 경로’)[0]
• 가상클래스 : Id,class 와 상관 없다
• A:hover{} : 마우스 위에 올려놓으면 변하게 되는 가상 셀렉터
• flex 1 0 auto 일때 컨텐츠 길이에 따라 길이가 달라질 수 있다.
• 이를 방지하기 위해 flex 1 0 50% 로 둬도 됨
• 고정 크기 만들때 딱 떨어지게 만들고 싶을때는 basis 기능을 섞어서 써보자. 다른 박스는 auto 이면 또 다른 박스는 0 0 basis 사용하기

5. 내가 만든 트위틀러 목업 사이트 ( 중간에 키위새가 빙글빙글 돌아간다 )