[HTML/CSS] 반응형 웹의 미디어쿼리

반응형 웹

반응형 웹(Responsible Web)이란 디바이스(전자기기)별로 각각 레이아웃(grid)이 달라지는 웹

화면의 크기 마다 레이아웃이 달라진다.

 

반응형 웹에서는 필수인 미디어쿼리는, 화면크기마다 각각 다르게 CSS를 적용하는 것이다.
화면 사이즈를 인식해 서로 다른 CSS를 적용시켜준다.

보통은 스마트폰, 태블릿 , PC 화면 3개 정도를 구분해준다.

 

해상도 320px 이상 또는 768px 미만 -> 스마트폰
해상도 768px 이상 또는 1024px 미만 -> 태블릿
해상도 1024px 초과 -> PC

/* 모바일 디바이스 */
@media screen and (min-width: 320px) and (max-width: 480px) {
  body {
    background: pink;
  }  
}
  
/* 태블릿 디바이스 */
@media screen and (min-width: 481px) and (max-width: 1024px) {
  body {
    background: lime;
  }
}

  
/* 랩탑 및 와이드 스크린 디바이스 */
@media screen and (min-width: 1025px) {
  body {
    background: skyblue;
  }
} 

 

미디어쿼리 작성법

• 미디어쿼리를 작성할때는 공통적으로 적용할 css를 작성한 다음 미디어쿼리 따로 작성.
• min방식 사용시 크기가 작은 순서대로, max 방식 사용시 크기가 큰 순서대로 작성한다.
  min : ~이상
  max : ~이하
• 링크방식으로도 사용 할 수 있다.(link 방식은 css 파일이 많으면 속도가 느려진다)
  link 방식 ex ) <link rel="stylesheet" media="all and (min-width:320px)"

@media only | not 미디어유형 and | , (조건문) {적용할 css}

• only 키워드는 미디어쿼리를 지원하는 브라우저에서만 미디어쿼리를 해석하게한다.
• not 키워드는 not 다음에 따라오는 조건을 부정하는 키워드 (ex: not tv 는 tv를 제외한 모든 미디어)

미디어 유형 (생략시 default 값은 all)
- all 모든장치
- screen 컴퓨터 화면 또는 스마트 기기 화면
- tv 영상과 음성이 함께 출력되는 장치
- projection 프로젝터 장치
- handler 손에 들고다니는 소형장치
- speech 음성 출력 장치
- aural 음성 합성 장치 (화면을 소리로 출력해주는 장치)
- embossed 점자 인쇄 장치 (화면을 읽어 종이에 점자를 찍어내는 장치)
- tty 디스플레이 기능이 제한된 장치
- braille 점자 표시 장치
- width 웹페이지 가로 너비
- height 웹페이지 세로 높이
- device-width 기기의 가로 너비
- device-height 기기의 세로 높이
- orientation 기기의 화면방향 (portrait:세로,landscape:가로)
- aspect-ratio 화면 비율
- device-aspect-ratio 단말기기의 화면 비율
- color 기기의 비트 수
- color-index 기기의 색상 수
- monochrome 기기가 흑백일 때 픽셀당 비트 수
- resoulution 기기의 해상력
- scan TV의 스캔 방식
- grid 기기의 그리드/비트맵

• and 키워드는 앞뒤 조건이 모두 사실일때, 콤마는 앞뒤 조건이 하나라도 사실인 경우를 의미.
• 조건문은 조건문이 사실일때를 의미, and나 콤마를 이용하여 두가지 이상 작성이 가능하다.
• 모든 조건문에는 min-, max- 옵션을 줄 수 있다. (ex : min-width , max-width)

다중 조건 ex ) @media (min-width:320px) and (max-width:768px) {적용할css}

 

미디어 쿼리 예제

<style>
@media all and (min-width:320px) {
    #wrap div{
      width:100%;
    }
  }
  @media all and (min-width:768px) {
    #wrap div{
      width:50%;
    }
    #wrap div:nth-child(5){width:100%;}
  }
  @media all and (min-width:1024px) {
    #wrap div{
      width:20%;
    }
    #wrap div:nth-child(5){width:20%;}
  }
</style>

 

Viewport

HTML5에서 소개된 뷰포트 <meta> 태그를 사용하면 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기와 줌 레벨을 조정할 수 있다.

아래는 가장 일반적으로 사용되는 설정이다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

- width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정한다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어준다.

- initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 한다. 0~10 사이의 값을 가진다.

 

이것외에도 다음과 같은 값을 지정할 수 있다.

 

- minimum-scale : 줄일 수 있는 최소 크기를 지정한다. 0~10 사이의 값을 가진다.

- maximum-scale : 늘릴 수 있는 최대 크기를 지정한다. 0~10 사이의 값을 가진다.

- user-scalable : yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정한다.