210709 개발일지 미디어쿼리(1)

김지훈·2021년 7월 9일

학습한 내용

적응형 웹사이트
웹사이트 크기 조절 시 픽셀 단위로 끊기면서 웹사이트 레이아웃의 구조가 바뀜, 각 환경에 맞게 픽셀 단위로 레이아웃이 정해진 값을 가진다.
반응형 웹사이트
웹사이트 크기 조절 시 공간이 자연스럽게 리사이즈된다. 예를 들어 pc버전 웹사이트가 모바일에 맞춰 자연스럽게 바뀜, 퍼센트개념

width값의 크기를 기준으로 어떤 분기점을 설정할때 사용하는 것
- 사용자의 브라우저 크기에 맞추어 웹사이트의 크기를 설정할 수 있다.
- @media -> 기준점을 만들어주자
사용자가 어떤 기기로 접속하였는지 알 수 있는 방법
- 사용자가 접속한 기기의 width값을 기준으로 파악할수있다.
  320~768px 미만 : 스마트폰
  768~1024px 미만 : 테블릿
  1024px 이상 : pc
기준에 도달하였을 때 배경이 없다면 원래 값에서 상속이되니깐 확인하면서 해야한다.
이러한 과정들이 번거롭다면 pc용 mobile용(http://m.) html을 따로 만들어도 상관없다.
각각의 구조가 완전히 다를 경우에 별도로 제작
미디어쿼리 사용시 필수 meta태그 (default값)
- 사용자가 웹사이트 접속할때 사이트의 크기를 사용자가 보는 디바이스 비율에 맞게
  자연스럽게 스케일업해주는것이 뷰포트의 역할
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
  viewport = 기기화면
  width = 기기 화면의 위드 값
  scale비율

display 속성
- 미디어쿼리에 기준점을 설정하여 일정 기준에 도달하면 mobile화면이 전환되도록 display속성을 사용할 수 있다.
- pc화면에서는 보이지 않게 설정한 mobile화면은 display속성을 통해 inline혹은 block요소들을 선택하여 보여줄 수 있다.
- 하지만 1개의 html파일에 비슷한 의미의 정보가 같이 있는 것은 보기가 좋지 않기 때문에
  기획단계에서 pc와 mobile 양쪽 모두의 환경을 고려해서 컨텐츠 제작하는게 중요하다.

개발 기간이 여유롭다면 mobile -> tablet -> pc 순서로 제작 할 수 있다.
https://helbak.com/ 참고
위의 코드에서 두번째 미디어쿼리의 max-width 값음 다음 범위의 미디어쿼리의 최소값인 1024px이다.
미디어쿼리 안쪽에서 점차 큰 기기로 적용이 가능하다.
https://helbak.com/ 참고 사이트의 개발자 페이지를 살펴보면, 웹사이트의 크기 줄어들면 적용되어 있던 미디어쿼리가 사라지는 것을 볼 수 있다. (모바일 화면부터 작업했기 때문에)
코드분량이 많이 줄어드는 장점이 있다.