본문 바로가기
css

min-width 속성, min-height 속성 사용법

by 지구별에 2014. 8. 1.

 

 

min-width 속성, min-height 속성 사용법

 

며칠 전 max-width 속성과  max-height 속성을 알아 보았습니다.

 

 

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

 

 

max-width, max-height가  요소의 최대 너비와 높이를 지정한다면

 

min-width, min-height 속성은 요소의 최소 너비와 높이를 지정합니다

 

이 속성 역시 주요 브라우저에서 모두 지원하며, ie6 이전은 지원하지 않습니다.

 

(ie7은 doctype을 선언해야 함)

 

 

min-width 속성

 

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

 

요소의 width 값이,  min-width 값보다 작아지는 것을 방지합니다.

 

min-width는 width 속성값을 무효화시킵니다.

 

예를 들어,이미지에 min-width: 100px으로 설정하면 이미지 너비가 100px 이하로 작아지지 않습니다.

 

 

→min-width 속성값

 

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

initial - 초기화

inherit - 상속

 

 

 


min-height 속성

 

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

 

min-height 속성도  height 속성값을 무효화시킵니다.

 



→ min-height 속성값

  


min-height: length|%|initial|inherit;

 

길이값 - px, cm, em 등(기본값은 0)
% - 요소를 담고 있는 박스에 비례한 백분율

initial - 초기화

inherit - 상속

 

 

 

▶사용 예:

 

div{min-width: 100px;}

table{min-width: 50%; min-height: 50%;}

 

 


▶ 사용 예 2:

min-width.html

 

 

 <!DOCTYPE html>
<html>
<head>
<style>
body{background-color:pink; min-width: 50px; max-width: 800px;}
</style>
</head>

<body>
<h4> Down the Rabbit Hole</h4>
ALICE was beginning to get very tired of sitting by her sister on the bank
and of having nothing to do: once or twice she had peeped into the book
her sister was reading, but it had no pictures or conversations in it,
"and what is the use of a book," thought Alice, "without pictures or conversations?'

</body>
</html>

 

 

*body {min-width: 50px}

 

이렇게 하면 최소 너비가 50px 이하로 축소되지 않습니다.

 

▶실행화면

 

 

 

 

<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://aboooks.tistory.com/print.css />

 

이렇게 하면,  미디어가 인쇄매체이고, 최소 너비가 8.5인치 이상일 때 , print.css 파일을 내려 받습니다.

 

 

[html/css]외부 문서를 연결하는 link 태그 사용법

 

반응형

댓글0