[css] max-width, min-width

기초 !

width의 %는 화면 크기나 부모 요소에 의한 상대적인 값이다 (반응형 웹 만들 때 주로 사용)

px은 절대적인 값

 

 

max-width와 min-width는 반응형 웹에서 크기를 조절할 때 사용한다

스크린의 크기는 다 다른데 화면의 크기가 너무 커지거나 작아질 때를 대비해서 어느 정도 최대값과 최솟값을 정해줄 때 사용한다

 

 

max-width(최대 가로 길이)

max-width를 적용하면 설정한 값보다 커질 수 없다

예를 들어 이미지 가로 길이가 200px로 일 때 max-width: 100px을 적용하면 이미지의 가로 길이는 100px이 된다

width: 50%;

max-width: 500px; 

화면을 키울 때 이 부분도 커진다. 이미지가 50%이지만 500px 이상으로 키우는 걸 그만하고 싶을 때 max-width를 쓴다

그러면 500px일때부터 커지지 않는다

 

 

min-width(최소 가로 길이)

max-width를 적용하면 설정한 값보다 작아질 수 없다

예를 들어 이미지 가로 길이가 50px이면 min-width:100px를 적용하면 이미지 가로 길이는 100px이 된다

width: 70%;

min-width: 400px;

이것은 max-width와 반대로 입력된 값에서 더 작아지지 않는다

 

 

/*이 설명을 보니 이해가 확! 

정말 이해가 안가서 골치 아팠던 참이었다*/