기본 문법

@media (조건) {
  스타일 //조건 만족 시 스타일 적용
}

좁은 화면 스타일링

모바일 환경을 위한 스타일을 적용하고 싶을 때는 최대 너비를 조건으로 하여 미디어 쿼리를 사용

<div class="small-tomato">좁은 화면에서는 배경색이 토마토</div>

max_width를 사용하여 미디어 쿼리 작성

@media (max-width: 800px) {
  .small-tomato {
    background-color: tomato;
  }
}

넓은 화면 스타일링

<div class="large-tomato">넓은 화면에서는 글자색이 토마토 색이 됩니다.</div>

min-width 를 사용하여 미디어 쿼리 작성

@media (min-width: 800px) {
  .large-tomato {
    color: tomato;
  }
}

화면 너비에 따라 엘리먼트 숨기기

<ul>
  <li class="desktop">저는 넓은 화면에서만 보입니다.</li>
  <li>저는 항상 보입니다.</li>
  <li class="mobile">저는 좁은 화면에서만 보입니다.</li>
</ul>

미디어 쿼리 작성

@media (max-width: 600px) {
  .desktop {
    display: none;
  }
}

@media (min-width: 1000px) {
  .mobile {
    display: none;
  }
}

styled-components에 사용하기

const Common = styled.div`
    display: flex;
    justify-content: space-between;
    margin: 20px;
    @media screen and (max-width: 500px) {
        flex-direction: column;
    }
`

목표

이번 프로젝트는 모바일을 우선 작성할 예정이므로 다음과 같은 순서로 작성할 것이다.

/* 모바일에 적용될 스타일을 먼저 작성 */

@media (min-width: 769px) {
	/* 데스크탑에서 사용될 스타일을 작성 */
}

참고문헌

• CSS 미디어 쿼리
• 반응형 웹을 위한 미디어 쿼리 사용법