Responsive Web : 미디어 쿼리(Media Query)

6480 단어 CSShtmlCSS

반응형 웹을 만들 때 사용하는 미디어쿼리의 기본 사용법

미디어쿼리란?

  • 미디어 - "접속디바이스에"
  • 쿼리 - "질의하겠다!"

미디어 쿼리는 접속 기기에게 "너는 화면 크기가 어느정도 되니?"라고 질문하고 감지한다.
즉, 화면이 있는 접속장치의 너비값을 기준으로 화면 크기에 따른 적절한 레이아웃 구성의 변화를 적용하는 기술.
반응형 웹에서는 대표적으로 스마트폰, 태블릿pc, 데스크탑 이 3가지 화면을 고려하여 작업한다.

미디어쿼리 선언

  • css에 @media를 선언한다. >> @media screen (max-width:992px){ 스타일 지정 }
  • 미디어타입 설정 : screen, tv, print, speech, all(기본값)
  • 조건 설정
    • max-width : 데스크탑 기준으로 작업한 창을 다른 기기의 스크린으로 변경할 때 / 지정한 최대너비 이하는 볼 수 없다.
    • min-width : 모바일 기준으로 작업한 창을 다른 기기의 스크린으로 변경할 때 / 지정한 최소너비 이상은 볼 수 없다.

Break point

  1. 데스크탑 max-width : 1200px
  2. 태블릿pc max-width : 992px
  3. 스마트폰 max-width : 640px



미디어쿼리를 이용한 반응형 웹을 만들어보자!
" 데스크탑 레이아웃을 모바일 레이아웃으로 변환하기 "

HTML

<body>
  <div id="wrap">
    <h1>브라우저의 가로폭에 반응하는 미디어쿼리</h1>

    <header>header</header>

    <section>
      <article class="left">
        <div class="lnb">lnb</div>
        <div class="ad">ad</div>
      </article>
      <article class="cont">content</article>
    </section>

    <footer>footer</footer>
  </div>  
</body>

CSS - style

Media Query 선언

  • 처음 연습할 때는 위의 style 속성을 복사해서 @media {} 안에 붙여넣기 한다.
  • media 선언에서는 화면이 줄어들었을 때 변경될 스타일속성만 작성하면 되기 때문에, 원래 값을 유지할 속성들은 지워준다.
  • flex는 기본값인 block으로 바꿔주고, flex에 해당하는 속성들은 지운다.
  • height는 유지하면서, width를 모두 100%로 변경한다.
  • 좌우 margin을(auto 포함) '0'으로 수정한다. 

✔ 미디어쿼리를 따로 빼내어 css 시트로 작성하는 것도 좋은 방법!
Electron Adventures: 에피소드 83: JRubyFX
Appsmith에서 실시간 비트코인 가격 추적기 구축

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage