2. CSS(min,max width와 height)- min,max 적용 너비와 높이

오늘은 min값과 max 값을 지정해서 정해놓은 값 이상으로 줄어 들거나 늘어나는 것을

방지 해 볼 껀데요.

일단은 정확히 사용법을 알아야 사용할 수 있겠죠??

min-width / min-height / max-width / max-height

min-width : 요소의 최소 너비를 지정

min-height : 요소의 최소 높이를 지정

max-width : 요소의 최대 너비를 지정

max-height : 요소의 쵀대 높이를 지정

이런식으로 CSS에 적용을 시켜주시면 되는데요.

사용 예를 한번 볼까요??

div {
    max-width: 1000px;
    min-width: 500px;
}

이런식으로 적용 시켜 주시면 되는데요.

여기서 하나 알고 계셔야 될께 하나가 있습니다!

min 값은 max 값이 기본 width 값 보다 우선시 되어 적용되기 때문에

기본 width와 중복사용을 권하지는 않습니다!! 

이런 식으로 잘 적용해 보셨나요??

이렇게 적용시켜 보시면 나중에 div 안에 p tag가 들어가 있을 때

화면이 줄어드는 과정에서 글자가 밀리는 현상을 방지 할 수 있습니다.

하지만 그 만큼 고정시켜 놓기 때문에 반응형 웹으로 만드실 생각이라면 break 포인트를 잡으시거나 

부트스트랩으로 만들어 보시는 걸 추천해 드립니다.

모든 것에는 유용한 면과 불편한 면이 있듯이 코드도 마찬가지라 생각하며

개개인 마다 특성이 다르기 때문에 자신만의 코드 작성법을 익히시는 걸 추천해 드립니다.

이상으로 포스팅을 마치겠습니다!!

감사합니다.