미디어 쿼리, 뷰포트, 가변 그리드

미디어 쿼리, 뷰포트, 가변 그리드

1. 미디어 쿼리(Media Query)

   • 화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술

   @media [only / not][미디어 유형][and / ,](조건문){실행문}
   

   • only : 미디어 쿼리를 지원하는 브라우저에서만 작동
   • not : not tv 는 tv 빼고 다 지원한다는 뜻
   • 미디어 유형 : all, print, screen, tv 등이 있다
   • and : 앞,뒤 조건이 참일때 실행
   • , : 앞,뒤 조건 중 하나만 사실이더라도 실행
   • 조건문 : min-width: 320px 너비가 320px 이상일 때 실행문 실행, max-width: 768px 너비가 768이하일 때 실행문 실행
   • min은 작은 순서대로 작성, max는 큰 순서대로 작성

   

   
   

2. 뷰 포트(Viewport)

   • 화면에 보이는 영역을 제어하는 기술 혹은 기기의 화면을 통해 보이는 영역
   • 스마트 기기는 pc와 다르게 default viewport로 인해 미디어 쿼리가 작동하지 않을 수 있기때문에 meta 태그에서 화면 크기나 배율을 설정해야한다

   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
   

   • 위 코드는 순서대로 뷰포트 너비 설정, 초기 배율 설정, 최소 축소 비율 설정, 최대 확대 비율 설정, 확대/축소 여부 설정을 뜻한다

   
   

3. 가변 그리드

   • 공식에 의해 정확한 가변 크기의 박스를 만드는 기술
   • (가변 크기로 만들 박스의 가로 너비 / 박스를 감싸는 박스의 가로 너비) x 100 = 가변 크기의 % 값
   • 예를 들어, 960px의 container에 300px의 child box가 있다면 width는 31.25%가 된다
   • 가변 마진, 가변 패딩도 위 공식과 동일하다
   • (가변 패딩, 마진값 / 부모 박스의 가로 너비) x 100 = 가변 % 값
   • 글자 크기는 상대적 단위인 em을 사용한다. em은 대문자 M의 너비를 1cm로 표현한 것으로 16px이 1em이다
   • 자식 태그의 폰트 크기 / 부모 태그의 폰트 크기 = 가변 폰트 값
   • 예를 들어, 32px의 P 태그 안에 16px의 span 태그가 있다면 0.5em이 된다
   • em은 부모 태그의 글자 크기가 지정되어 있을 경우 자식 태그의 글자 크기가 상속된다
   • rem은 최상위 html 태그의 폰트를 기준으로 작동한다
   • vw (viewport width) : 웹 브라우저의 너비를 100으로 잡고 크기를 결정
   • vh (viewport height) : 웹 브라우저 높이를 100으로 잡고 크기를 결정
   • 5vw, 5vh는 각각 전체 웹 브라우저 너비,높이의 5%가 된다
   • vmin (viewport minimum) : 웹 브라우저 너비,높이 중 짧은 쪽을 기준으로 크기를 결정
   • vmax (viewport maximum) : 웹 브라우저 너비,높이 중 큰 쪽을 기준으로 크기를 결정

참고 자료

Do it 반응형 웹 만들기