Day 4

Day4. Flex&Grid

 

1. 회원가입 폼에 아래와 같이 CSS 적용해보기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

전체를 article로 잡고 가운데 정렬을 했더니 사용기술부분의 정렬이 어려워 표로 만들어 그런지 간격이 맞지 않게 정렬이 되어 왼쪽 마진값을 주어 통일시켰다.

 

 

2. 문제 풀어보기 http://w3schools.com/css/css_grid_item.asp

W3Schools.com

 

3. Grid Garden, FlexBox Froggy 한번 풀어보기

Grid Garden - CSS grid 속성 배우기 게임 (cssgridgarden.com)

Grid Garden

 

7) span은 넓이를 지정 span2는 2

22) grid-template-columns: 속성 나누는 법 찾아보기 (%, em, px)

26) ...?

28) px크기를 잘모르겠다...

 

Grid Garden - CSS grid 속성 배우기 게임 (cssgridgarden.com)

Flexbox Froggy

24) flex-wrap: wrap-reverse;

      flex-direction: colum-reverse;

      justify-conten: center;

      align-content: space-btween;         //천천히 순서대로 다시 해보자! (몇번을 해도 마지막에서 못하네..ㅜ)