max-width/max-height

max-width 와 max-height는 어떤 요소의 최대 너비와 높이값을 설정하는 속성이다.

반응형 웹디자인에서, 화면에 따라 다르게 스타일을 적용할 때 자주 사용된다.

두 속성 다 주요 브라우저에서 지원하지만 ie6 이전 버전은 지원하지 않는다.

(ie7은 doctype을 선언해줘야 함)

 

max-width 속성

 

어떤 요소의 최대 너비를 지정한다.

요소의 너비값이, max-width 너비값보다 커지는 것을 방지한다.

즉, max-width는 width 속성값을 무효화 시킨다.

이미지 가로 너비가 500px일 떄, max-width:400px 으로 설정하면 400px 이하로만 이미지가 보인다.

 

속성값

none : 기본값

길이값 - px, cm, em 등

% : 요소를 담고 있는 박스에 비례한 백분율

initial : 초기화

inherit : 상속

 

max-height 속성

 

요소의 최대 높이를 지정한다.

max-height 속성 역시 height 속성값을 무효화 시킽다.

 

속성값

none : 기본값

길이값 - px, cm, em 등

% : 요소를 담고 있는 박스에 비례한 백분율

 

 

**반응형 웹 디바인에서의 사용 예**

@media screen and (max-width:1024px) {...}

=> 컴퓨터 화면과, 각기 다른 너비를 지닌 스마트폰 등의 화면에서 최대 가로 화면이 1024px일 때 스타일이 적용된다.