CSS를 시작해보자 ~
1. 필요 기초 지식 : css, html
2. 필요 소프트웨어 : node.js, vite

사전 준비

vite 깔고 개발 환경 만들기

=> 강의 #1.2 를 참조
npm run dev를 해야 개발 서버가 열린다 / 끄는 건 ctrl+c
새로고침 없이도 바로 반영이 되는 멋진 서버이다.

Flexbox 사용하기

flexbox 가 생기기 전의 삶을 체험해보자

1. Box 3개 만들기

1. emmet 사용하기

• emmet 이라는 extension이 VS 에는 기본적으로 깔려있다.
• .box -> < div > box < /div > 이런식으로 만들어주는 축약키

2. 기본 css 설정하기

• box 3개를 만들고, 각각의 css를 지정해보자.

.box {
  width: 200px;
  height: 200px;
  background-color: tomato;
}

이 box들은 block이기 때문에 나란히 설 수 없다.
그러나 displat:inline는 width height를 지원하지 않기 때문에 박스가 사라져버린다.
=> 해결법 : display: inline-block;

3. 칸 띄우기

.box:first-child{
  margin-right: 300px;
}

.box:last-child{
  margin-left: 300px;
}

이런식으로 마진을 주면서 띄워야한다. 하지만 창 크기가 좀만 변해도 끔찍해진다... 인간이 간격을 계산하지 않아도 되는 시스템은 없을까?

4. 선언형을 시도해보자.

• it 잡학사전에서 봤던 말이다. 명령형이 아니라 선언형으로 말만 해도 컴퓨터가 알아서 해준다면 얼마나 좋을까?

2. Flex 사용해보기

• flexbox란, layout을 선언형으로 만들 수 있게 만든 도구이다.
  • 마진 등에 대해 신경쓸 필요가 없다.
  • 각 div 요소에 대해 명령할 필요가 없다.
  • 부모 요소와 대화한다.

1. < body > 에게 명령하기

body{
  display: flex;
}

.box {
  width: 200px;
  height: 200px;
  background-color: tomato;
}

단순 display:flex 설정만 해도 애들이 옆에 붙는다.

2. justify-content

body{
  display: flex;
  justify-content: space-between;
}

바로 공간이 생긴다. 무섭다...

3. flex-direction

• flex container 안의 콘텐츠가 정렬되는 방식이다.
• 기본은 row (가로)이며, column (세로) 방식으로 변경 가능하다.

4. justify-content align-items

• justify-content
  - main axis에서 이동시킨다.

• align-items
  - cross axis에서 이동시킨다.
  

5. flex-wrap

• flex 내의 콘텐츠가 최대 넓이를 초과할 때, 줄바꿈이 가능하게 해준다.
• 기본은 unwrap (줄바꿈 불가) 이며, wrap 을 지정시 줄바꿈 가능하다.

6. flex-flow

• flex-direction과 flex-wrap을 함께 지정할 수 있는 설정
  -flex-flow: row wrap; 식으로 적는다.

7. align-content

• 다중라인 container를 다룰때, 다중라인의 위치를 조정해주는 설정
  
  띄워져 있던 줄들이 센터로 조정된다.

8. gap

• 각 행과 열에 틈을 줄 수 있다. gap 을 0으로 설정하면 다음과 같이 된다.

3. Flex 심화 - child에게도 적용되는 flex

1. order
   

• 3번을 6번의 옆으로 옮겨보자.

  .box:nth-child(3){
    background-color: blueviolet;
    order: 2;
  }

  
  .box:nth-child(6){
    background-color: #5cecff;
    order: 1;
}

• 기본적으로 order 는 0의 값을 가진다. 따라서 child에 1, 2의 값을 주면 0보다 뒤에 위치하게 된다. 역으로 parent에 3의 값을 주면 child가 앞으로 가게 된다.
  - order는 음수값도 반응한다.
  • order는 반응형 웹을 만들 때 유용하다.

2. align-self

• cross axis 상에서 각 child의 위치를 조정할 수 있다.

  .box:first-child {
    align-self: flex-start;
  }

  .box:last-child {
    align-self: flex-end;
  }

3. flex grow

• flex grow는 child 에게 그들이 얼마나 공간을 차지할 수 있는지 지정해준다. 반응형 디스플레이에서 유용한 방식.

  .box:first-child {
    background-color: tomato;
    flex-grow: 1;
  }

  .box:last-child {
    background-color: teal;
    flex-grow: 1;
  }

1:1 로 설정하였을 때

2:1로 설정하였을 때
-> 비율로 움직인다! 유동적이다!

4. flex-shrink

• 이번에는 반대로 얼마나 줄어들지 설정할 수 있다.
• 1번째 박스는 shrink를 3, 2번째는 0, 3번째는 3으로 설정해봤다.

찌그러뜨렸을 때 줄어드는 반응이 다르다.

5. flex-basis

• flex-basis를 통해 자라는 시작점을 지정할 수 있다.
• 1번째는 500px부터 시작, 2번째는 미지정해줬을 때 같은 grow 비율이라도 basis가 큰 쪽이 더 넓게 차지한다.
• shrink가 0일때, flex-basis는 min width의 역할을 한다.
• grow가 0일때, flex-basis는 max width의 역할을 한다.

  .box:first-child {
    background-color: tomato;
    flex-grow: 1;
    flex-basis: 500px;
  }

  .box:last-child {
    background-color: teal;
    flex-grow: 1;
  }

• flex-basis는 height로도 작용한다. flex-direction이 column이 될 경우, basis는 높이가 된다.

6. flex

• flex-grow flex-shrink flex-basis를 한 번에 조정할 수 있는 함수
• flex : grow shrink basis 방식으로 지정하면 된다.

---

Day 2 만든 과제, 뿌듯하당...

flexbox froggy 게임을 통해 flexbox를 연습할 수도 있다

---