[html/css]max-width 속성, max-height 속성 알아보기

 

 

[html/css] max-width 속성, max-height 속성 알아보기

 

 

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

 

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

 

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

 

(ie7은 doctype을 선언해야 함)

 

max-width 속성

 

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

 

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

 

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

 

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

 

 

 

→max-width 속성값

 

max-width: none|length|initial|inherit;
 
none - 기본값
길이값 - px, cm, em 등
% - 요소를 담고 있는 박스에 비례한 백분율

initial - 초기화

inherit - 상속

 

 

 

max-height 속성

 

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

 

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

 

→ max-height 속성값

  

max-height: none|length|initial|inherit;

 

none 기본값

길이값 px, cm, em 등

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

 

 

사용 예

 

#header{width:700px; height:200px; max-width: 500px; max-height: 100px; background-color:pink;}

 

 

 

 

#img{max-width: 300px; max-height: 300px;}

 

 

 

 

반응형 웹디자인에서 사용 예:

 

 

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

 

이렇게 하면, 컴퓨터 화면과, 각기 다른 너비를 지닌 스마트폰이나 갤럭시 탭 화면에서

 

최대 가로 화면이 1024px일 때 스타일이 적용됩니다. 

 

 

@import rule 사용법, link 태그와 차이

 

@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이)

 

외부 문서를 연결하는 link 태그 사용법