반응형 CSS 너비

CSS를 작성하고 있으며 웹 사이트가 모든 장치에서 보기 좋게 보이도록 미디어 쿼리를 사용해야 했습니까? 좋은 소식은 미디어 쿼리가 항상 필요한 것은 아니라는 것입니다.
이 시리즈는 많은 미디어 쿼리를 사용하지 않고도 사이트를 반응형으로 만드는 데 사용할 수 있는 다양한 CSS 트릭에 중점을 둘 것입니다.

이 기사에서는 여러 미디어 쿼리를 작성하지 않고도 특정 요소의 너비를 자동으로 조정하는 방법을 살펴보겠습니다.

방법은 다음과 같습니다.

.container {
  width: 1200px;
  max-width: 100%;
}

기본적으로 container 요소는 1200px의 너비를 가져야 하지만 어떤 지점에서도 상위 요소의 최대 너비인 100%를 초과해서는 안 됩니다. 따라서 부모의 너비가 1200px 보다 큰 경우 요소는 1200px 로 증가하지만 부모가 1200px 보다 작은 경우 요소는 100% 만 차지합니다.

이 지식을 사용하여 애플리케이션의 콘텐츠를 저장할 컨테이너 클래스를 생성해 보겠습니다.

.container {
  width: 1200px;
  max-width: calc(100% - 20px);
  margin: 0 auto;
  padding: 0 10px;
}

이 경우 페이지에서 요소를 수평으로 중앙에 배치하는 여백0 auto과 왼쪽 및 오른쪽 요소 내에 간격을 추가하는 패딩0 10px을 추가했습니다. max-width 속성의 변경 사항을 눈치채셨을 것입니다. 요소에 추가한 패딩을 설명하기 위해 이 작업을 수행합니다. calc(100% - 20px)는 CSS에 100%에서 20px를 빼고 max-width로 설정하라고 지시합니다. 이 속성이 없으면 부모가 1200px보다 작을 때 요소의 전체 너비는 100% + 왼쪽의 10px 패딩 + 오른쪽의 10px 패딩이 됩니다.

이것으로 우리는 작은 장치에서 잘 보이고 화면 크기가 아무리 크더라도 1200px를 초과하지 않는 컨테이너가 있습니다.

다음은 코드에서 어떻게 되는지 보여주는 codepen 링크입니다.