[CSS] width와 max-width의 차이점

웹페이지에 이미지나 영상을 넣을 때 가로 크기를 지정하지 않을 수도 있지만,

가로 크기를 지정하고 싶을 수 있다.

만약 가로 크기를 지정할 때 가로 속성 값을 %로 지정했을 때 

width와 max-width는 무시할 수 없는 차이가 있다.

width와 max-width의 차이

---

width 속성과 max-width 속성은 비슷해 보이지만 분명한 차이가 있다.

width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지하지만,

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

이 곳을 클릭하면 직접 만든 예제 페이지로 이동한다.

1. width: 100%로 지정한 경우

2. 가로 너비 값을 아무 것도 지정하지 않은 경우

3. max-width: 100% 로 지정한 경우

를 비교할 수 있다.

width와 max-width의 차이를 비교할 수 있는 예제 페이지 

예제에서 브라우저 창의 너비를 줄여보거나 늘려보면 확인할 수 있듯이,

1. width: 100%로 지정한 경우에는
   : 창의 크기를 줄이거나 늘리면 창의 너비에 맞춰 크기가 충실히 증감한다.
   
   

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

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

참고서적

---

김운아, 『반응형 웹디자인』, 이지스퍼블리싱, 2014, 71쪽