[rem]

html의 폰트 사이즈의 배가 된다.

html의 기본 폰트 사이즈는 16px

1rem = 16px

1.5rem = 24px

2rem = 32px

html의 폰트 사이즈 값을 변경하면 rem으로 지정된 모든 px(실 사이즈)는 바뀐다.

Flexbox

(출처: 유튜브_드림코딩)

flexbox에는 중심축과 반대축이 있다!!

• items들의 정렬
  
  

<container을 꾸며줄 수 있는 속성값>

• flex flex-col

1. display: flex; = 이제 flexbox인걸 명명함 (item들을 왼쪽에서 오른쪽으로 정렬함)
2. flex-direction: row; = 왼쪽에서 오른쪽 방향 (행)
   * flex-direction: column = 위에서 아래 방향 (열)
                        -reverse가 들어가면 오른쪽에서 왼쪽/ 아래에서 위로 전환됨

3. flex-wrap : nowrap; 한줄에 빼곡하게 들어가있음
   * flex-wrap: wrap; 한줄에 꽉차게되면 자동적으로 다음 줄로 넘어감 
               -reverse
4. flex-flow: column nowrap
    위와 같이 'flex-direction과 flex-wrap을 한꺼번에 표현할 수 있음

• justify-center

5. justify-content: flex-start; = 중심축에서 item들을 어떻게 배치할 건지
     (기본값은 처음부터 왼쪽에서 오른쪽으로 배치
   * justify-content: flex-end; 오른쪽끝으로 아이템들 배치 (순서는 유지)
   * justify-content: center; 중앙으로 아이템들 배치 (순서는 유지)
   * justify-content: space-around; 아이템들 둘러싸게 space를 넣어 배치
     (양끝에 공간이 중앙아이템들의 공간보다 작음..!)
   * justify-content: space-evenly; 아이템들 간격을 동일하게 배치 
   * justify-content: space-between; 양끝 아이템은 화면에 맞춰 배치하고 가운데 아이템들 간격은 동일하게

• items-center

6. align-items= 반대측에서 item들을 어떻게 배치할지
  * align-items:center; 반대측에서 아이템들을 중앙에 배치
  * align-items:baseline; 텍스트가 균등하게 보여잘 수 있도록 baseline에 맞춰서 아이템 배치

7. align-content (<->justify-content가 중심축에서 item을 어떻게 배치할 지에 대한 거라면
   align-content는 반대축 아이템을 배치함)
    * align-content:space-between; 
    * align-content:center; 
   

참고 사이트: mdm web docs

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

참고 사이트: css-tricks

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

참고 사이트: Material Design Color Tool
https://m3.material.io/styles/color/system/overview
(활용법 시간 날때 익히기)

<container안에 들어가는 item을 꾸며줄 수 있는 속성값>

• flex-grow

1. order; 각 아이템들의 순서를 지정할 수 있음 (잘 쓰여지지 않음..)
2. flex-grow; container의 값을 채움 
    * flex-grow:0 (기본값= 채워지지 않음)
    * flex-grow:1
    * flex-grow:2 (2배로)
3. flex-shrink; container의 사이즈가 바뀌었을때 아이템들이 늘어나고 줄어드는 것 결정함
4. flex-basis; 아이템들이 공간을 얼마나 차지해야되는지 좀 더 세부적으로 명시할 수 있게 도와줌
    * flex-basis: auto;
    * flex-basis: 60% (비율로 결정할 수 있음)

6. align-self; 각 아이템별로 배치할 수 있음
  * align-self:center;

flexbox practice

사이트: https://flexboxfroggy.com/#ko

w(width)가로 - px
h(height)세로 - px