css_반응형 웹 (레이아웃)

웹 형태에 따른 목적

• 데스크탑용 웹 : 화면이 넓어서 정보를 최대한 많이 보여줌.
• 모바일 웹 : 작은 화면에서 pc에서 보여주던 정보들을 압축해서 보여줌.
  스마트 기기에서 깨지지 않고 나오는 것이 첫번째 목표.
• 반응형 웹 : 작은화면부터 pc에서 보여주던 정보들을 압축해서 보여줌.
  스마트 기기에서 깨지지 않고 나오는 것이 첫번째 목표. (모든 크기(픽셀)에서 개발자의 의도대로 정보를 보여주는 것.)
• 적응형 웹 : 필요 구간에서만 반응형이 적용되는 것. (의미 없다. )

반응형 레이아웃

1. 접속 기기의 가로 사이즈 먼저 생각해야함
2. 반응형을 만들기 위한 필수 요소 2가지
   1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
      ios 반응형할 때 꼭 필요한 meta태그
   2. 미디어쿼리
      @media screen and (min-width: 최소사이즈) and (max-width: 최대사이즈) and (orientation: 화면 형태){...}
      media에 screen은 변경하지 않은 것을 추천.
   • min-width : 최소사이즈(min 또는 max 둘 중 하나는 꼭 써줘야함. 하나는 안써줘도 됨. )
   • max-width : 최대사이즈(min 또는 max 둘 중 하나는 꼭 써줘야함. 하나는 안써줘도 됨. )
   • orientation : 화면 형태. 옵셔널한 속성(어떤걸로 줘야할 지 모르겠으면 안주면 됨)
     - portrait : 뷰포트의 세로가 긴 상태
     - landscape : 뷰포트의 가로가 긴 상태
     만약 자판이 올라와서 화면이 좁아졌을 때 올라오기 전에는 portrait였으나, 화면이 좁아져서 가로가 길어지게 되면 landscape가 된다.
   • 무조건 n~n값이어야하면 min~max를 써야하지만 그게 아니라면 max-width만 써도 된다.

     @media screen and(max-width: 1000px){background-color: red;}
     @media screen and(max-width: 1300px){background-color: blue;}
     @media screen and(max-width: 1600px){background-color: green;}

     위와같이 하면 0~1000px일 때 red, 1001~1300px일 때 blue, 1301~1600px일 때 green으로 된다.
     max-width로 한다면 큰화면먼저 짜고 작은 화면 순으로 짜면 편하다.
     transform과 달리 2번째 순서때 width값을 바꾸면 3번째 순서때도 변경한 width값이 유지된다.

분기점(break point)

• 기기 화면들의 크기를 일반화 시켜놓은 수치
• ★무조건 지켜야 하는 건 아님
  내가 만든 페이지의 사이즈에 맞춰서 분기점외 사이즈도 만들어야 하는 상황이 있기 때문이다.
• max-width기준. 1920보다 더 큰 사이즈는 있으나 그 윗 사이즈와 1920과 비율이 비슷한 것 같음.
  1920 : 데스크탑 모니터
  1600 : 큰 노트북, 작은 데스크탑 모니터
  1440 : 큰 노트북, 작은 데스크탑 모니터
  1200 : 노트북, 작은 데스크탑 모니터
  ★1024 : 태블릿(아이패드 프로), 옛날 모니터(요즘엔 쓰지 않으니 신경쓰지 않아도 됨.)
  960 : 옛날 모니터
  ★768 : 태블릿(아이패드 프로 제외)
  ★480 : 핸드폰
  320 : 아이폰3 (거의 사용되지 않음)
  280 : 갤럭시폴드
  (기기 사이즈 헷갈리면 개발자페이지가면 나온다. )