CSS 미디어 쿼리를 통한 블록 재구성

다양한 화면 너비에서 블록 재구성을 수행하는 방법을 배워봅시다. 예를 들어 다음과 같은 동작을 구현해 보겠습니다:

먼저 블록의 HTML 코드를 작성해 봅시다:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

이제 블록들의 부모 요소에 스타일을 적용해 보겠습니다:

css.parent {
  display: flex;
  width: 90%;
  margin: 50px auto;
  border: 1px solid red;
}

이제 블록 자체에 스타일을 적용하겠습니다. 미디어 쿼리로 변경될 속성은 지정하지 않습니다:

css.child {
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid green;
}

큰 화면 너비에서는 블록 사이의 간격이 자동으로 계산되도록 합시다:

css@media (min-width: 500px) {
  .parent {
    justify-content: space-between;
  }
}

간격을 남기기 위해 블록의 너비를 50%보다 약간 작게 설정합시다:

css@media (min-width: 500px) {
  .child {
    width: 49.5%;
  }
}

작은 화면 너비에서는 블록들을 세로로 배치합시다:

css@media (max-width: 500px) {
  .parent {
    flex-direction: column;
  }
}

블록들에 아래쪽 여백을 지정합시다:

css@media (max-width: 500px) {
  .child {
    margin-bottom: 10px;
  }
}

모든 것을 합치면 다음과 같은 코드가 됩니다:

css.parent {
  display: flex;
  width: 90%;
  margin: 50px auto;
}
.child {
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid green;
}

@media (max-width: 500px) {
  .parent {
    flex-direction: column;
  }
  .child {
    margin-bottom: 10px;
  }
}
@media (min-width: 500px) {
  .parent {
    justify-content: space-between;
  }
  .child {
    width: 49.5%;
  }
}