[css] width, max-width 차이점 완벽히 이해하기

 

width와 max-width 속성은 비슷해보여서 혼동하는 경우가 많고, 

그 용도의 차이점을 제대로 이해하기 어렵습니다.

하지만 두 속성은 엄연한 차이가 있고, 이를 완벽히 파헤쳐보겠습니다!

 

 

width: 속성을 100%로 설정할 경우 요소의 크기를 부모요소 크기에 맞춰 100%로 유지합니다.

max-width: 속성을 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않습니다. 

단, 그 기본크기가 부모 요소보다 큰 경우 부모 요소의 크기로 재설정됩니다. 

 

 

 

 

가로너비가 720px인 이미지를 사용한 여섯가지 예시를 정리해보겠습니다.

 

1. 가로 너비 값을 아무 것도 지정하지 않은 경우
: 창의 크기를 줄여도 이미지 크기에 아무런 변화도 없습니다.

 

See the Pen width, max-width 차이점 1 by Yeaeun Hwang (@yeaeunhwang) on CodePen.

 

2. width: 100%로 지정한 경우
: 창의 크기를 줄이거나 늘리면 창의 너비에 맞춰 크기가 커집니다.

 

See the Pen width, max-width 차이점 2 by Yeaeun Hwang (@yeaeunhwang) on CodePen.

 

 3. max-width: 100% 로 지정한 경우
: 창의 크기를 줄이면 줄인만큼 줄어들지만,
  크기를 키울 때는 원래 이미지 사이즈보다 커지지 않습니다.

 

See the Pen width, max-width 차이점 3 by Yeaeun Hwang (@yeaeunhwang) on CodePen.

 

 4. 부모요소에 특정 max-width값을, 자식요소에 width:100%를 지정한 경우

: 부모요소의 크기(1200px)가 원래 이미지(720px)보다 커도

부모 너비에 맞춰 크기가 커집니다.

 

See the Pen width, max-width 차이점 4 by Yeaeun Hwang (@yeaeunhwang) on CodePen.

 

 5. 부모요소에 특정 max-width값을, 자식요소에 max-width:100%를 지정한 경우

: 부모요소의 크기(1200px)가 원래 이미지(720px)보다 커도

원래 이미지 크기에 맞춰 더 이상 커지지 않습니다.

 

See the Pen width, max-width 차이점 5 by Yeaeun Hwang (@yeaeunhwang) on CodePen.

 

 6. 부모요소에 자식요소보다 작은 max-width값을, 자식요소에 max-width:100%를 지정한 경우

: 원래 이미지의 크기(720px)가 부모요소(400px)보다 클 때, 부모 너비에 맞춰집니다.

(자식요소에 width:100%를 지정한 경우와 결과 동일!)

 

 

See the Pen width, max-width 차이점 6 by Yeaeun Hwang (@yeaeunhwang) on CodePen.