반응형 / flexible box

*필요한4가지
1.가변크기 = 상대단위 ex) %, 폰트rem, vw(기기최적화), vh ( vw,vh는 모바일앱에 많이씀)

※가변그리드 공식: (지정한 크기 / 상위요소 크기 ) * 100 = % (소수점3자리까지)
  예시) (500 / 1920)*100 = 26.041%  = 바디안에 이너정도만 퍼센트를 쓰고 그 내부에 디테일한부분은 퍼센트안씀
  
※가변폰트 em
상위요소를 기준으로 함- div 안에있는 p를 50px로 만들려고하면 
div가 만약 20px이면 50/20이되는것! 
- 이렇게되면 계산공식이 너무 어려워짐 
  16px = 1.0em = 100% 
  20px = 20/16 = 1.25em = 125%
  50px = 50/16 = 3.125em = 312.5%
 
그래서 나온게 rem / r =  root 
rem의 기준은 html에 font-size를 정의해버리고 나면 그 기준으로만 계산

계산하기쉽도록 아예 html기준잡을때 10px로하고 
만약 30px로 나타내고싶으면 3.0rem이렇게 하는거 
html { font-size: 62.5%; } = 이게 10px / %로 하는건 웹접근성에따라 다르게 하기위해

2.미디어쿼리 - css에서 화면해상도에 따른 변화 
@media all and (=screen, print 포함, all and생략가능)(max-width: 1400px){
  div { width: 500px; }
} 
= 1401px이면 원래크기로 돌아가고 1400px 이하로는 500px로 크기값이 들어감 
@media(min-width:700px) and (max-width: 1400px){
  div { width: 500px; }
} 

※소괄호안에들어가는게 중단점=분기점=breakpoint라고함
-데스크탑 1400~1920
-노트북 1024 ~ 1600
-태블릿 768 ~ 1024
-모바일 360 ~ 768

3.뷰포트코드 - html head에 작성

4.flexible box

-부모박스(ul)
-자식박스(li)

가로축이 주축 - main axis 
세로축이 교차축 - cross axis

1.display: flex;  부모박스에 선언, 자식요소들의 배치 
2.flex-wrap: nowrap(기본값:무조건 가로한줄배치/부모요소에 선언); =가로 한줄에 크기가 넘쳐나더라도 다음줄로 넘길건지
 - > flex-wrap: wrap; = 줄넘김

주축배치
3.justify-content:(부모요소에 선언, 가로배치) ; 
    1.flex-start(기본값) 2.flex-end 3.center 4.★space-between 5.space-around 6.space-evenly

교차축배치
4.align-items:(부모요소에 선언, 세로배치) ; 
   1. stretch(기본값-ul꽉채워서 왼쪽으로 정렬) 2. flex-start(높이값안주면 inline처럼 폰트만큼만 크기잡고 맨 상단에 정렬) 
   3. flex-end 4. ★center 5. baseline

header에 position쓰고 display:flex;같이쓸수있음 
로고,gnb,util 다 높이가 다른데 세로중앙에 정렬할때 align-items: center; 
=이런거쓰면 margin-left나 패딩으로 위치값을 안잡아도된다

개별배치
5.align-self:(자식요소에 선언, 세로축 개별배치);
  1.auto 2.stretch 3.flex-start 4.flex-end 5.cneter 6.baseline

다양하게 배치 
6.align-content:(부모요소에 선언, 세로축 여러줄배치);
   ※4,5번과의 차이점은 이건 여러줄일경우 어떻게 배치할건지 
   1.stretch 2.flex-start 3.flex-end 4.center 5.space-between 6.space-around

세로축을 주축으로 변경 
7.flex-direction:(부모요소에 선언, 주축변경);
   1.row(기본값-가로축이 메인축) 2.row-reverse 3.column(세로축이 메인축)
   4.column-reverse     /reverse는 순서를 바꿈 
   ※주의할점은 이렇게 축을 바꾸면 
   justify가 세로축 배치가 되고 align이 가로배치가됨 

8.order:(자식요소에 선언, 순서정의);
   0(기본값) / 정수  =노출되는 순서  

*SVG 벡터형식의 파일  - 로고, 아이콘  
비트맵(JPG,GIF,PNG)