반응형 웹, Responsive Web, 미디어쿼리, @media

less than 1 minute read

  • W3C
  • 미디어쿼리 : http://www.w3.org/TR/css3-mediaqueries/
  • css 3 에 선언된 Media Queries 에 대한 문서

  • 미디어타입 : http://www.w3.org/TR/CSS2/media.html
  • CSS에 장치의 적용할 형식
  • 기본적으로 all이며, print(출력할때) 등을 간간히 사용한다.
  • print 로 지정해서 출력할 때 불필요 부분 감추기 등

  • 필요조건
  • CSS3지원(그 중 미디어쿼리 지원)

  • 예제 모양
  • @media all {
    body { background:lime } 
    }
  • @media all and (max-width:930px) {
    #div_pics{ width:620px;}
    }
  • 모든 미디어 타입에 대해서 페이지 너비가 930px 이하일 때
    밑의 스타일을 적용시킨다.

🔗original-link

Updated: