반응형 웹사이트 만들기 - max-width / min-width

하단에 설명 있음.

 

.wrapper {

  min-width: 1440px;

}

처음 전체 창 크기 설정만 함.

 

창을 줄일 수록 오른쪽이 잘림.

 

.wrapper {

  min-width: 1440px;

}

이렇게 고쳐봤는데 이거보단,

.wrapper {

  width: 100%;

}

이렇게 수정해주고,

 

css하단에 

@media screen and (max-width: 1200px) {

  .wrapper {

    min-width: 100%;

  }

  .navbar a {

    font-size: 16px;

  }

}

@media screen and (max-width: 570px) {

  .wrapper {

    min-width: 100%;

  }

  .navbar a {

    font-size: 10px;

  }

}

이거 추가 해줌.

 

그리고 추 후에,

@media screen and (max-width: 1200px) {

  .wrapper {

    width: 100%;

  }

  .navbar a {

    font-size: 16px;

  }

}

@media screen and (max-width: 570px) {

  .wrapper {

    width: 100%;

  }

  .navbar a {

    font-size: 10px;

  }

}

이렇게 수정해줌.

나중에 다시 수정 필요

@media screen and (max-width: 1200px) {
  .wrapper {
    max-width: 1200px;
  }
  .navbar a {
    font-size: 16px;
  }
}
@media screen and (max-width: 570px) {
  .wrapper {
    min-width: 200px;
  }
}

---

min - width 하고

max -width 사용하는 경우: 

max-width:
max-width 속성은 요소의 최대 너비를 설정

이 값보다 요소의 너비가 커질 수 없다

.container {
  max-width: 1200px;
  margin: 0 auto;
}

 

위 CSS는
.container 클래스를 가진 요소의 최대 너비를 1200px로 제한한다.
화면이 1200px보다 넓어지더라도,
.container 의 너비는 1200px을 넘지 않음.


이는 큰 화면에서 콘텐츠가 너무 퍼지지 않게 하여 가독성을 높이는 데 유용

---

min-width
요소의 최소 너비를 설정

이 값보다 요소의 너비가 작아질 수 없다

브라우저 창이나 부모 요소의 너비가
min-width 보다 작아지더라도, 해당 요소는 min-width
에서 설정된 너비 이하로 축소되지 않습니다.

.sidebar {
  min-width: 200px;
}

 

.sidebar
클래스를 가진 요소의 최소 너비를 200px로 설정합니다. 화면이 200px보다 좁아져도,
.sidebar 의 너비는 200px보다 작아지지 않는다.


너무 좁은 화면에서 콘텐츠가 제대로 표시되지 않는 것을 방지.