공군소령김도지
614
2021-06-04 08:25:01
3
157

CSS min-height/width는 왜 주는 건가요?


예를 들어 max-height/width:300px 같은 경우는 브라우저 크기가 줄어들면 300px 밑으로 줄어 들지 않나요?

아무리 커저도 300px 이구요. 


근데 min-height/width:300px 는 브라우저 크기에 상관없이 최소 크기를 300px를 주겠다는 건데 

이건 그냥 height/width:300px랑 똑같이 안나요???


진짜 모르겠습니다. 

0
  • 답변 3

  • baebae
    424
    2021-06-04 08:57:44
    안에 컨텐츠가 없어도 사이즈는 유지하고싶은데 컨텐츠가 커져서 300px을 넘는 상황이 오게될경우 자동적으로 height의 크기가 늘어나게 하고싶을때사용합니다. 그냥 height 는 고정사이즈로 안에있는 컨텐츠가 300px을 넘었을경우 사이즈는 300px 고정이기때문에 안에있는 컨텐츠가 밖으로 튀어나오게되는데 이걸 유동적으로 대응하기 위해서 사용할 수 있습니다.
  • RWB
    1k
    2021-06-04 09:15:39

    DOM의 최소 width, heigth를 설정합니다.


    div의 내용이 없거나 부실할 경우, 해당 내용의 크기만큼 잡히는데, min-width, min-height를 통해 "적어도 이 정도 만큼은 유지해라"라는 조작을 할 수 있습니다.


    또한 반응성에서도 중요한데, 화면이 작아짐에 따라 DOM이 해당 사이즈에 맞춰 작아져도, min 설정을 통해 최소한의 길이, 높이를 보증할 수 있습니다.


    max 속성도 있는데, 이는 그 반대로 최대 크기를 제한합니다.

  • doru
    352
    2021-06-04 14:44:51

    min-width/height or max-width/height를 주는 이유는 위의 분들이 설명해주셧지만 보통 이걸 쓸땐 

    width/height:를 %로 넣은경우일겁니다. 가령 데스크톱에서 100%를 유지하다가 반응형에 들어갈땐

    min-/max-로 사이즈를  일정 사이즈를 유지하게 만드는 것이죠. 

    예를들면 테이블표같은건 모바일에서도 좌우 100%를 계속 유지하려하면 당연히 테이블 내용이 많을수록 내용이 제대로 보기 힘들게 두줄, 세줄로 내려가고 가독성이 매우 떨어지겠지요?

    꼭 테이블이 아니더라도 모바일에서 반응형으로 처리하기 힘들어 결국 좌우 스크롤로 볼수있게 구현하는 컨텐츠들이 있을겁니다.


    그런경우 데스크톱에선 width:100%를 유지하다가

    모바일이나 태블릿에선 미디어쿼리를 써서 해당 해상도부턴 min-width를 줘 좌우넓이를 일정 px만큼 늘려주는겁니다.

    물론 좌우 스크롤을 위해선 min-width이외에도 다른 css태그를 조합해야합니다. 

    아무튼 min-/max- width or height는 주로 반응형때문에 사용합니다. 

  • 로그인을 하시면 답변을 등록할 수 있습니다.