1 미디어쿼리(mediaquery)

반응형 웹, 반응형 디자인
화면의 크기에 따라 웹페이지가 반응해서 최적화된 모양으로 바뀌게 하는 것

웹은 수많은 형태의 화면에서 동작해야한다 여러가지 화면에 대응되는 웹페이지를 만들기 위해 몸부림을 쳤고 웹을 개발하는데있어 걸림돌, 웹의 단점이었다

다양한 환경에서 적용할 수 있는 기술들을 발전시킨 끝에 반응형 디자인이라는 결과물이 나오게 되었다

화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 동작하게 되었는데

순수한 웹을 css를 통해서 구현하는 핵심적 개념인
미디어 쿼리(mediaquery)에 대해 알아보자!

2 미디어쿼리 연습

새로운 파일을 하나 만들고 실습해보자

기본 html코드를 넣어주고
화면의 크기에 따라서 어떤 html코드를 보였다 안보였다 하기위해서
의미없는 div태그로 responsive를 감싸주고
잘 보이게 하기위해 테두리와 사이즈를 키웠다

      div{
        border: 10px solid green;
        font-size: 60px;
      }

이 div태그를 화면의 크기에 따라 화면에 보이거나 안보이게도 하면
화면에 크기에 따라서 디자인을 다르게 했다고 할수있다

이때 필요한것이 미디어쿼리이다
조금 어렵기때문에 단계적으로 배워가자

화면의 크기가 800px보다 크냐 작냐에 따라서 div태그를 보이거나 안보이게 하고싶다면 현재 화면크기를 알아야 한다

검사를 누른뒤 중간의 선을 움직이게 되면 화면크기가 나온다

      screen width > 800px
        div{
          display:none;
        }

스크린의 크기가 800px보다 크다면 div의 화면을 none로 하고싶다
위의 코드는 이해를 돕기 위해 쓴 가짜코드이기때문에 이걸 미디어 커리로 바꿔보면

     
      @media(min-width:800px) {
        div{
          display:none;
        }
      }   

✔화면의 크기가 800px보다 크다는것은 화면의 크기가 최소한 800px이다
min(최소값)-width(폭) 위와 똑같은 내용을 미디어 안에 적어주면 된다

(display:none; 붙여써야 작동된다)

✔반대로 최대 800px로 적어놓게 되면
스크린의 폭이 800px보다 작다 라는 뜻을 갖게 되고
800px보다 작아지면 사라지는걸 볼수있다

     
      @media(max-width:800px) {
        div{
          display:none;
        }
      }   

📚미디어 커리라는것을 활용하면 스마트폰의 경우
가로모드 세로모드, 화면의 특성에따라서
어떠한 조건을 만족할때만 css의 내용이 동작하도록 하는것이 가능하고
여러가지 형태의 화면이 존재하는 세상에서 중요한 존재이다