[CSS] 반응형 웹 구현하기 - media query

반응형 웹페이지의 필요성

랩탑, 태블릿, 스마트폰 등 다양한 미디어 디바이스의 등장으로 인해 사용자들은 웹페이지를 다양한 크기의 여러 기기에서 이용하게 되었다. 그에 따라 화면이 깨져 나오지 않게 할 뿐만 아니라 큰 화면의 내용을 작은 화면에서 너무 복잡하지 않게 보이게 하기 위해 좀 더 간단한 인터페이스를 설계하는 등의 노력이 필요하게 되었다.
이 중 가장 쉽고 널리 쓰이는 기술 중 하나가 미디어 쿼리이다.

2차 프로젝트를 위해 롸잇 나우, 미디어 쿼리를 정리하고 간다.

.myclass {
  	width: 600px;
    height: 450px;
    background: powderblue;
}
@media only screen and (min-width: 300px) and (max-width: 599px) {
  .myclass {
    width: 200px;
    height: 150px;
    background: green;
  }
}

미디어 쿼리의 사용

실제 코드를 해석하며 정리해본다.

@media only screen

"미디어 쿼리를 시작하겠다, 스크린을 가지는 장치에서" 정도의 의미이다. screen외에도 print, speech, all 등이 존재하지만 거의 screen만 쓰므로 큰 의미는 없다.

범위: (min-width: 300px) and (max-width: 599px)

최소너비 300px에서 최대너비 599px 사이의 범위에서 아래에 적힌 CSS를 적용하겠다는 뜻이다. 범위는 둘 중 하나만 적어도 적용된다.

SCSS + 미디어 쿼리

$phone : "Only screen and (max-width : 480px) " ;
$desktop : "screen and (min-width : 481px)";

@import './mediaQuery.scss';
@media #{$phone} {
  .hello {
    background: pink;
  }
}

@media #{$desktop} {
  .big-box {
    background: green;
  }
}

변수활용, nesting, impot가 가능한 SCSS의 장점을 활용할 경우 미디어 쿼리의 활용도를 더욱 높일 수 있다.
변수로 한번 지정해 준 후 import해서 필요한 곳에서 가져오면 좀 더 편하게 사용할 수 있기 때문이다.

.boxWrapper {
     font-size: 16px;
     line-height: 1.5;
	 margin: 10px auto;
     @media screen and (max-width: $phone {
         display: none;
      }
    }

또한 꼭 selector 바깥이 아닌 selector 내부에 적어도 무방하다.

공부해보니 미디어 쿼리 사용법 자체가 복잡한 것은 아니나 크기가 줄어들다가 nav bar의 크기가 단순히 줄어드는 것이 아닌 디자인 자체가 바뀌는 등의 변화가 일어날 경우 조금 복잡할 수도 있겠다는 생각이 들었다.

2차 프로젝트 때는 처음부터 반응형을 어디에 넣을 지 잘 계산해서 페이지를 만들기 시작해야 할 것 같다.

프로젝트 중에 작성해 넣은 반응형 코드는 다음에 뒤에 덧붙일 예정~!