width, max-width 의 차이

개요

모던 웹 디자인 실습을 하는 도중 원래 알고 있던 max-width 의 개념에 반하는 현상이 나타난 듯 하여 궁금증이 생겼고 이를 정리하기 위해 글을 작성합니다.

 

개념

width : 속성을 100%로 설정할 경우 요소를 감싸고 있는 부모 요소의 크기에 맞춰 100%를 유지

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

 

예제

 

 

위 그림에서 이미지 리소스의 크기는 1500 * 375 크기이다. 여기에 max-width 또는 width를 100% 적용해보면 다음과 같다.

 

width:100% 를 적용해도 비슷함

조금 의아했던게 max-width 로 속성을 100% 기본 요소 크기로 잡힌다고 알고 있었다.

`그러면 1500*375 크기로 잡혀야 되지 않나? 근데 오히려 화면에 맞춰서 더 작게 영역이 잡히네?` 

 

부모 요소들 크기를 따져보니, 다음과 같이 정리할 수 있었다.

 

max-width는 요소의 기본 크기 이상으로 커지지 않지만, 그 기본 크기가 부모 요소들 보다 큰 경우 부모 요소의 크기로 재설정이 된다.

 

그래서 위 사진에서 max-width: 100%로 주었을 때 기본 요소의 크기인 1500px은 부모 요소의 크기인 862px를 넘으므로, 862px로 조정되어 화면에 나오게 되는 것이다.

출처

https://jjaigo.tistory.com/227