반응형 웹을 만들 때 사용하는 미디어쿼리의 기본 사용법
미디어쿼리란?
- 미디어 - "접속디바이스에"
- 쿼리 - "질의하겠다!"
미디어 쿼리는 접속 기기에게 "너는 화면 크기가 어느정도 되니?"라고 질문하고 감지한다.
즉, 화면이 있는 접속장치의 너비값을 기준으로 화면 크기에 따른 적절한 레이아웃 구성의 변화를 적용하는 기술.
반응형 웹에서는 대표적으로 스마트폰, 태블릿pc, 데스크탑 이 3가지 화면을 고려하여 작업한다.
미디어쿼리 선언
- css에 @media를 선언한다. >>
@media screen (max-width:992px){ 스타일 지정 } - 미디어타입 설정 : screen, tv, print, speech, all(기본값)
- 조건 설정
- max-width : 데스크탑 기준으로 작업한 창을 다른 기기의 스크린으로 변경할 때 / 지정한 최대너비 이하는 볼 수 없다.
- min-width : 모바일 기준으로 작업한 창을 다른 기기의 스크린으로 변경할 때 / 지정한 최소너비 이상은 볼 수 없다.
Break point
- 데스크탑
max-width : 1200px - 태블릿pc
max-width : 992px - 스마트폰
max-width : 640px- 다양한 미디어쿼리 분기포인트가 존재하는데 사이트 구축 상황에 맞게 선택하면 된다.
- 참고하면 좋은 사이트
미디어쿼리 break point
디바이스 종류별 미디어쿼리 기준
넥스트리소프트 - 반응형 웹
미디어쿼리를 이용한 반응형 웹을 만들어보자!
" 데스크탑 레이아웃을 모바일 레이아웃으로 변환하기 "
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 시트로 작성하는 것도 좋은 방법! 
의미와 가치를 쫓는 개발자 ✨