미디어쿼리(Media Query)

• Responsive Web을 구현할 때 사용한다.
• 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 한다.
• 뷰포트의 너비가 같은 여러 장치들의 조건에 맞춰 특정한 CSS 스타일을 지정한다.
  → viewport(뷰포트) : 스마트폰 화면에서 실제 내용이 표시되는 영역

@media 미디어 유형 and (조건)

1. @media : 미디어 쿼리 시작!
2. 미디어 유형 : only screen(스크린/화면) , only print(프린트) 등등
3. and(조건) : media feature라고 한다. CSS를 적용할 조건을 적는다.(화면 사이즈 등)

top-down

• 모니터 웹 화면 제작 후 작은 스마트폰 등 화면 제작(복잡→간단)

/* top-down 방식*/
body {
    background: url("images/bg0.jpg") no-repeat fixed;
    background-size: cover;
}

@media screen and (max-width:1024px) {
		/*화면 너비가 1024px이 되면*/
     	body {
        	background: url("images/bg1.jpg") no-repeat fixed;
        	background-size: cover;
          }
}

@media screen and (max-width:760px) {
		/*화면 너비가 760px이 되면*/
    	body {
       		background: url("images/bg1.jpg") no-repeat fixed;
       		background-size: cover;
         }
}

@media screen and (max-width: 600px) {
		/*화면 너비가 600px이 되면*/	
		body {
      		background: url("images/bg2.jpg") no-repeat fixed;
      		background-size: cover;
        }
}

bottom-up

• 스마트폰 등 화면 제작 후 모니터 웹 화면 제작(간단→복잡)

/* bottom-up 방식 */
        body {
            background: url("images/bg3.jpg") no-repeat fixed;
            background-size: cover;
        }

        @media screen and (min-width:600px) {
            /*화면 사이즈가 600px를 벗어나면*/
			body {
                background: url("images/bg2.jpg") no-repeat fixed;
                background-size: cover;
            }
        }

        @media screen and (min-width:760px) {
	          /*화면 사이즈가 760px를 벗어나면*/
			body {
                background: url("images/bg1.jpg") no-repeat fixed;
                background-size: cover;
            }
        }

        @media screen and (min-width: 1024px) {
            /*화면 사이즈가 1024px를 벗어나면*/
			body {
                background: url("images/bg0.jpg") no-repeat fixed;
                background-size: cover;
            }
        }

SCSS에서 미디어 쿼리 사용하기

mediaQuery.scss

$phone: "only screen and (max-width: 768px)";

$desktop: "screen and (min-width: 769px)";

box.scss

@import './mediaQuery.scss';

@media #{$phone} {
	.bigBox {
		display: none;
	}
}

@media #{$desktop} {
	.bigBox {
		display: block;
	}
}