[CSS] min-width / max-width

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

만약 가로 크기를 지정할 때 가로 속성 값을 %로 지정했을 때  width와 max-width는 무시할 수 없는 차이가 있다.

 

 

 

1. width와 max-width의 차이 

 

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

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

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

 

max-width : 1200px;
width : 100%;

 

- 브라우저 최대 크기는 1200px 까지 지정 하되, 그 이상으로는 커지지 않는다. 1200px 이하는 100%로 처리 

 

 

 

2. width와 min-width의 차이

 

min-width : 1200px;
width : 100%;

 

- 브라우저 최소 크기가 1200px 이고, 그 이하로 떨어지지 않는다. 1200px 이상일 경우 100% 처리 

 

 

 

 

출처

 

studiomeal.com/archives/1004

ccuram.tistory.com/29

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